ngx-opalbytes-components 1.27.0 → 1.29.0

package/README.md

@@ -232,12 +232,15 @@ src/
 └── lib/
     └── shared/
         └── components/
-        |   ├── autocomplete/
+        |   ├── accordion/
+        |   ├── accordion-item/
+        |   ├── avatar/
         |   ├── base-button/
         |   ├── base-icon/
         |   ├── base-input/
         |   ├── base-time-range/
         |   ├── base-toggle/
+        |   ├── breadcrumb/
         |   ├── checkbox/
         |   ├── drop-down/
         |   ├── footer/
@@ -931,6 +934,363 @@ Um componente de alternância (toggle switch) que funciona com `ngModel` ou `for
 
 ---
 
+### `CaoBreadcrumbComponent`
+ 
+Trilha de navegação (breadcrumb) com ícones Lucide ou imagem, link de navegação, badge e divisor customizável.
+ 
+**Seletor:** `<cao-breadcrumb>`
+ 
+**Interface `ICaoBreadcrumbItem`**
+ 
+| Propriedade | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `label` | `string` | — | Texto do item. |
+| `icon` | `string` | — | Nome do ícone Lucide ou URL/caminho/data URI de imagem. |
+| `isLucideIcon` | `boolean` | `true` | Define se `icon` é Lucide. |
+| `iconPosition` | `'left' \| 'right'` | `'left'` | Direção do ícone em relação ao texto. |
+| `iconColor` / `iconSize` / `iconStrokeWidth` | `string` / `number` / `number` | — / `16` / `1.5` | Aparência do ícone. |
+| `link` | `string \| unknown[]` | — | Navegação interna (`routerLink`). |
+| `queryParams` | `Params` | — | Query params do `link`. |
+| `href` / `target` | `string` / `'_self' \| '_blank' ...` | — | Navegação externa. |
+| `command` | `(e: ICaoBreadcrumbItemClickEvent) => void` | — | Callback de clique (sem `link`/`href` vira `<button>`). |
+| `badge` / `badgeColor` / `badgeBgColor` | `string \| number` / `string` / `string` | — | Badge do item. |
+| `disabled` | `boolean` | `false` | Desabilita o item. |
+| `ariaLabel` / `dataCy` | `string` | — | Acessibilidade e testes E2E. |
+ 
+**Atributos (Inputs)**
+ 
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `items` | `ICaoBreadcrumbItem[]` | `[]` | Itens; o último é a página atual (`aria-current="page"`). |
+| `home` | `ICaoBreadcrumbItem` | `undefined` | Item inicial opcional. |
+| `separator` | `string` | `'/'` | Texto do divisor. |
+| `separatorIcon` | `string` | `''` | Ícone do divisor (sobrepõe `separator`). |
+| `isLucideSeparatorIcon` | `boolean` | `true` | Define se `separatorIcon` é Lucide. |
+| `separatorIconSize` / `separatorIconStrokeWidth` | `number` | `14` / `1.5` | Aparência do ícone divisor. |
+| `linkColor`, `linkHoverColor`, `currentColor`, `separatorColor`, `fontSize`, `gap` | `string` | `''` | Atalhos para as CSS custom properties. |
+| `ariaLabel` | `string` | `'Breadcrumb'` | `aria-label` do `<nav>`. |
+| `dataCy` | `string` | `''` | Atributo para testes E2E. |
+ 
+**Eventos (Outputs):** `itemClick` → `ICaoBreadcrumbItemClickEvent` (`item`, `index`, `originalEvent`).
+ 
+**CSS Custom Properties:** `--cao-breadcrumb-link-color` (`#6b7280`), `--cao-breadcrumb-link-hover-color` (`#4f46e5`), `--cao-breadcrumb-current-color` (`#111827`), `--cao-breadcrumb-separator-color` (`#9ca3af`), `--cao-breadcrumb-disabled-color`, `--cao-breadcrumb-focus-ring`, `--cao-breadcrumb-badge-bg`, `--cao-breadcrumb-badge-text`, `--cao-breadcrumb-gap` (`8px`), `--cao-breadcrumb-font-size` (`0.875rem`).
+ 
+```html
+<cao-breadcrumb
+  [home]="{ icon: 'house', ariaLabel: 'Início', link: '/' }"
+  [items]="[
+    { label: 'Pedidos', icon: 'package', iconPosition: 'right', link: '/pedidos', badge: 12 },
+    { label: 'Pedido #42' }
+  ]"
+  separatorIcon="chevron-right" />
+```
+ 
+> Depende de `BaseIcon` (copie junto ao usar `cao-comp`) e de `@angular/router`.
+
+---
+### `CaoAccordionComponent` e `CaoAccordionItemComponent`
+
+Um accordion (painéis expansíveis) acessível e totalmente customizável, inspirado na API do `CdkAccordion`, mas **sem depender do `@angular/cdk`, do Angular Material ou de qualquer outra biblioteca externa** — usa apenas `@angular/core` e `@angular/common`. Cores, posições, textos e visibilidade são configuráveis por inputs ou por CSS custom properties. A animação de abrir/fechar é feita só com CSS e respeita `prefers-reduced-motion`.
+
+**Seletores:**
+- `<cao-accordion>` — container (controla modo único/múltiplo e o tema herdado pelos itens)
+- `<cao-accordion-item>` — painel individual (também pode ser usado isolado, como um cartão expansível)
+
+#### Atributos do `CaoAccordionComponent` (Inputs)
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `multi` | `boolean` | `false` | Permite vários itens expandidos ao mesmo tempo. No modo único, expandir um item recolhe os demais. |
+| `displayMode` | `'default' \| 'flat' \| 'separated'` | `'default'` | `default`: painéis unidos em um único contorno arredondado; `flat`: unidos, sem bordas laterais/cantos; `separated`: cada painel é um cartão separado por `gap`. |
+| `hideToggle` | `boolean` | `false` | Oculta o ícone de expandir/recolher em todos os itens. |
+| `isVisible` | `boolean` | `true` | Exibe ou oculta o accordion inteiro. |
+| `togglePosition` | `'before' \| 'after'` | `'after'` | Posição do ícone em relação ao texto do cabeçalho. |
+| `headerAlign` | `'start' \| 'center' \| 'end'` | `'start'` | Alinhamento do texto do cabeçalho. |
+| `contentAlign` | `'start' \| 'center' \| 'end'` | `'start'` | Alinhamento do texto do conteúdo. |
+| `headerBgColor` | `string` | `#ffffff` | Cor de fundo do cabeçalho. |
+| `headerTextColor` | `string` | `#111827` | Cor do texto do cabeçalho. |
+| `headerHoverBgColor` | `string` | `#f3f4f6` | Cor de fundo do cabeçalho ao passar o mouse. |
+| `headerActiveBgColor` | `string` | cor do cabeçalho | Cor de fundo do cabeçalho do item expandido. |
+| `activeColor` | `string` | `#4f46e5` | Cor do texto/ícone do cabeçalho do item expandido. |
+| `contentBgColor` | `string` | `#ffffff` | Cor de fundo do conteúdo. |
+| `contentTextColor` | `string` | `#374151` | Cor do texto do conteúdo. |
+| `borderColor` | `string` | `#e5e7eb` | Cor das bordas e divisórias. |
+| `disabledColor` | `string` | `#9ca3af` | Cor do texto de itens desabilitados. |
+| `focusRingColor` | `string` | `rgba(79, 70, 229, 0.35)` | Cor do anel de foco do teclado. |
+| `iconColor` | `string` | `currentColor` | Cor do ícone de expandir/recolher. |
+| `borderRadius` | `string` | `8px` | Raio da borda. |
+| `gap` | `string` | `8px` | Espaçamento entre os itens (modo `separated`). |
+| `headerPadding` | `string` | `12px 16px` | Padding do cabeçalho. |
+| `contentPadding` | `string` | `16px` | Padding do conteúdo. |
+| `animationDuration` | `string` | `250ms` | Duração da animação. |
+| `dataCy` | `string` | `''` | Atributo `data-cy` para testes E2E. |
+
+#### Métodos do `CaoAccordionComponent`
+
+| Método | Descrição |
+| --- | --- |
+| `openAll()` | Expande todos os itens. Só tem efeito quando `multi` está ativo. |
+| `closeAll()` | Recolhe todos os itens. |
+
+#### Atributos do `CaoAccordionItemComponent` (Inputs)
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `label` | `string` | `''` | Texto do cabeçalho. |
+| `description` | `string` | `''` | Texto secundário exibido abaixo do `label`. |
+| `expanded` | `boolean` | `false` | Estado de expansão. Suporta two-way binding: `[(expanded)]`. |
+| `isDisabled` | `boolean` | `false` | Desabilita a interação do usuário com o item. |
+| `isVisible` | `boolean` | `true` | Exibe ou oculta o item. |
+| `headingLevel` | `number` | `3` | Nível do heading (`aria-level`) do cabeçalho. |
+| `hideToggle` | `boolean` | herda do accordion | Oculta o ícone neste item. |
+| `togglePosition` | `'before' \| 'after'` | herda do accordion | Posição do ícone neste item. |
+| `headerAlign` | `'start' \| 'center' \| 'end'` | herda do accordion | Alinhamento do cabeçalho neste item. |
+| `headerBgColor` | `string` | herda do accordion | Cor de fundo do cabeçalho deste item. |
+| `headerTextColor` | `string` | herda do accordion | Cor do texto do cabeçalho deste item. |
+| `headerActiveBgColor` | `string` | herda do accordion | Cor de fundo do cabeçalho quando expandido. |
+| `activeColor` | `string` | herda do accordion | Cor do texto/ícone quando expandido. |
+| `contentBgColor` | `string` | herda do accordion | Cor de fundo do conteúdo. |
+| `contentTextColor` | `string` | herda do accordion | Cor do texto do conteúdo. |
+| `borderColor` | `string` | herda do accordion | Cor das bordas. |
+| `iconColor` | `string` | herda do accordion | Cor do ícone. |
+| `dataCy` | `string` | `''` | Atributo `data-cy` para testes E2E (veja abaixo). |
+
+#### Eventos do `CaoAccordionItemComponent` (Outputs)
+
+| Evento | Tipo | Descrição |
+| --- | --- | --- |
+| `opened` | `output<void>` | Emitido quando o item é expandido. |
+| `closed` | `output<void>` | Emitido quando o item é recolhido. |
+| `expandedChange` | `output<boolean>` | Emitido a cada mudança de estado (usado pelo `[(expanded)]`). |
+
+#### Métodos do `CaoAccordionItemComponent`
+
+| Método | Descrição |
+| --- | --- |
+| `toggle()` | Alterna o estado (ignorado se o item estiver desabilitado). |
+| `open()` | Expande o item. |
+| `close()` | Recolhe o item. |
+
+#### Projeção de conteúdo
+
+| Recurso | Descrição |
+| --- | --- |
+| Slot padrão (`<ng-content />`) | Conteúdo do painel. |
+| `[caoAccordionHeader]` | Conteúdo extra projetado no cabeçalho, abaixo do `label`/`description` (ex.: badges, status). |
+
+#### `data-cy` para testes E2E
+
+Ao informar `dataCy="faq"` em um item, são gerados automaticamente os seletores:
+
+| Elemento | Atributo |
+| --- | --- |
+| Item (host) | `data-cy="faq"` |
+| Botão do cabeçalho | `data-cy="faq-header"` |
+| Painel de conteúdo | `data-cy="faq-content"` |
+
+```typescript
+cy.get('[data-cy="faq-header"]').click();
+cy.get('[data-cy="faq-content"]').should('be.visible');
+```
+
+#### CSS Custom Properties
+
+Podem ser definidas globalmente, por accordion ou por item (têm precedência sobre os valores padrão, e os inputs equivalentes as definem automaticamente).
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--cao-accordion-header-bg` | `#ffffff` | Fundo do cabeçalho. |
+| `--cao-accordion-header-text` | `#111827` | Texto do cabeçalho. |
+| `--cao-accordion-header-hover-bg` | `#f3f4f6` | Fundo do cabeçalho no hover. |
+| `--cao-accordion-header-active-bg` | `var(--cao-accordion-header-bg)` | Fundo do cabeçalho expandido. |
+| `--cao-accordion-active-color` | `#4f46e5` | Texto/ícone do cabeçalho expandido. |
+| `--cao-accordion-content-bg` | `#ffffff` | Fundo do conteúdo. |
+| `--cao-accordion-content-text` | `#374151` | Texto do conteúdo. |
+| `--cao-accordion-border-color` | `#e5e7eb` | Bordas e divisórias. |
+| `--cao-accordion-disabled-color` | `#9ca3af` | Texto desabilitado. |
+| `--cao-accordion-focus-ring` | `rgba(79, 70, 229, 0.35)` | Anel de foco. |
+| `--cao-accordion-icon-color` | `currentColor` | Cor do ícone. |
+| `--cao-accordion-radius` | `8px` | Raio da borda. |
+| `--cao-accordion-gap` | `8px` | Espaço entre itens (`separated`). |
+| `--cao-accordion-header-padding` | `12px 16px` | Padding do cabeçalho. |
+| `--cao-accordion-content-padding` | `16px` | Padding do conteúdo. |
+| `--cao-accordion-header-align` | `start` | Alinhamento do texto do cabeçalho. |
+| `--cao-accordion-content-align` | `start` | Alinhamento do texto do conteúdo. |
+| `--cao-accordion-duration` | `250ms` | Duração da animação. |
+
+**Exemplo básico:**
+
+```typescript
+import { Component } from '@angular/core';
+import { CaoAccordionComponent, CaoAccordionItemComponent } from 'ngx-opalbytes-components';
+
+@Component({
+  selector: 'app-faq',
+  imports: [CaoAccordionComponent, CaoAccordionItemComponent],
+  template: `
+    <cao-accordion dataCy="faq-accordion">
+      <cao-accordion-item label="Como funciona?" dataCy="faq-1" [expanded]="true">
+        Conteúdo da primeira pergunta.
+      </cao-accordion-item>
+      <cao-accordion-item label="Posso cancelar?" description="Sem multa" dataCy="faq-2">
+        Conteúdo da segunda pergunta.
+      </cao-accordion-item>
+    </cao-accordion>
+  `,
+})
+export class FaqComponent {}
+```
+
+**Exemplo com múltiplos itens abertos, cores, ícone antes do texto e controle externo:**
+
+```html
+<cao-accordion
+  #acc
+  [multi]="true"
+  displayMode="separated"
+  togglePosition="before"
+  headerAlign="center"
+  headerBgColor="#eef2ff"
+  headerTextColor="#312e81"
+  activeColor="#16a34a"
+  contentBgColor="#ffffff"
+  borderColor="#c7d2fe"
+  borderRadius="12px"
+  animationDuration="400ms"
+  dataCy="meu-accordion">
+
+  <cao-accordion-item label="Dados pessoais" [(expanded)]="dadosAbertos" (opened)="onAbriu()" (closed)="onFechou()">
+    ...
+  </cao-accordion-item>
+
+  <cao-accordion-item label="Pagamento" [isDisabled]="semPermissao" headerBgColor="#fef3c7">
+    <span caoAccordionHeader>Pendente</span>
+    ...
+  </cao-accordion-item>
+
+  <cao-accordion-item label="Somente admin" [isVisible]="ehAdmin" [hideToggle]="true">
+    ...
+  </cao-accordion-item>
+</cao-accordion>
+
+<cao-button buttonText="Abrir todos" (buttonClick)="acc.openAll()"></cao-button>
+<cao-button buttonText="Fechar todos" (buttonClick)="acc.closeAll()"></cao-button>
+```
+
+**Observações:**
+
+- Sem dependências externas: não usa `@angular/cdk`, `@angular/material`, `@lucide/angular` nem `ngx-mask`; o ícone é um SVG inline.
+- Acessibilidade: o cabeçalho é um `<button>` dentro de um `role="heading"`, com `aria-expanded`, `aria-controls` e painel `role="region"` com `aria-labelledby`. Painéis recolhidos ficam fora da ordem de tabulação e do leitor de tela.
+- Teclado: `Enter`/`Espaço` alternam o item; `↑`/`↓` movem o foco entre cabeçalhos; `Home`/`End` vão ao primeiro/último.
+- Itens definidos como `isDisabled` bloqueiam apenas a interação do usuário; `open()`, `close()` e `[expanded]` continuam funcionando programaticamente.
+- Os inputs do `<cao-accordion-item>` sobrescrevem os do `<cao-accordion>` apenas naquele item.
+- Fora de um `<cao-accordion>`, o item se comporta como um cartão expansível independente.
+
+---
+### `CaoAvatarComponent`
+
+Avatar para representar usuários ou entidades, com imagem, ícone (Lucide ou imagem) ou texto (iniciais). Possui imagem padrão embutida, usada enquanto nenhuma fonte for informada ou quando a imagem falha ao carregar. Tamanho, formato e contorno (stroke) são configuráveis.
+
+**Seletor:** `<cao-avatar>`
+
+**Tipos**
+
+| Tipo | Valores |
+| --- | --- |
+| `CaoAvatarPresetSize` | `'small'` (24px) \| `'normal'` (32px) \| `'large'` (48px) \| `'xlarge'` (64px) |
+| `CaoAvatarShape` | `'circle'` \| `'rounded'` \| `'square'` |
+| `CaoAvatarStrokeStyle` | `'solid'` \| `'dashed'` \| `'dotted'` \| `'double'` |
+
+**Atributos (Inputs)**
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `src` | `string \| null \| undefined` | `''` | URL da imagem. Se vazia ou se falhar ao carregar, o avatar usa `icon`, `label` ou a imagem padrão (nessa ordem). |
+| `defaultSrc` | `string` | `''` | Imagem padrão customizada. Se vazia, usa a silhueta embutida (`CAO_AVATAR_DEFAULT_SRC`). |
+| `label` | `string` | `''` | Texto exibido (ex.: iniciais) quando não há imagem nem ícone. |
+| `icon` | `string` | `''` | Nome do ícone Lucide ou caminho/URL de imagem usada como ícone. |
+| `isLucideIcon` | `boolean` | `true` | Define se `icon` é um ícone Lucide. |
+| `iconColor` | `string` | `''` | Cor do ícone Lucide. Se vazia, usa `textColor`. |
+| `size` | `CaoAvatarPresetSize \| number \| string` | `'normal'` | Tamanho predefinido, número em px ou texto (`'72px'`, `'4.5rem'`). Valores inválidos voltam para `'normal'`. |
+| `shape` | `CaoAvatarShape` | `'circle'` | Formato do avatar. |
+| `strokeWidth` | `number \| string` | `0` | Espessura do contorno. Número é convertido para `px`; `0` remove o contorno. |
+| `strokeColor` | `string` | `'#ffffff'` | Cor do contorno. |
+| `strokeStyle` | `CaoAvatarStrokeStyle` | `'solid'` | Estilo do contorno. |
+| `bgColor` | `string` | `''` | Cor de fundo (sobrescreve `--cao-avatar-bg`). |
+| `textColor` | `string` | `''` | Cor do texto/ícone (sobrescreve `--cao-avatar-text`). |
+| `alt` | `string` | `''` | Texto alternativo do avatar. |
+| `ariaLabel` | `string` | `''` | `aria-label` do avatar. Prioridade: `ariaLabel` → `alt` → `label` → `'Avatar'`. |
+| `dataCy` | `string` | `''` | Atributo para testes E2E com Cypress. |
+
+**Ordem de exibição**
+
+1. `src` (se informado e carregado com sucesso);
+2. `icon`;
+3. `label`;
+4. imagem padrão (`defaultSrc` ou a silhueta embutida).
+
+Se o `src` falhar ao carregar (erro 404, URL inválida etc.), o componente passa automaticamente para o próximo item da lista.
+
+**Constantes exportadas**
+
+| Constante | Descrição |
+| --- | --- |
+| `CAO_AVATAR_DEFAULT_SRC` | Data URI da imagem padrão (silhueta em SVG, funciona offline). |
+| `CAO_AVATAR_SIZES` | Mapa dos tamanhos predefinidos em px (`small`, `normal`, `large`, `xlarge`). |
+
+**CSS Custom Properties**
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--cao-avatar-bg` | `#e5e7eb` | Cor de fundo. |
+| `--cao-avatar-text` | `#374151` | Cor do texto/ícone. |
+| `--cao-avatar-radius` | `25%` | Raio da borda no formato `rounded`. |
+
+**Exemplo básico:**
+
+```html
+<!-- Sem src: exibe a imagem padrão -->
+<cao-avatar></cao-avatar>
+
+<!-- Com imagem -->
+<cao-avatar src="https://exemplo.com/foto.png" alt="Foto de Maria" size="large"></cao-avatar>
+
+<!-- Com iniciais -->
+<cao-avatar label="MB" bgColor="#eef2ff" textColor="#4338ca"></cao-avatar>
+
+<!-- Com ícone Lucide -->
+<cao-avatar icon="user" bgColor="#dcfce7" iconColor="#166534"></cao-avatar>
+```
+
+**Exemplo com tamanho, formato e contorno:**
+
+```html
+<cao-avatar src="assets/foto.png" size="xlarge" shape="rounded"></cao-avatar>
+<cao-avatar src="assets/foto.png" [size]="96" shape="square"></cao-avatar>
+<cao-avatar src="assets/foto.png" size="7rem"></cao-avatar>
+
+<cao-avatar
+  src="assets/foto.png"
+  size="xlarge"
+  [strokeWidth]="3"
+  strokeColor="#4f46e5"
+  strokeStyle="dashed">
+</cao-avatar>
+```
+
+**Exemplo com imagem padrão customizada:**
+
+```html
+<cao-avatar [src]="usuario.foto" defaultSrc="assets/avatar-padrao.png"></cao-avatar>
+```
+
+**Observações:**
+
+- Possui `role="img"` com `aria-label`; a imagem interna é decorativa (`alt=""`), evitando leitura duplicada.
+- A imagem padrão é um SVG em data URI e passa por `DomSanitizer.bypassSecurityTrustUrl` (conteúdo controlado pela lib). Data URIs em SVG informadas em `src` **não** recebem esse tratamento e podem ser bloqueadas pelo sanitizador do Angular — use URL, caminho de arquivo ou PNG/JPEG em base64.
+- Para ícones Lucide, registre os ícones usados com `provideLucideIcons` (de `@lucide/angular`).
+- Depende de `BaseIcon` (copie junto ao usar `cao-comp`).
+---
 ### `CaoSlideToggleComponent`
 
 Um switch (slide toggle) acessível e customizável, com suporte a `ngModel` e formulários reativos via `ControlValueAccessor`. O visual é construído com trilho e thumb animados, sem depender do Material em runtime.

package/cli/cao-comp.cjs

@@ -185,7 +185,7 @@ import { fn } from 'storybook/test';
 import { CaoBaseButtonComponent } from '../../app/components/base-button/base-button.component';
 
 const meta: Meta<CaoBaseButtonComponent> = {
-  title: 'Components/Base Button',
+  title: 'Componentes/Base Button',
   component: CaoBaseButtonComponent,
   tags: ['autodocs'],
   args: { buttonClick: fn() },
@@ -327,18 +327,18 @@ function setupStorybook(destination, force) {
   if (conflicts.length) {
     process.stderr.write(
       `Erro: os seguintes arquivos ja existem no destino (use --force para sobrescrever):\n` +
-        conflicts.map((c) => `  - ${c}`).join('\n') +
-        '\n'
+      conflicts.map((c) => `  - ${c}`).join('\n') +
+      '\n'
     );
     return 1;
   }
 
   process.stdout.write(
     `Setup de Storybook gerado em "${root}".\n` +
-      `Arquivos criados:\n` +
-      created.map((c) => `  - ${c}`).join('\n') +
-      '\n' +
-      `Leia ${path.join(root, 'STORYBOOK-SETUP.md')} para instalar as dependencias e rodar.\n`
+    `Arquivos criados:\n` +
+    created.map((c) => `  - ${c}`).join('\n') +
+    '\n' +
+    `Leia ${path.join(root, 'STORYBOOK-SETUP.md')} para instalar as dependencias e rodar.\n`
   );
   return 0;
 }
@@ -429,7 +429,7 @@ function main() {
     const available = listComponents(templatesDir).join(', ');
     process.stderr.write(
       `Erro: componente "${component}" nao encontrado.\n` +
-        `Componentes disponiveis: ${available}\n`
+      `Componentes disponiveis: ${available}\n`
     );
     return 1;
   }
@@ -441,8 +441,8 @@ function main() {
   if (conflicts.length) {
     process.stderr.write(
       `Erro: os seguintes arquivos ja existem no destino (use --force para sobrescrever):\n` +
-        conflicts.map((c) => `  - ${c}`).join('\n') +
-        '\n'
+      conflicts.map((c) => `  - ${c}`).join('\n') +
+      '\n'
     );
     return 1;
   }