@dev-tcloud/tcloud-ui 6.23.2 → 6.25.0-beta.1

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-carousel.md

@@ -0,0 +1,159 @@
+# TCloudUiCarousel
+
+O componente `tcloud-ui-carousel` exibe conteúdos em formato de carrossel horizontal, com suporte a imagens ou qualquer conteúdo projetado via `ng-content`. Ele foi pensado para banners, cards e blocos visuais simples, mantendo navegação, paginação, autoplay e efeitos configuráveis por atributos.
+
+## Características
+
+- Projeção de conteúdo via `ng-content`
+- Cada item projetado ocupa 100% da largura disponível do carrossel
+- Navegação por setas sobre a imagem
+- Paginação por indicadores sobre a imagem
+- Autoplay configurável
+- Suporte a efeito `slide` e `fade`
+- Loop opcional
+- Scroll snap opcional
+- Componente standalone
+
+## Instalação
+
+Importe o componente diretamente em componentes standalone:
+
+```typescript
+import { TCloudUiCarouselComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiCarouselComponent],
+  template: `...`
+})
+export class ExemploCarouselComponent {}
+```
+
+Ou utilize pelo `TCloudUiModule`, quando a aplicação já importar o módulo completo da biblioteca.
+
+## Uso Básico
+
+```html
+<tcloud-ui-carousel>
+  <img src="assets/banner-1.png" alt="Banner 1">
+  <img src="assets/banner-2.png" alt="Banner 2">
+  <img src="assets/banner-3.png" alt="Banner 3">
+</tcloud-ui-carousel>
+```
+
+## Uso com Configurações
+
+```html
+<tcloud-ui-carousel
+  autoplay-delay="8000"
+  autoplay-disable-on-interaction="false"
+  effect="fade"
+  loop="true"
+  pagination="true"
+  pagination-clickable="true"
+  navigation="true"
+  speed="1000">
+  <img src="assets/banner-1.png" alt="Banner 1">
+  <img src="assets/banner-2.png" alt="Banner 2">
+</tcloud-ui-carousel>
+```
+
+## Controlando a Largura Externamente
+
+O carrossel ocupa `100%` da largura do container pai. Para exibir em tamanho menor, controle o wrapper externo:
+
+```html
+<div class="carousel-wrapper">
+  <tcloud-ui-carousel pagination="true" navigation="true">
+    <img src="assets/banner-1.png" alt="Banner 1">
+    <img src="assets/banner-2.png" alt="Banner 2">
+  </tcloud-ui-carousel>
+</div>
+```
+
+```scss
+.carousel-wrapper {
+  width: 80%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+```
+
+## Propriedades
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Descrição |
+|-------------|------|--------|-----------|
+| `ariaLabel` | `string` | `'Carrossel'` | Texto acessível usado para identificar a região do carrossel para leitores de tela. |
+| `controlsPosition` | `'inside' \| 'outside'` | `'inside'` | Define a posição dos botões. Atualmente o uso principal é `inside`, com setas sobre o conteúdo. |
+| `gap` | `string` | `'0'` | Espaçamento horizontal entre slides. Aceita qualquer valor CSS válido, como `'0'`, `'8px'` ou `'var(--size-16)'`. |
+| `hideScrollbar` | `boolean` | `true` | Oculta a scrollbar horizontal do carrossel. |
+| `scrollBehavior` | `ScrollBehavior` | `'smooth'` | Comportamento nativo do scroll. Aceita `'smooth'`, `'auto'` ou `'instant'`, conforme suporte do navegador. |
+| `snap` | `boolean` | `true` | Faz o scroll encaixar no início de cada slide. Evita que o carrossel pare entre dois slides no efeito `slide`. |
+| `autoplay-delay` | `number` | `0` | Tempo em milissegundos entre as trocas automáticas de slide. Use `0` para desativar autoplay. |
+| `autoplay-disable-on-interaction` | `boolean` | `true` | Define se o autoplay deve parar quando o usuário interagir com setas ou paginação. |
+| `effect` | `'slide' \| 'fade'` | `'slide'` | Tipo de transição visual entre slides. |
+| `loop` | `boolean` | `false` | Permite navegação circular entre os slides. Ao avançar no último, volta para o primeiro. |
+| `pagination` | `boolean` | `false` | Exibe os indicadores de paginação sobre a imagem. |
+| `pagination-clickable` | `boolean` | `true` | Permite clicar nos indicadores para navegar diretamente para um slide. |
+| `navigation` | `boolean` | `true` | Exibe os botões de navegação anterior e próximo sobre a imagem. |
+| `speed` | `number` | `300` | Duração da animação em milissegundos. Afeta a animação customizada de slide e a transição de opacidade no `fade`. |
+
+### Outputs
+
+| Output | Tipo | Descrição |
+|--------|------|-----------|
+| `activeIndexChange` | `EventEmitter<number>` | Emitido quando o slide ativo muda. Retorna o índice do slide, começando em `0`. |
+
+## Exemplos
+
+### Com Slide, Paginação e Setas
+
+```html
+<tcloud-ui-carousel
+  effect="slide"
+  pagination="true"
+  navigation="true"
+  loop="true">
+  <img src="assets/banner-1.png" alt="Banner 1">
+  <img src="assets/banner-2.png" alt="Banner 2">
+</tcloud-ui-carousel>
+```
+
+### Com Fade e Autoplay
+
+```html
+<tcloud-ui-carousel
+  effect="fade"
+  autoplay-delay="5000"
+  autoplay-disable-on-interaction="false"
+  speed="1000"
+  pagination="true">
+  <img src="assets/banner-1.png" alt="Banner 1">
+  <img src="assets/banner-2.png" alt="Banner 2">
+</tcloud-ui-carousel>
+```
+
+### Com Cards
+
+```html
+<tcloud-ui-carousel pagination="true" navigation="true">
+  <article class="card">
+    <h3>Plano Basic</h3>
+    <p>Conteúdo do primeiro slide.</p>
+  </article>
+
+  <article class="card">
+    <h3>Plano Prime</h3>
+    <p>Conteúdo do segundo slide.</p>
+  </article>
+</tcloud-ui-carousel>
+```
+
+## Observações
+
+- Para imagens externas, prefira URLs públicas e estáveis. URLs assinadas com expiração podem fazer o carrossel parecer vazio quando vencerem.
+- Para reduzir a largura visual, use um container externo em vez de alterar estilos internos do componente.
+- No modo `fade`, os slides são sobrepostos e alternados por opacidade.
+- No modo `slide`, o carrossel usa scroll horizontal com suporte a snap.