govbr-ds-angular
Version:
Implementação em Angular do Design System GovBR.
1 lines • 157 kB
Source Map (JSON)
{"version":3,"file":"govbr-ds-angular.mjs","sources":["../../../projects/govbr-ds-angular/src/lib/components/alert/alert.service.ts","../../../projects/govbr-ds-angular/src/lib/pipes/has-error/has-error.pipe.ts","../../../projects/govbr-ds-angular/src/lib/utils/get-icon-by-state.utils.ts","../../../projects/govbr-ds-angular/src/lib/pipes/get-icon-by-state/get-icon-by-state.pipe.ts","../../../projects/govbr-ds-angular/src/lib/components/alert/alert.component.ts","../../../projects/govbr-ds-angular/src/lib/components/alert/alert.component.html","../../../projects/govbr-ds-angular/src/lib/components/breadcrump/breadcrumb.component.ts","../../../projects/govbr-ds-angular/src/lib/components/breadcrump/breadcrumb.component.html","../../../projects/govbr-ds-angular/src/lib/components/checkbox/checkbox.component.ts","../../../projects/govbr-ds-angular/src/lib/components/checkbox/checkbox.component.html","../../../projects/govbr-ds-angular/src/lib/components/collapse-item/collapse-item.component.ts","../../../projects/govbr-ds-angular/src/lib/components/collapse-item/collapse-item.component.html","../../../projects/govbr-ds-angular/src/lib/components/cookie-bar/cookie-bar.component.ts","../../../projects/govbr-ds-angular/src/lib/components/cookie-bar/cookie-bar.component.html","../../../projects/govbr-ds-angular/src/lib/components/date-time-picker/date-time-picker.component.ts","../../../projects/govbr-ds-angular/src/lib/components/date-time-picker/date-time-picker.component.html","../../../projects/govbr-ds-angular/src/lib/directives/button/button.directive.ts","../../../projects/govbr-ds-angular/src/lib/directives/feedback/feedback.directive.ts","../../../projects/govbr-ds-angular/src/lib/components/dialog-confirm/dialog-confirm.component.ts","../../../projects/govbr-ds-angular/src/lib/components/dialog-confirm/dialog-confirm.component.html","../../../projects/govbr-ds-angular/src/lib/components/input/input.component.ts","../../../projects/govbr-ds-angular/src/lib/components/input/input.component.html","../../../projects/govbr-ds-angular/src/lib/components/item-info/item-info.component.ts","../../../projects/govbr-ds-angular/src/lib/components/item-info/item-info.component.html","../../../projects/govbr-ds-angular/src/lib/components/loading/services/loading.service.ts","../../../projects/govbr-ds-angular/src/lib/components/loading/loading.component.ts","../../../projects/govbr-ds-angular/src/lib/components/loading/loading.component.html","../../../projects/govbr-ds-angular/src/lib/components/magic-button/magic-button.component.ts","../../../projects/govbr-ds-angular/src/lib/components/magic-button/magic-button.component.html","../../../projects/govbr-ds-angular/src/lib/components/menu/menu.component.ts","../../../projects/govbr-ds-angular/src/lib/components/menu/menu.component.html","../../../projects/govbr-ds-angular/src/lib/components/multi-select/multi-select.component.ts","../../../projects/govbr-ds-angular/src/lib/components/multi-select/multi-select.component.html","../../../projects/govbr-ds-angular/src/lib/components/paginator/paginator.component.ts","../../../projects/govbr-ds-angular/src/lib/components/paginator/paginator.component.html","../../../projects/govbr-ds-angular/src/lib/components/radio/radio.component.ts","../../../projects/govbr-ds-angular/src/lib/components/radio/radio.component.html","../../../projects/govbr-ds-angular/src/lib/components/select/select.component.ts","../../../projects/govbr-ds-angular/src/lib/components/select/select.component.html","../../../projects/govbr-ds-angular/src/lib/components/switch/switch.component.ts","../../../projects/govbr-ds-angular/src/lib/components/switch/switch.component.html","../../../projects/govbr-ds-angular/src/lib/components/tabs/tabs.component.ts","../../../projects/govbr-ds-angular/src/lib/components/tabs/tabs.component.html","../../../projects/govbr-ds-angular/src/lib/components/textarea/textarea.component.ts","../../../projects/govbr-ds-angular/src/lib/components/textarea/textarea.component.html","../../../projects/govbr-ds-angular/src/lib/components/loading/interceptors/loading.interceptor.ts","../../../projects/govbr-ds-angular/src/lib/components/index.ts","../../../projects/govbr-ds-angular/src/public-api.ts","../../../projects/govbr-ds-angular/src/govbr-ds-angular.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\nimport { StateType } from '../../utils';\r\n\r\n/**\r\n * Representa um evento de alerta.\r\n */\r\nexport type AlertEvent = {\r\n\t/** Tipo do estado do alerta. */\r\n\ttype: StateType;\r\n\t/** Mensagem do alerta. */\r\n\tmessage: string;\r\n\t/** Título opcional do alerta. */\r\n\ttitle?: string;\r\n\t/** Duração opcional do alerta em milissegundos. */\r\n\tduration?: number;\r\n\t/** Indica se o alerta deve fechar automaticamente. */\r\n\tautoClose?: boolean;\r\n\t/** ID do timeout para fechamento automático do alerta. */\r\n\tcloseTimeId?: any;\r\n\t/** Indica se o alerta pode ser fechado manualmente. */\r\n\tclosable?: boolean;\r\n};\r\n\r\n/**\r\n * Serviço para exibir alertas na aplicação.\r\n * @public\r\n * @example\r\n * // Exemplo de uso do serviço de alerta.\r\n * private alertService = inject(AlertService);\r\n * alertService.showAlert('success', 'Operação realizada com sucesso.');\r\n */\r\n@Injectable({\r\n\tprovidedIn: 'root',\r\n})\r\nexport class AlertService {\r\n\tprivate readonly _alert = new Subject<AlertEvent>();\r\n\tprivate readonly _clear = new Subject<void>();\r\n\r\n\t/** Observable para eventos de alerta. */\r\n\tpublic get alertEvents$() {\r\n\t\treturn this._alert.asObservable();\r\n\t}\r\n\r\n\t/**\r\n\t * Define e emite um novo evento de alerta.\r\n\t * @internal\r\n\t * */\r\n\tprivate set alertEvents(value: AlertEvent) {\r\n\t\tthis._alert.next(value);\r\n\t}\r\n\r\n\t/**\r\n\t * Observable para eventos de limpeza de alerta.\r\n\t * @internal\r\n\t * */\r\n\tpublic get clearEvent$() {\r\n\t\treturn this._clear.asObservable();\r\n\t}\r\n\r\n\t/**\r\n\t * Exibe um alerta com as propriedades especificadas.\r\n\t * @param type - Tipo do estado do alerta.\r\n\t * @param message - Mensagem do alerta.\r\n\t * @param title - Título opcional do alerta.\r\n\t * @param autoClose - Indica se o alerta deve fechar automaticamente.\r\n\t * @param duration - Duração opcional do alerta em milissegundos.\r\n\t * @param closable - Indica se o alerta pode ser fechado manualmente.\r\n\t * @param delay - Atraso opcional antes de exibir o alerta.\r\n\t */\r\n\tpublic showAlert(\r\n\t\ttype: StateType,\r\n\t\tmessage: string,\r\n\t\ttitle?: string,\r\n\t\tautoClose = true,\r\n\t\tduration = 4000,\r\n\t\tclosable = true,\r\n\t\tdelay = 0\r\n\t): void {\r\n\t\tif (delay) {\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tthis.alertEvents = { type, message, title, duration, autoClose, closable };\r\n\t\t\t}, delay);\r\n\t\t} else {\r\n\t\t\tthis.alertEvents = { type, message, title, duration, autoClose, closable };\r\n\t\t}\r\n\t}\r\n\r\n\t/** Limpa todos os alertas emitindo um evento de limpeza. */\r\n\tpublic clearAlerts(): void {\r\n\t\tthis._clear.next();\r\n\t}\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\n\r\n/**\r\n * Pipe HasErrorPipe é responsável por verificar se um campo possui erro.\r\n * @example\r\n * <div *ngIf=\"form.get('campo') | hasError : 'required'\">Campo obrigatório</div>\r\n * @standalone\r\n */\r\n@Pipe({\r\n\tname: 'hasError',\r\n\tstandalone: true,\r\n\tpure: false,\r\n})\r\nexport class HasErrorPipe implements PipeTransform {\r\n\ttransform(value: AbstractControl, error?: string): boolean {\r\n\t\tif (error) {\r\n\t\t\treturn value.invalid && value.hasError(error) && (value.dirty || value.touched);\r\n\t\t}\r\n\t\treturn value.invalid && (value.dirty || value.touched);\r\n\t}\r\n}\r\n","export const ICONS_BY_STATE = {\r\n\tsuccess: 'fa-check-circle',\r\n\tdanger: 'fa-times-circle',\r\n\twarning: 'fa-exclamation-triangle',\r\n\tinfo: 'fa-info-circle',\r\n\t['']: '',\r\n};\r\n\r\nexport type StateType = keyof typeof ICONS_BY_STATE;\r\n\r\n/**\r\n * Função que retorna o ícone de acordo com o estado passado.\r\n * @param state\r\n * @returns Ícone correspondente ao estado.\r\n * @example\r\n * getIconByStateUtils('success');\r\n * // Retorna 'fa-check-circle'\r\n */\r\nexport const getIconByStateUtils = (state: StateType) => {\r\n\treturn ICONS_BY_STATE[state] || '';\r\n};\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { getIconByStateUtils, StateType } from '../../utils';\r\n\r\n@Pipe({\r\n\tname: 'getIconByState',\r\n\tstandalone: true,\r\n})\r\nexport class GetIconByStatePipe implements PipeTransform {\r\n\ttransform(state: StateType): string {\r\n\t\treturn getIconByStateUtils(state);\r\n\t}\r\n}\r\n","import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';\r\nimport { NgClass } from '@angular/common';\r\nimport { AlertEvent, AlertService } from './alert.service';\r\nimport { animate, style, transition, trigger } from '@angular/animations';\r\nimport {GetIconByStatePipe} from '../../pipes';\r\n\r\n\r\n/**\r\n * Componente AlertComponent é responsável por exibir mensagens de alerta com animações.\r\n * Ele escuta eventos de alerta do AlertService e gerencia o comportamento de exibição e fechamento automático dos alertas.\r\n * @example\r\n * <app-alert></app-alert>\r\n * @see AlertService\r\n * @public\r\n * {@link https://www.gov.br/ds/components/message?tab=desenvolvedor|Documentação oficial}\r\n */\r\n@Component({\r\n\tselector: 'app-alert',\r\n\tstandalone: true,\r\n\timports: [NgClass, GetIconByStatePipe],\r\n\thost: {\r\n\t\tclass: 'alert-container',\r\n\t},\r\n\ttemplateUrl: './alert.component.html',\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n\tanimations: [\r\n\t\ttrigger('scaleFadeIn', [\r\n\t\t\ttransition(':enter', [\r\n\t\t\t\tstyle({\r\n\t\t\t\t\ttransform: 'scale(0.8)',\r\n\t\t\t\t\topacity: 0,\r\n\t\t\t\t}),\r\n\t\t\t\tanimate(\r\n\t\t\t\t\t`500ms cubic-bezier(0.35, 0, 0.25, 1)`,\r\n\t\t\t\t\tstyle({\r\n\t\t\t\t\t\ttransform: 'scale(1)',\r\n\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t})\r\n\t\t\t\t),\r\n\t\t\t]),\r\n\t\t\ttransition(':leave', [style({ opacity: 1 }), animate(`300ms ease-in`, style({ opacity: 0 }))]),\r\n\t\t]),\r\n\t],\r\n})\r\nexport class AlertComponent implements OnInit {\r\n\t/** Sinal para manter o evento de alerta atual */\r\n\talert = signal<AlertEvent | null>(null);\r\n\t/** Instância do AlertService para se inscrever nos eventos de alerta */\r\n\tprivate alertService = inject(AlertService);\r\n\r\n\tconstructor() {}\r\n\r\n\t/**\r\n\t * Inicializa o componente inscrevendo-se nos eventos de alerta e eventos de limpeza do AlertService.\r\n\t * @internal\r\n\t */\r\n\tngOnInit(): void {\r\n\t\tthis.alertService.alertEvents$.subscribe(event => {\r\n\t\t\tthis.alert.set(event);\r\n\t\t\tif (event.autoClose) this.registerCloseTime(event);\r\n\t\t});\r\n\t\tthis.alertService.clearEvent$.subscribe(() => this.onHide());\r\n\t}\r\n\r\n\t/**\r\n\t * Oculta o alerta definindo o sinal de alerta como null.\r\n\t * @internal\r\n\t */\r\n\tpublic onHide(): void {\r\n\t\tthis.alert.set(null);\r\n\t}\r\n\r\n\t/**\r\n\t * Registra um timeout para fechar automaticamente o alerta após a duração especificada.\r\n\t * @param event - O evento de alerta contendo a duração e o closeTimeId.\r\n\t * @internal\r\n\t */\r\n\tprotected registerCloseTime(event: AlertEvent): void {\r\n\t\tevent.closeTimeId = setTimeout(() => this.onHide(), event.duration);\r\n\t}\r\n\r\n\t/**\r\n\t * Limpa o timeout de fechamento automático quando o mouse entra no alerta.\r\n\t * @param event - O evento de alerta contendo o closeTimeId.\r\n\t * @internal\r\n\t */\r\n\tpublic onMouseEnter(event: AlertEvent): void {\r\n\t\tif (!event.autoClose) return;\r\n\t\tclearTimeout(event.closeTimeId);\r\n\t}\r\n\r\n\t/**\r\n\t * Re-registra o timeout de fechamento automático quando o mouse é pressionado no alerta.\r\n\t * @internal\r\n\t * @param event - O evento de alerta contendo o closeTimeId.\r\n\t */\r\n\tpublic onMouseDown(event: AlertEvent): void {\r\n\t\tif (!event.autoClose) return;\r\n\t\tthis.registerCloseTime(event);\r\n\t}\r\n}\r\n","@if (alert(); as alert) {\n\t<div\n\t\t(mouseenter)=\"onMouseEnter(alert)\"\n\t\t(mouseleave)=\"onMouseDown(alert)\"\n\t\tclass=\"br-message {{ alert.type }}\"\n\t\t@scaleFadeIn\n\t>\n\t\t<div class=\"d-flex w-100 container-lg\">\n\t\t\t<div class=\"icon\"><i class=\"fas fa-lg\" [ngClass]=\"alert.type | getIconByState\" aria-hidden=\"true\"></i></div>\n\t\t\t<div class=\"content\" [attr.aria-label]=\"alert.message\" role=\"alert\">\n\t\t\t\t@if (alert.title) {\n\t\t\t\t\t<span class=\"message-title\">{{ alert.title }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"message-body\"> {{ alert.message }}</span>\n\t\t\t</div>\n\t\t\t@if (alert.closable) {\n\t\t\t\t<div (click)=\"onHide()\" class=\"close\">\n\t\t\t\t\t<button class=\"br-button circle small\" type=\"button\" aria-label=\"Fechar a mensagem alerta\">\n\t\t\t\t\t\t<i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n","import {\r\n\tAfterViewInit,\r\n\tChangeDetectionStrategy,\r\n\tComponent,\r\n\tinject,\r\n\tOnInit,\r\n\tsignal,\r\n\tViewEncapsulation,\r\n} from '@angular/core';\r\nimport { ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router';\r\nimport BRBreadcrumb from '@govbr-ds/core/dist/components/breadcrumb/breadcrumb';\r\nimport { NgClass } from '@angular/common';\r\n\r\n/**\r\n * Componente BreadcrumbComponent é responsável por exibir a navegação de breadcrumb.\r\n * Ele escuta eventos de navegação do Angular Router e constrói a trilha de navegação dinamicamente.\r\n * @example\r\n * <app-breadcrumb></app-breadcrumb>\r\n *\r\n * @public\r\n * {@link https://www.gov.br/ds/components/breadcrumb?tab=desenvolvedor|Documentação oficial}\r\n */\r\n@Component({\r\n\tselector: 'app-breadcrumb',\r\n\tstandalone: true,\r\n\timports: [RouterLink, NgClass],\r\n\thost: {\r\n\t\tclass: 'br-breadcrumb',\r\n\t\t'[class.d-none]': '!showBreadcrumb()',\r\n\t},\r\n\ttemplateUrl: './breadcrumb.component.html',\r\n\tstyleUrl: './breadcrumb.component.scss',\r\n\tencapsulation: ViewEncapsulation.None,\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class BreadcrumbComponent implements AfterViewInit, OnInit {\r\n\t/** Instância do componente BRBreadcrumb */\r\n\tinstance: unknown;\r\n\t/** Lista de breadcrumbs a serem exibidos */\r\n\tcrumbs: Array<{ label: string; url: string; home?: boolean; active?: boolean }> = [];\r\n\t/** Sinal para controlar a exibição do breadcrumb */\r\n\tshowBreadcrumb = signal<boolean>(false);\r\n\r\n\t/** Instância do Angular Router */\r\n\trouter = inject(Router);\r\n\t/** Instância do ActivatedRoute para acessar informações da rota */\r\n\troute = inject(ActivatedRoute);\r\n\r\n\tconstructor() {}\r\n\r\n\t/**\r\n\t * @internal\r\n\t */\r\n\tngOnInit(): void {\r\n\t\tthis.router.events.subscribe(event => {\r\n\t\t\tif (event instanceof NavigationEnd) {\r\n\t\t\t\tthis.crumbs = [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tlabel: 'Página Inicial',\r\n\t\t\t\t\t\turl: '/home',\r\n\t\t\t\t\t\thome: true,\r\n\t\t\t\t\t},\r\n\t\t\t\t];\r\n\r\n\t\t\t\tthis.showBreadcrumb.set(false);\r\n\r\n\t\t\t\tconst firstChild = this.route.root?.firstChild;\r\n\t\t\t\tif (firstChild) {\r\n\t\t\t\t\tthis.buildBreadcrumbs(firstChild);\r\n\r\n\t\t\t\t\tconst lastCrumb = this.crumbs[this.crumbs.length - 1];\r\n\t\t\t\t\tif (lastCrumb && lastCrumb.url !== '/home' && lastCrumb.url !== '/login') {\r\n\t\t\t\t\t\tthis.showBreadcrumb.set(true);\r\n\t\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\t\tthis.setNewInstance();\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * Cria uma nova instância do componente BRBreadcrumb.\r\n\t * @internal\r\n\t */\r\n\tsetNewInstance(): void {\r\n\t\tthis.instance = new BRBreadcrumb('br-breadcrumb', document.querySelector('.br-breadcrumb'));\r\n\t}\r\n\r\n\t/**\r\n\t * Constrói a trilha de navegação de breadcrumbs recursivamente com base na rota ativa.\r\n\t * @internal\r\n\t */\r\n\tbuildBreadcrumbs(route: ActivatedRoute, url: string = '') {\r\n\t\tif (route.snapshot.routeConfig) {\r\n\t\t\tconst routePath = route.snapshot.routeConfig.path;\r\n\r\n\t\t\tif (routePath) {\r\n\t\t\t\turl += `/${routePath}`;\r\n\t\t\t}\r\n\r\n\t\t\tif (route.snapshot.data['breadCrumb'] && routePath) {\r\n\t\t\t\tthis.crumbs.push({\r\n\t\t\t\t\tlabel: route.snapshot.data['breadCrumb'],\r\n\t\t\t\t\turl: url,\r\n\t\t\t\t\tactive: route.children.length === 0,\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (route.firstChild) {\r\n\t\t\tthis.buildBreadcrumbs(route.firstChild, url);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Método do ciclo de vida do Angular chamado após a visualização ser inicializada.\r\n\t * Cria uma nova instância do componente BRBreadcrumb.\r\n\t * @internal\r\n\t */\r\n\tngAfterViewInit(): void {\r\n\t\tthis.setNewInstance();\r\n\t}\r\n}\r\n","@if (showBreadcrumb()) {\n\t<ul class=\"crumb-list\">\n\t\t@for (crumb of crumbs; track crumb.label; let first = $first; let last = $last) {\n\t\t\t<li [ngClass]=\"{ home: first }\" class=\"crumb\" [attr.data-active]=\"last ? 'active' : null\">\n\t\t\t\t@if (first) {\n\t\t\t\t\t<a class=\"br-button circle\" [routerLink]=\"['/home']\">\n\t\t\t\t\t\t<span class=\"sr-only\">Página inicial</span>\n\t\t\t\t\t\t<i class=\"fas fa-home\"> </i>\n\t\t\t\t\t</a>\n\t\t\t\t} @else if (!first && !last) {\n\t\t\t\t\t<i class=\"icon fas fa-chevron-right\"></i>\n\t\t\t\t\t<a [routerLink]=\"[crumb.url]\">{{ crumb.label }}</a>\n\t\t\t\t} @else {\n\t\t\t\t\t<i class=\"icon fas fa-chevron-right\"></i>\n\t\t\t\t\t<span>{{ crumb.label }}</span>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ul>\n}\n","import { booleanAttribute, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\r\n\r\n/**\r\n * Componente CheckboxComponent é responsável por exibir um checkbox com estado e rótulo.\r\n * @\r\n * @example\r\n * <app-checkbox [label]=\"'Aceitar termos'\" [id]=\"'checkbox1'\" [(value)]=\"isChecked\"></app-checkbox>\r\n *\r\n * @public\r\n * {@link https://www.gov.br/ds/components/checkbox?tab=desenvolvedor|Documentação oficial}\r\n */\r\n@Component({\r\n\tselector: 'app-checkbox',\r\n\tstandalone: true,\r\n\timports: [],\r\n\thost: {\r\n\t\tclass: 'br-checkbox',\r\n\t\t'[class.valid]': 'state === \"valid\"',\r\n\t\t'[class.invalid]': 'state === \"invalid\"',\r\n\t},\r\n\ttemplateUrl: './checkbox.component.html',\r\n})\r\nexport class CheckboxComponent {\r\n\t/**\r\n\t * Estado do checkbox.\r\n\t * @type {'valid' | 'invalid' | ''}\r\n\t * @default ''\r\n\t * @optional\r\n\t */\r\n\t@Input() state: 'valid' | 'invalid' | '' = '';\r\n\t/**\r\n\t * Rótulo do checkbox.\r\n\t * @type {string}\r\n\t * @required\r\n\t */\r\n\t@Input({ required: true }) label: string = '';\r\n\t/**\r\n\t * ID do checkbox.\r\n\t * @type {string}\r\n\t * @required\r\n\t */\r\n\t@Input({ required: true }) id: string = '';\r\n\t/**\r\n\t * Indica se o checkbox está desabilitado.\r\n\t * @default false\r\n\t * @type {boolean}\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) disabled: boolean = false;\r\n\t/**\r\n\t * Indica se o checkbox está marcado.\r\n\t * @default false\r\n\t * @type {boolean}\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) checked: boolean = false;\r\n\r\n\t/** Classe CSS para o estado desabilitado. */\r\n\t@HostBinding('class.disabled') get disabledClass() {\r\n\t\treturn this.disabled;\r\n\t}\r\n\r\n\tprivate _value = this.checked;\r\n\r\n\t/**\r\n\t * Obtém o valor do checkbox.\r\n\t * @returns O valor atual do checkbox.\r\n\t */\r\n\t@Input()\r\n\tget value(): boolean {\r\n\t\treturn this._value;\r\n\t}\r\n\r\n\t/**\r\n\t * Define o valor do checkbox.\r\n\t * @param val - O novo valor do checkbox.\r\n\t */\r\n\tset value(val: boolean) {\r\n\t\tif (this.disabled) return;\r\n\t\tthis._value = val;\r\n\t}\r\n\r\n\t/** Evento emitido quando o valor do checkbox muda. */\r\n\t@Output() valueChange = new EventEmitter<boolean>();\r\n\r\n\t/**\r\n\t * Manipulador de evento para mudança de estado do checkbox.\r\n\t * @param event - O evento de mudança.\r\n\t * @internal\r\n\t */\r\n\tonChangeCheck(event: Event) {\r\n\t\tconst target = event.target as HTMLInputElement;\r\n\t\tif (target) this.value = target.checked;\r\n\t\tthis.valueChange.emit(this.value);\r\n\t}\r\n}\r\n","<input\n\t(change)=\"onChangeCheck($event)\"\n\tid=\"checkbox-{{ id }}\"\n\tname=\"checkbox-{{ id }}\"\n\ttype=\"checkbox\"\n\t[attr.aria-label]=\"label\"\n\t[checked]=\"value\"\n/>\n<label for=\"checkbox-{{ id }}\">{{ label }}</label>\n","import { booleanAttribute, Component, Input } from '@angular/core';\nimport { CdkAccordionModule } from '@angular/cdk/accordion';\n\n/**\n * Componente de item de colapso.\n *\n * @selector app-collapse-item\n * @standalone true\n * @imports CdkAccordionModule\n */\n@Component({\n\tselector: 'app-collapse-item',\n\tstandalone: true,\n\timports: [CdkAccordionModule],\n\ttemplateUrl: './collapse-item.component.html',\n\tstyleUrl: './collapse-item.component.scss',\n})\nexport class CollapseItemComponent {\n\t/**\n\t * Rótulo do item de colapso.\n\t * @type {string}\n\t * @required\n\t */\n\t@Input({ required: true }) label: string;\n\n\t/**\n\t * ID do item de colapso.\n\t * @type {string}\n\t * @required\n\t */\n\t@Input({ required: true }) id: string;\n\n\t/**\n\t * Indica se o item de colapso está expandido.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) expanded: boolean = false;\n}\n","<cdk-accordion-item\n\t#accordionItem=\"cdkAccordionItem\"\n\t[expanded]=\"expanded\"\n\tclass=\"accordion-item\"\n\trole=\"button\"\n\ttabindex=\"0\"\n\t[attr.id]=\"'accordion-header-' + id\"\n\t[attr.aria-expanded]=\"accordionItem.expanded\"\n\t[attr.aria-controls]=\"'accordion-body-' + id\"\n>\n\t<div class=\"header\" (click)=\"accordionItem.toggle()\">\n\t\t<span>\n\t\t\t{{ label }}\n\t\t</span>\n\t\t<i class=\"fas fa-chevron-down\" [class.fa-rotate-180]=\"accordionItem.expanded\"> </i>\n\t</div>\n\t@if (accordionItem.expanded) {\n\t\t<div\n\t\t\tclass=\"block\"\n\t\t\trole=\"region\"\n\t\t\t[attr.id]=\"'accordion-body-' + id\"\n\t\t\t[attr.aria-labelledby]=\"'accordion-header-' + id\"\n\t\t>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t}\n</cdk-accordion-item>\n","import { AfterViewInit, Component, ElementRef, inject, input, output } from '@angular/core';\r\nimport BRCookiebar from '@govbr-ds/core/dist/components/cookiebar/cookiebar';\r\nimport cookies from './content/cookies.json';\r\nimport { CookieModel } from './model/cookie.model';\r\n\r\n@Component({\r\n\tselector: 'app-cookie-bar',\r\n\tstandalone: true,\r\n\timports: [],\r\n\ttemplateUrl: './cookie-bar.component.html',\r\n\tstyleUrl: './cookie-bar.component.scss',\r\n})\r\nexport class CookieBarComponent implements AfterViewInit {\r\n\tprivate instance: unknown;\r\n\tprivate brCookieBar = inject(ElementRef);\r\n\tcookiesJson = input<object>(cookies);\r\n\tsubmit = output<CookieModel>();\r\n\r\n\tngAfterViewInit(): void {\r\n\t\tconst component = this.brCookieBar.nativeElement.querySelector('.br-cookiebar');\r\n\t\tconst params = {\r\n\t\t\tname: 'br-cookiebar',\r\n\t\t\tcomponent: component,\r\n\t\t\tjson: this.cookiesJson(),\r\n\t\t\tlang: 'pt-br',\r\n\t\t\tmode: 'default',\r\n\t\t\tcallback: (response: CookieModel) => this.submit.emit(response),\r\n\t\t};\r\n\t\tthis.instance = new BRCookiebar(params);\r\n\t}\r\n}\r\n","<div class=\"br-cookiebar default d-none\" tabindex=\"-1\"></div>\r\n","import {\n\tAfterViewInit,\n\tbooleanAttribute,\n\tComponent,\n\tElementRef,\n\tforwardRef,\n\tinject,\n\tInput,\n\tOnInit,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { AbstractControl, ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';\nimport BRDateTimePicker from '@govbr-ds/core/dist/components/datetimepicker/datetimepicker';\n\nexport const TYPE_DATE_PICKER = {\n\tdate: 'text',\n\ttime: 'time',\n\tdate_time: 'datetime-local',\n};\n\nexport type TypesDatePicker = keyof typeof TYPE_DATE_PICKER;\n\n/**\n * Componente DateTimePickerComponent é responsável por exibir um seletor de data e hora.\n * Implementa a interface ControlValueAccessor para integração com formulários Angular.\n * @example\n * <app-date-time-picker [label]=\"'Data e Hora'\" [id]=\"'datetimepicker1'\" [(ngModel)]=\"selectedDate\"></app-date-time-picker>\n *\n * @public\n * {@link https://www.gov.br/ds/components/datetimepicker?tab=desenvolvedor|Documentação oficial}\n */\n@Component({\n\tselector: 'app-date-time-picker',\n\tstandalone: true,\n\timports: [NgClass, FormsModule],\n\ttemplateUrl: './date-time-picker.component.html',\n\tproviders: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true }],\n})\nexport class DateTimePickerComponent implements OnInit, AfterViewInit, ControlValueAccessor {\n\t/**\n\t * Rótulo do componente DateTimePicker.\n\t * @type {string}\n\t * @required\n\t */\n\t@Input({ required: true }) label: string = '';\n\n\t/**\n\t * ID do componente DateTimePicker.\n\t * @type {string}\n\t * @required\n\t */\n\t@Input({ required: true }) id: string;\n\n\t/**\n\t * Indica se o componente deve permitir seleção de intervalo.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) range: boolean = false;\n\n\t/**\n\t * Indica se o componente está desabilitado.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) disabled: boolean = false;\n\n\t/**\n\t * Data mínima permitida para seleção.\n\t * @type {Date | string}\n\t */\n\t@Input() minDate: Date | string;\n\n\t/**\n\t * Data máxima permitida para seleção.\n\t * @type {Date | string}\n\t */\n\t@Input() maxDate: Date | string;\n\n\t/**\n\t * Placeholder do campo de entrada.\n\t * @type {string}\n\t */\n\t@Input() placeholder: string = '';\n\n\t/**\n\t * Dica de uso para o campo de entrada.\n\t * @type {string}\n\t */\n\t@Input() hint: string = '';\n\n\t/**\n\t * Obtém o tipo de seletor de data/hora.\n\t * @type {string}\n\t */\n\tget type(): string {\n\t\treturn TYPE_DATE_PICKER[this._type];\n\t}\n\n\t/**\n\t * Define o tipo de seletor de data/hora.\n\t * @type {TypesDatePicker}\n\t */\n\t@Input()\n\tset type(value: TypesDatePicker) {\n\t\tthis._type = value;\n\t}\n\n\t/**\n\t * Tipo de seletor de data/hora.\n\t * @type {TypesDatePicker}\n\t * @default 'date'\n\t * @private\n\t */\n\tprivate _type: TypesDatePicker = 'date';\n\n\t/**\n\t * Obtém se o campo de entrada é obrigatório.\n\t * @type {boolean}\n\t */\n\tget required(): boolean {\n\t\treturn this._required ?? this.control?.hasValidator(Validators.required) ?? false;\n\t}\n\n\t/**\n\t * Define se o campo de entrada é obrigatório.\n\t * @type {boolean}\n\t */\n\t@Input({ transform: booleanAttribute })\n\tset required(value: boolean) {\n\t\tthis._required = value;\n\t}\n\n\t/**\n\t * Valor do campo de entrada.\n\t * @type {string}\n\t * @protected\n\t */\n\tprotected _value: string;\n\n\t/**\n\t * Obtém o valor do campo de entrada.\n\t * @type {string}\n\t */\n\tget value(): string {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Define o valor do campo de entrada.\n\t * @type {string}\n\t */\n\tset value(val: string) {\n\t\tif (this.disabled) return;\n\t\tthis._value = val;\n\t\tthis._change(val);\n\t}\n\n\t/** Controle abstrato do Angular Forms. */\n\tpublic control?: AbstractControl;\n\n\tprotected _required: boolean | undefined;\n\n\tprotected _touched: () => void = () => void undefined;\n\n\tprotected _change: (value: string) => void = () => void undefined;\n\n\tprotected readonly TypeDatePicker = TYPE_DATE_PICKER;\n\tinstance: unknown;\n\n\tprivate brDatePicker = inject(ElementRef);\n\n\tconstructor() {}\n\n\t/**\n\t * Método do ciclo de vida do Angular chamado após a visualização ser inicializada.\n\t * Inicializa a instância do componente BRDateTimePicker.\n\t * @internal\n\t */\n\tngAfterViewInit(): void {\n\t\tlet dates = {};\n\t\tif (this.maxDate) {\n\t\t\tdates = {\n\t\t\t\tmaxDate: this.normalizeDate(this.maxDate),\n\t\t\t};\n\t\t}\n\t\tif (this.minDate) {\n\t\t\tdates = {\n\t\t\t\t...dates,\n\t\t\t\tminDate: this.normalizeDate(this.minDate),\n\t\t\t};\n\t\t}\n\t\tthis.instance = new BRDateTimePicker(\n\t\t\t'br-datetimepicker',\n\t\t\tthis.brDatePicker.nativeElement.querySelector('.br-datetimepicker'),\n\t\t\t{\n\t\t\t\t...dates,\n\t\t\t}\n\t\t);\n\t}\n\n\t/**\n\t * Normaliza a data para o formato 'DD/MM/YYYY'.\n\t * @param date - A data a ser normalizada.\n\t * @returns A data normalizada no formato 'DD/MM/YYYY'.\n\t * @internal\n\t */\n\tnormalizeDate(date: string | Date): string {\n\t\tif (date instanceof Date) {\n\t\t\tconst day = String(date.getDate()).padStart(2, '0');\n\t\t\tconst month = String(date.getMonth() + 1).padStart(2, '0');\n\t\t\tconst year = date.getFullYear();\n\t\t\treturn `${day}/${month}/${year}`;\n\t\t}\n\t\tif (!date) return date;\n\t\tconst [day, month, year] = date.split('/');\n\t\tconst parsedDate = new Date(`${year}-${month}-${day}`);\n\t\tconst formattedDay = String(parsedDate.getDate()).padStart(2, '0');\n\t\tconst formattedMonth = String(parsedDate.getMonth() + 1).padStart(2, '0');\n\t\tconst formattedYear = parsedDate.getFullYear();\n\t\treturn `${formattedDay}/${formattedMonth}/${formattedYear}`;\n\t}\n\n\t/**\n\t * @internal\n\t */\n\tngOnInit(): void {\n\t\tthis.mountPlaceholder();\n\t}\n\n\t/**\n\t * Configura o placeholder do campo de entrada com base no tipo e se é um intervalo.\n\t * @internal\n\t */\n\tmountPlaceholder() {\n\t\tif (this.placeholder) return;\n\n\t\tif (this.range) {\n\t\t\tthis.placeholder =\n\t\t\t\tthis.type === TYPE_DATE_PICKER.date_time\n\t\t\t\t\t? 'exemplo: 02/02/2024 02:02 até 03/02/2025 02:02'\n\t\t\t\t\t: 'exemplo: 02/02/2024 até 03/02/2025';\n\t\t} else if (this.type === TYPE_DATE_PICKER.date) {\n\t\t\tthis.placeholder = 'exemplo: 02/02/2024';\n\t\t} else if (this.type === TYPE_DATE_PICKER.time) {\n\t\t\tthis.placeholder = 'exemplo: 02:40';\n\t\t} else {\n\t\t\tthis.placeholder = 'exemplo: 02/02/2024 02:02';\n\t\t}\n\t}\n\n\twriteValue(value: string): void {\n\t\tthis.value = this.normalizeDate(value);\n\t}\n\n\tsetDisabledState(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t}\n\n\tregisterOnChange(fn: (value: string) => void): void {\n\t\tthis._change = fn;\n\t}\n\n\tregisterOnTouched(fn: () => void): void {\n\t\tthis._touched = fn;\n\t}\n\n\tonBlur(): void {\n\t\tthis._touched();\n\t}\n}\n","<div class=\"br-datetimepicker\" [attr.data-mode]=\"range ? 'range' : 'single'\" [attr.data-type]=\"type\">\n\t<label for=\"timepicker-{{ id }}\">{{ label }}</label>\n\t<div class=\"br-input has-icon\" [class.disabled]=\"disabled\">\n\t\t<input\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\tid=\"timepicker-{{ id }}\"\n\t\t\ttype=\"time\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\tdata-input=\"data-input\"\n\t\t/>\n\t\t<button\n\t\t\tclass=\"br-button circle small\"\n\t\t\ttype=\"button\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-label=\"Abrir Datepicker\"\n\t\t\tdata-toggle=\"data-toggle\"\n\t\t\tid=\"timepicker-{{ id }}-btn\"\n\t\t\ttabindex=\"-1\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<i\n\t\t\t\tclass=\"fas\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'fa-clock': type === TypeDatePicker.time,\n\t\t\t\t\t'fa-calendar-alt': type !== TypeDatePicker.time,\n\t\t\t\t}\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t></i>\n\t\t</button>\n\t</div>\n\t@if (disabled) {\n\t\t<span class=\"feedback warning\" role=\"alert\"\n\t\t\t><i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>Campo desabilitado</span\n\t\t>\n\t} @else {\n\t\t@if (hint) {\n\t\t\t<span class=\"feedback warning\" role=\"alert\"\n\t\t\t\t><i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>{{ hint }}</span\n\t\t\t>\n\t\t}\n\n\t\t<ng-content></ng-content>\n\t}\n</div>\n","import { booleanAttribute, Directive, ElementRef, inject, Input, OnInit, Renderer2 } from '@angular/core';\r\nimport { SizeOptions } from '../../types/size.type';\r\n\r\n/**\r\n * Diretiva para estilizar botões com várias opções.\r\n *\r\n * @selector button[br-button], a[br-button]\r\n * @standalone true\r\n */\r\n@Directive({\r\n\tselector: 'button[br-button], a[br-button]',\r\n\thost: {\r\n\t\t'[class.primary]': 'color === \"primary\"',\r\n\t\t'[class.secondary]': 'color === \"secondary\"',\r\n\t\t'[class.tertiary]': 'color === \"tertiary\"',\r\n\t\t'[class.small]': 'size === \"small\"',\r\n\t\t'[class.medium]': 'size === \"medium\"',\r\n\t\t'[class.large]': 'size === \"large\"',\r\n\t\t'[class.disabled]': 'disabled',\r\n\t\t'[class.block]': 'block',\r\n\t\t'[class.loading]': 'loading',\r\n\t\t'[class.active]': 'active',\r\n\t\t'[class.circle]': 'circle',\r\n\t\t'[class.dark-mode]': 'inverted',\r\n\t\t'[disabled]': 'disabled',\r\n\t\t'[class.br-button]': 'true',\r\n\t\trole: 'button',\r\n\t},\r\n\tinputs: ['color', 'size', 'disabled', 'block', 'loading', 'active', 'circle', 'inverted'],\r\n\tstandalone: true,\r\n})\r\nexport class ButtonDirective implements OnInit {\r\n\t/**\r\n\t * Cor do botão.\r\n\t * @type {'primary' | 'secondary' | 'tertiary'}\r\n\t * @default 'primary'\r\n\t */\r\n\t@Input() color: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n\t/**\r\n\t * Tamanho do botão.\r\n\t * @type {SizeOptions}\r\n\t * @default 'medium'\r\n\t */\r\n\t@Input() size: SizeOptions = 'medium';\r\n\r\n\t/**\r\n\t * Classe do ícone para o botão.\r\n\t * @type {string}\r\n\t */\r\n\t@Input() icon: string = '';\r\n\r\n\t/**\r\n\t * Conjunto de fontes para o ícone.\r\n\t * @type {string}\r\n\t * @default 'fas'\r\n\t */\r\n\t@Input() fontSet: string = 'fas';\r\n\r\n\t/**\r\n\t * Posição do ícone em relação ao texto do botão.\r\n\t * @type {'before' | 'after'}\r\n\t * @default 'before'\r\n\t */\r\n\t@Input() positionIcon: 'before' | 'after' = 'before';\r\n\r\n\t/**\r\n\t * Indica se o botão está desabilitado.\r\n\t * @type {boolean}\r\n\t * @default false\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) disabled: boolean = false;\r\n\r\n\t/**\r\n\t * Indica se o botão deve ser exibido como um elemento de bloco.\r\n\t * @type {boolean}\r\n\t * @default false\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) block: boolean = false;\r\n\r\n\t/**\r\n\t * Indica se o botão está em estado de carregamento.\r\n\t * @type {boolean}\r\n\t * @default false\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) loading: boolean = false;\r\n\r\n\t/**\r\n\t * Indica se o botão está ativo.\r\n\t * @type {boolean}\r\n\t * @default false\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) active: boolean = false;\r\n\r\n\t/**\r\n\t * Indica se o botão deve ser exibido como um círculo.\r\n\t * @type {boolean}\r\n\t * @default false\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) circle: boolean = false;\r\n\r\n\t/**\r\n\t * Indica se o botão deve ser exibido no modo escuro.\r\n\t * @type {boolean}\r\n\t * @default false\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) inverted: boolean = false;\r\n\r\n\tpublic el = inject(ElementRef);\r\n\tpublic renderer = inject(Renderer2);\r\n\r\n\tconstructor() {}\r\n\r\n\tngOnInit(): void {\r\n\t\tthis.setIcon();\r\n\t}\r\n\r\n\tsetIcon(): void {\r\n\t\tif (!this.icon) return;\r\n\r\n\t\tconst icon = this.createIcon();\r\n\r\n\t\tif (this.positionIcon === 'after') {\r\n\t\t\tthis.renderer.appendChild(this.el.nativeElement, icon);\r\n\t\t} else {\r\n\t\t\tthis.renderer.insertBefore(this.el.nativeElement, icon, this.el.nativeElement.firstChild);\r\n\t\t}\r\n\t}\r\n\r\n\tcreateIcon(): HTMLElement {\r\n\t\tconst icon = this.renderer.createElement('i');\r\n\r\n\t\tthis.renderer.addClass(icon, this.fontSet);\r\n\t\tthis.renderer.addClass(icon, this.icon);\r\n\t\tthis.renderer.setAttribute(icon, 'aria-hidden', 'true');\r\n\t\treturn icon;\r\n\t}\r\n}\r\n","import {\r\n\tAfterViewInit,\r\n\tbooleanAttribute,\r\n\tDirective,\r\n\tElementRef,\r\n\tinject,\r\n\tInput,\r\n\tOnDestroy,\r\n\tRenderer2,\r\n} from '@angular/core';\r\nimport { getIconByStateUtils, StateType } from '../../utils';\r\n\r\n/**\r\n * Diretiva FeedbackDirective é responsável por exibir um feedback visual de estado.\r\n * @example\r\n * <span br-feedback state=\"success\">Mensagem de sucesso</span>\r\n * @public\r\n * {@link https://www.gov.br/ds/components/feedback?tab=desenvolvedor|Documentação oficial}\r\n */\r\n@Directive({\r\n\tselector: 'span[br-feedback]',\r\n\tstandalone: true,\r\n\thost: {\r\n\t\tclass: 'feedback',\r\n\t\trole: 'alert',\r\n\t},\r\n})\r\nexport class FeedbackDirective implements AfterViewInit, OnDestroy {\r\n\t/**\r\n\t * Define o estado do feedback visual.\r\n\t * @type {StateType}\r\n\t * @default ''\r\n\t */\r\n\t@Input() state: StateType = '';\r\n\t/**\r\n\t * Define se o estado deve ser propagado para o elemento pai.\r\n\t * @default false\r\n\t * @type {boolean}\r\n\t */\r\n\t@Input({ transform: booleanAttribute }) noPropagateState: boolean = false;\r\n\tnode!: HTMLDivElement;\r\n\tel = inject(ElementRef);\r\n\trenderer = inject(Renderer2);\r\n\r\n\tconstructor() {}\r\n\r\n\tngAfterViewInit(): void {\r\n\t\tthis.node = this.renderer.parentNode(this.el.nativeElement) as HTMLDivElement;\r\n\r\n\t\tif (this.state) {\r\n\t\t\tthis.setState();\r\n\t\t\tthis.setIcon();\r\n\t\t}\r\n\t}\r\n\r\n\tprivate setState(): void {\r\n\t\tif (!this.noPropagateState && this.node) this.node.classList.add(this.state);\r\n\t\tthis.renderer.addClass(this.el.nativeElement, this.state);\r\n\t}\r\n\r\n\tprivate setIcon(): void {\r\n\t\tconst icon = this.renderer.createElement('i');\r\n\r\n\t\tthis.renderer.addClass(icon, 'fas');\r\n\t\tthis.renderer.addClass(icon, getIconByStateUtils(this.state));\r\n\t\tthis.renderer.setAttribute(icon, 'aria-hidden', 'true');\r\n\r\n\t\tthis.renderer.insertBefore(this.el.nativeElement, icon, this.el.nativeElement.firstChild);\r\n\t}\r\n\r\n\tngOnDestroy(): void {\r\n\t\tif (this.node) {\r\n\t\t\tthis.node.classList.remove(this.state);\r\n\t\t}\r\n\t\tif (this.el.nativeElement) {\r\n\t\t\tthis.renderer.removeClass(this.el.nativeElement, this.state);\r\n\t\t}\r\n\t}\r\n}\r\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\r\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\r\nimport { ButtonDirective } from '../../directives';\r\n\r\nexport interface DialogConfirmInputs {\r\n\t/** Mensagem a ser exibida no diálogo */\r\n\tmessage?: string;\r\n\t/** Ícone a ser exibido no diálogo */\r\n\ticon?: string;\r\n\t/** Rótulo do botão de confirmação */\r\n\tbuttonConfirmLabel?: string;\r\n\t/** Indica se o botão de confirmação deve ser exibido */\r\n\tbuttonConfirmShow?: boolean;\r\n\t/** Rótulo do botão de cancelamento */\r\n\tbuttonCancelLabel?: string;\r\n\t/** Indica se o botão de cancelamento deve ser exibido */\r\n\tbuttonCancelShow?: boolean;\r\n}\r\n\r\n/**\r\n * Componente DialogConfirmComponent é responsável por exibir um diálogo de confirmação.\r\n * @example\r\n * private dialog = inject(Dialog);\r\n * const dialogRef = this.dialog.open(DialogConfirmComponent, { data: { message: 'Tem certeza que deseja continuar?' } });\r\n * dialogRef.afterClosed().pipe(takeUntil(this.destroy$)).subscribe(isConfirmed => {})\r\n */\r\n@Component({\r\n\tselector: 'app-dialog-confirm',\r\n\tstandalone: true,\r\n\timports: [ButtonDirective],\r\n\ttemplateUrl: './dialog-confirm.component.html',\r\n\tstyleUrl: './dialog-confirm.component.scss',\r\n\tencapsulation: ViewEncapsulation.None,\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class DialogConfirmComponent {\r\n\t/** Referência ao diálogo para controle de fechamento */\r\n\tdialogRef = inject<DialogRef<boolean>>(DialogRef<boolean>);\r\n\t/** Dados de entrada do diálogo */\r\n\tdata: DialogConfirmInputs = inject(DIALOG_DATA);\r\n\r\n\tconstructor() {\r\n\t\tthis.data = {\r\n\t\t\tmessage: this.data.message || 'Tem certeza que deseja continuar?',\r\n\t\t\ticon: this.data.icon || 'fa-exclamation-triangle',\r\n\t\t\tbuttonConfirmLabel: this.data.buttonConfirmLabel || 'Confirmar',\r\n\t\t\tbuttonConfirmShow: this.data.buttonConfirmShow || true,\r\n\t\t\tbuttonCancelLabel: this.data.buttonCancelLabel || 'Cancelar',\r\n\t\t\tbuttonCancelShow: this.data.buttonCancelShow || true,\r\n\t\t};\r\n\t}\r\n\r\n\t/**\r\n\t * Manipulador de evento para o botão de cancelamento.\r\n\t * Fecha o diálogo retornando `false`.\r\n\t * @example\r\n\t * this.onCancel();\r\n\t */\r\n\tonCancel() {\r\n\t\tthis.dialogRef.close(false);\r\n\t}\r\n\r\n\t/**\r\n\t * Manipulador de evento para o botão de confirmação.\r\n\t * Fecha o diálogo retornando `true`.\r\n\t * @example\r\n\t * this.onConfirm();\r\n\t */\r\n\tonConfirm() {\r\n\t\tthis.dialogRef.close(true);\r\n\t}\r\n}\r\n","<section class=\"dialog-confirm\">\n\t@if (data.icon) {\n\t\t<div class=\"icon\">\n\t\t\t<i class=\"fas {{ data.icon }}\"></i>\n\t\t</div>\n\t}\n\n\t<div class=\"content\">\n\t\t<p>{{ data.message }}</p>\n\t</div>\n\n\t<div class=\"actions\">\n\t\t@if (data.buttonCancelShow) {\n\t\t\t<button br-button color=\"secondary\" (click)=\"onCancel()\">{{ data.buttonCancelLabel }}</button>\n\t\t}\n\t\t@if (data.buttonConfirmShow) {\n\t\t\t<button br-button color=\"primary\" (click)=\"onConfirm()\">{{ data.buttonConfirmLabel }}</button>\n\t\t}\n\t</div>\n</section>\n","import {\n\tAfterViewInit,\n\tbooleanAttribute,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tforwardRef,\n\tinject,\n\tInput,\n\tOutput,\n} from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { AbstractControl, ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';\nimport BRInput from '@govbr-ds/core/dist/components/input/input';\nimport { SizeOptions } from '../../types/size.type';\n\n/**\n * Componente InputComponent é responsável por exibir um campo de entrada com várias opções de configuração.\n * Implementa a interface ControlValueAccessor para integração com formulários Angular.\n * @example\n * <app-input [label]=\"'Nome'\" [id]=\"'input1'\" [(ngModel)]=\"name\"></app-input>\n *\n * @public\n * {@link https://www.gov.br/ds/components/input?tab=desenvolvedor|Documentação oficial}\n */\n@Component({\n\tselector: 'app-input',\n\tstandalone: true,\n\timports: [NgClass, NgTemplateOutlet, FormsModule],\n\ttemplateUrl: './input.component.html',\n\tstyleUrl: './input.component.scss',\n\tproviders: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputComponent), multi: true }],\n})\nexport class InputComponent implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Rótulo do campo de entrada.\n\t * @type {string}\n\t * @required\n\t */\n\t@Input({ required: true }) label: string = '';\n\n\t/**\n\t * ID do campo de entrada.\n\t * @type {string}\n\t * @required\n\t */\n\t@Input({ required: true }) id: string;\n\n\t/**\n\t * Nome do campo de entrada.\n\t * @type {string}\n\t */\n\t@Input() name: string = '';\n\n\t/**\n\t * Tamanho do campo de entrada.\n\t * @type {SizeOptions}\n\t * @default 'medium'\n\t */\n\t@Input() size: SizeOptions = 'medium';\n\n\t/**\n\t * Tipo do campo de entrada.\n\t * @type {'text' | 'password' | 'email' | 'number'}\n\t * @default 'text'\n\t */\n\t@Input() type: 'text' | 'password' | 'email' | 'number' = 'text';\n\n\t/**\n\t * Estado do campo de entrada.\n\t * @type {'success' | 'danger' | 'info' | 'warning' | ''}\n\t * @default ''\n\t */\n\t@Input() state: 'success' | 'danger' | 'info' | 'warning' | '' = '';\n\n\t/**\n\t * Placeholder do campo de entrada.\n\t * @type {string}\n\t */\n\t@Input() placeholder: string = '';\n\n\t/**\n\t * Dica de uso para o campo de entrada.\n\t * @type {string}\n\t */\n\t@Input() hint: string = '';\n\n\t/**\n\t * Autocomplete do campo de entrada.\n\t * @type {string}\n\t * @default 'off'\n\t */\n\t@Input() autocomplete: string = 'off';\n\n\t/**\n\t * Feedback do campo de entrada.\n\t * @type {string}\n\t */\n\t@Input() feedback: string = '';\n\n\t/**\n\t * Indica se o campo de entrada possui botão.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) hasButton: boolean = false;\n\n\t/**\n\t * Indica se o campo de entrada deve ser destacado.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) highlight: boolean = false;\n\n\t/**\n\t * Indica se o campo de entrada é somente leitura.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) readonly: boolean = false;\n\n\t/**\n\t * Indica se o campo de entrada está desabilitado.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) disabled: boolean = false;\n\n\t/**\n\t * Indica se o campo de entrada possui ícone.\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@Input({ transform: booleanAttribute }) hasIcon: boolean = false;\n\n\t/**\n\t * Ícone do campo de entrada.\n\t * @type {string}\n\t * @default 'fas fa-search'\n\t */\n\t@Input() icon: string = 'fas fa-search';\n\n\t/**\n\t * Comprimento máximo do campo de entrada.\n\t * @type {number}\n\t */\n\t@Input() maxLength: number;\n\n\t/**\n\t * Valor mínimo do campo de entrada.\n\t * @type {number | string}\n\t */\n\t@Input() min: number | string;\n\n\t/**\n\t * Valor máximo do campo de entrada.\n\t * @type {number | string}\n\t */\n\t@Input() max: number | string;\n\n\t/**\n\t * Padrão do campo de entrada.\n\t * @type {string}\n\t */\n\t@Input() pattern: string;\n\n\t/**\n\t * Passo do campo de entrada.\n\t * @type {number}\n\t */\n\t@Input() step: number;\n\n\t/**\n\t * Obtém se o campo de entrada é obrigatório.\n\t * @type {boolean}\n\t */\n\tget required(): boolean {\n\t\treturn this._required ?? this.control?.hasValidator(Validators.required) ?? false;\n\t}\n\n\t/**\n\t * Define se o campo de entrada é obrigatório.\n\t * @type {boolean}\n\t */\n\t@Input({ transform: booleanAttribute })\n\tset required(value: boolean) {\n\t\tthis._required = value;\n\t}\n\n\tprotected _required: boolean | undefined;\n\n\t/**\n\t * Evento emitido quando o valor do campo de entrada muda.\n\t * @type {EventEmitter<string>}\n\t */\n\t@Output() change: EventEmitter<string> = new EventEmitter<string>();\n\n\t/**\n\t * Evento emitido quando o botão do campo de entrada é clicado.\n\t * @type {EventEmitter<void>}\n\t */\n\t@Output() clickButton: EventEmitter<void> = new EventEmitter<void>();\n\n\t/**\n\t * Controle do formulário associado ao campo de entrada.\n\t * @type {AbstractControl}\n\t */\n\tpublic control?: AbstractControl;\n\n\tprotected _value: string;\n\n\t/**\n\t * Obtém o valor do campo de entrada.\n\t * @type {string}\n\t */\n\tget value(): string {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Define o valor do campo de entrada.\n\t * @type {string}\n\t */\n\tset value(val: string) {\n\t\tif (this.disabled) return;\n\t\tthis._value = val;\n\t\tthis._change(val);\n\t}\n\tprotected _touched: () => void = () => void undefined;\n\n\tprotected _change: (value: string) => void = () => void undefined;\n\n\tinstance: unknown;\n\tprivate brInput = inject(ElementRef);\n\n\tconstructor() {}\n\n\t/**\n\t * Método do ciclo de vida do Angular chamado após a visualização ser inicializada.\n\t * Inicializa a instância do componente BRInput.\n\t * @internal\n\t */\n\tngAfterViewInit(): void {\n\t\tthis.instance = new BRInput('br-input', this.brInput.nativeElement.querySelector('.br-input'));\n\t}\n\n\twriteValue(value: string): void {\n\t\tthis.value = value;\n\t}\n\n\tsetDisabledState(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t}\n\n\tregisterOnChange(fn: (value: string) => void): void {\n\t\tthis._change = fn;\n\t}\n\n\tregisterOnTouched(fn: () => void): void {\n\t\tthis._touched = fn;\n\t}\n\n\tonBlur(): void {\n\t\tthis._touched();\n\t}\n\n\t/**\n\t * Manipulador de evento para mudança no valor do campo de entrada.\n\t * @param event - O evento de mudança.\n\t * @internal\n\t */\n\tonChangeInput(event: Event) {\n\t\tif (!this.disabled && (event.target as HTMLInputElement).value) {\n\t\t\tthis.change.emit(this.value);\n\t\t}\n\t}\n\n\t/**\n\t * Manipulador de evento para clique no botão do campo de entrada.\n\t * @param event - O evento de clique.\n\t * @internal\n\t */\n\tonClickButton(event: MouseEvent) {\n\t\tevent.stopPropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.clickButton.emit();\n\t\t}\n\t}\n}\n","<div class=\"br-input\" [ngClass]=\"[size, hasButton ? 'input-button' : '', state, highlight ? 'input-highlight' : '']\">\n <label for=\"input-{{ id }}\">\n {{ label }}\n </label>\n @if (hasIcon) {\n <div class=\"input-group\">\n <div class=\"input-icon\"><i [class]=\"icon\" aria-hidden=\"true\"></i></div>\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n @if (hasButton) {\n <button [disabled]=\"disabled\" (click)=\"onClickButton($event)\" class=\"br-button\" type=\"button\" aria-label=\"Botão\">\n <i [class]=\"icon\" aria-hidden=\"true\"></i>\n </button>\n }\n }\n <ng-template #input>\n <input\n id=\"input-{{ id }}\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [readonly]=\"readonly\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.maxLength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n [attr.placeholder]=\"placeholder\"\n [attr.step]=\"step\"\n [attr.required]=\"required\"\n [(ngModel)]=\"value\"\n (change)=\"onChangeInput($event)\"\n (blur)=\"onBlur()\"\n />\n </ng-template>\n @if (disabled) {\n <span class=\"feedback warning\" role=\"alert\">\n\t\t\t<i class=\"fas fa-exclamation-triangle\"