@dev-tcloud/tcloud-ui 6.23.1 → 6.24.0

package/docs/tcloud-ui-alert-banner.md

@@ -2,14 +2,14 @@
 
 ## Características
 
-O `TCloudUiAlertBannerComponent` é um componente Angular standalone que exibe banners de alerta com ícone, mensagem e link opcional. Suporta diferentes tipos visuais de alerta:
+O `TCloudUiAlertBannerComponent` é um componente Angular standalone para exibir mensagens de alerta com quatro variações visuais: `warning`, `danger`, `info` e `success`.
 
-- **warning**: fundo e borda em tons de alerta (amarelo/laranja).
-- **danger**: fundo e borda em tons de perigo (vermelho).
-- **info**: fundo e borda em tons informativos (azul).
-- **success**: fundo e borda em tons de sucesso (verde).
+O conteúdo do banner pode ser fornecido de duas formas:
 
-O banner possui uma borda lateral esquerda colorida com ícone de exclamação e suporta um link clicável dentro da mensagem, emitindo um evento ao ser clicado.
+- por texto simples, usando o input `message`;
+- por conteúdo HTML, usando o input `content`, renderizado via `innerHTML`.
+
+Quando `linkText` é informado, o componente renderiza uma ação clicável ao lado da mensagem e emite o evento `linkClicked`.
 
 ## Instalação
 
@@ -31,22 +31,23 @@ export class ExemploComponent {}
 
 ### Inputs
 
-| Nome      | Tipo                      | Descrição                                          | Valor Default |
-|-----------|---------------------------|----------------------------------------------------|---------------|
-| alertType | `'warning' \| 'danger'`   | Define o tipo visual do alerta (cor de fundo/borda).| `'warning'`   |
-| message   | `string`                  | Texto da mensagem exibida no banner.               | `''`          |
-| linkText  | `string`                  | Texto do link exibido após a mensagem.             | `''`          |
-| linkUrl   | `string`                  | URL do link (disponível para binding).             | `''`          |
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| alertType | `'warning' \| 'danger' \| 'info' \| 'success'` | Define a variação visual do banner. | `'warning'` |
+| message | `string \| undefined` | Texto simples exibido no banner. | `undefined` |
+| content | `any \| undefined` | Conteúdo HTML renderizado no corpo do banner via `innerHTML`. | `undefined` |
+| linkText | `string` | Texto da ação clicável exibida ao lado da mensagem. | `''` |
+| linkUrl | `string` | Valor auxiliar exposto como input. A implementação atual não aplica esse valor automaticamente ao link renderizado. | `''` |
 
 ### Outputs
 
-| Nome        | Tipo de Evento | Descrição                                  |
-|-------------|----------------|--------------------------------------------|
-| linkClicked | `void`         | Emitido quando o link do banner é clicado. |
+| Nome | Tipo de Evento | Descrição |
+|------|----------------|-----------|
+| linkClicked | `EventEmitter<void>` | Emitido quando a ação do banner é clicada. |
 
 ## Exemplos de Uso
 
-### Uso Básico — Alerta Warning com Link
+### Uso Básico
 
 ```html
 <tcloud-ui-alert-banner
@@ -57,29 +58,27 @@ export class ExemploComponent {}
 </tcloud-ui-alert-banner>
 ```
 
-### Uso Básico — Alerta Danger
+### Uso com Conteúdo HTML
 
 ```html
 <tcloud-ui-alert-banner
-  [alertType]="'danger'"
-  [message]="'Erro crítico detectado no sistema.'"
-  [linkText]="'Ver detalhes'"
+  [alertType]="'warning'"
+  [content]="alertContent"
+  [linkText]="'Saiba mais'"
   (linkClicked)="onLinkClicked()">
 </tcloud-ui-alert-banner>
 ```
 
-### Uso Sem Link
-
-```html
-<tcloud-ui-alert-banner
-  [alertType]="'warning'"
-  [message]="'Mensagem de alerta simples sem link.'">
-</tcloud-ui-alert-banner>
+```typescript
+alertContent = '<strong>Observação:</strong><br>Texto de exemplo.';
 ```
 
-### Uso Avançado — Tipo Dinâmico
+### Uso Avançado
 
 ```typescript
+import { Component } from '@angular/core';
+import { TCloudUiAlertBannerComponent, AlertType } from 'tcloud-ui';
+
 @Component({
     selector: 'app-exemplo',
     standalone: true,
@@ -94,7 +93,7 @@ export class ExemploComponent {}
     `
 })
 export class ExemploComponent {
-  currentType: 'warning' | 'danger' = 'warning';
+  currentType: AlertType = 'info';
   currentMessage = 'Mensagem dinâmica de alerta.';
 
   handleClick(): void {

package/docs/tcloud-ui-mark-readme.md

@@ -2,13 +2,14 @@
 
 ## Caracteristicas
 
-O `TCloudUiMarkReadmeComponent` e um componente standalone que carrega um arquivo Markdown a partir de `tcloud-ui/docs/{componentName}.md` e o renderiza dentro de um accordion.
+O `TCloudUiMarkReadmeComponent` e um componente standalone responsavel por carregar um arquivo Markdown via `HttpClient` e renderiza-lo com `ngx-markdown`.
 
 Funcionalidades principais:
-- Busca o arquivo `.md` via `HttpClient` com base no valor informado em `componentName`.
-- Renderiza o conteudo usando `ngx-markdown`.
-- Exibe a documentacao dentro de `tcloud-ui-accordion`.
-- Executa ajuste de whitespace e tentativa de highlight nos blocos de codigo apos a renderizacao.
+- Carrega o arquivo informado em `pathName`.
+- Renderiza o conteudo Markdown com suporte a highlight de blocos de codigo.
+- Pode exibir o conteudo dentro de um accordion ou diretamente na pagina.
+- Exibe indicador de carregamento durante a busca do arquivo.
+- Permite definir um titulo para a documentacao por meio de `description`.
 
 ## Instalacao
 
@@ -26,15 +27,16 @@ import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
 export class ExemploComponent {}
 ```
 
-Se a aplicacao utilizar a configuracao standalone da biblioteca, mantenha `provideTCloudUi(...)` no bootstrap para disponibilizar os providers necessarios.
-
 ## Propriedades (API)
 
 ### Inputs
 
 | Nome | Tipo | Descricao | Valor Default |
 |------|------|-----------|---------------|
-| componentName | `string` | Nome do arquivo de documentacao sem a extensao. O componente vai buscar `tcloud-ui/docs/{componentName}.md`. | `''` |
+| pathName | `string` | Caminho do arquivo Markdown que sera carregado, por exemplo `tcloud-ui/docs/tcloud-ui-mark-readme.md`. | `''` |
+| description | `string` | Texto exibido como titulo do accordion ou cabecalho da documentacao. | `''` |
+| useAccordion | `boolean` | Define se o conteudo sera exibido dentro de `tcloud-ui-accordion`. Quando `false`, renderiza o Markdown diretamente na pagina. | `true` |
+| open | `boolean` | Estado inicial do accordion quando `useAccordion` estiver habilitado. | `false` |
 
 ### Outputs
 
@@ -45,11 +47,22 @@ Este componente nao possui `@Output()` publicos.
 ### Uso Basico
 
 ```html
-<tcloud-ui-mark-readme [componentName]="'tcloud-ui-accordion'"></tcloud-ui-mark-readme>
+<tcloud-ui-mark-readme
+  [pathName]="'tcloud-ui/docs/tcloud-ui-mark-readme.md'"
+  [description]="'tcloud-ui-mark-readme'">
+</tcloud-ui-mark-readme>
 ```
 
 ### Uso Avancado
 
+```html
+<tcloud-ui-mark-readme
+  [useAccordion]="false"
+  [pathName]="selectedPath"
+  [description]="selectedTitle">
+</tcloud-ui-mark-readme>
+```
+
 ```typescript
 import { Component } from '@angular/core';
 import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
@@ -58,13 +71,12 @@ import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
   selector: 'app-exemplo',
   standalone: true,
   imports: [TCloudUiMarkReadmeComponent],
-  template: `
-    <tcloud-ui-mark-readme [componentName]="selectedDoc"></tcloud-ui-mark-readme>
-  `
+  templateUrl: './app-exemplo.component.html'
 })
-export class ExemploComponent {
-  selectedDoc = 'tcloud-ui-filter-bar';
+export class AppExemploComponent {
+  selectedPath = 'tcloud-ui/docs/tcloud-ui-accordion.md';
+  selectedTitle = 'tcloud-ui-accordion';
 }
 ```
 
-Neste formato, a pagina pode alternar dinamicamente qual documentacao sera carregada e exibida pelo componente.
+Neste formato, a pagina pode controlar dinamicamente qual documento sera carregado e optar por renderiza-lo sem accordion, como na pagina de demonstracao do componente.