@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

package/docs/tcloud-ui-calendar.md

@@ -0,0 +1,387 @@
+# Calendar
+
+## Características
+
+O componente `tcloud-ui-calendar` é um componente calendário interativo com suporte a navegação entre meses e anos, seleção de datas e indicadores de compromissos. Implementa uma interface responsiva com mudança de visualização (dias, meses, anos) facilitando a seleção rápida de datas.
+
+## Instalação
+
+Para utilizar o componente Calendar, importe o módulo `TCloudUiModule`:
+
+```typescript
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `<tcloud-ui-calendar ...></tcloud-ui-calendar>`
+})
+export class ExampleComponent {}
+```
+
+Ou importe diretamente o componente e a interface de dados:
+
+```typescript
+import { TCloudUiCalendarComponent, CalendarAppointment } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiCalendarComponent],
+  template: `<tcloud-ui-calendar ...></tcloud-ui-calendar>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+
+### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `appointments` | `CalendarAppointment[]` | Lista de compromissos/eventos a exibir no calendário | `[]` |
+| `activeDate` | `string` | Data ativa em formato `YYYY-MM-DD` para pré-seleção | `undefined` |
+
+### Outputs
+
+| Nome | Tipo de Evento | Descrição |
+|------|----------------|-----------|
+| `onSelectDate` | `Date` | Emitido quando uma data é selecionada, retorna objeto completo Date |
+
+### Interfaces e Tipos Exportados
+
+```typescript
+export interface CalendarAppointment {
+  appointmentDate: string;        // Formato: YYYY-MM-DD
+  type: 'info' | 'alert' | 'danger' | 'success';
+  description: string;             // Texto do compromisso (exibido no tooltip)
+}
+```
+
+## Comportamento
+
+- **Navegação de Meses**: Clique nas setas para navegar entre meses quando em visualização de dias
+- **Navegação de Anos**: Clique nas setas para navegar entre anos quando em visualização de meses/anos
+- **Modo de Visualização**: 
+  - **Dias (padrão)**: Seleção de data diária
+  - **Meses**: Clique no mês no cabeçalho para alternar
+  - **Anos**: Clique no ano no cabeçalho para alternar
+- **Indicadores de Compromissos**: Pontos coloridos indicam compromissos (info=azul, alert=laranja, danger=vermelho, success=verde)
+- **Tooltip**: Passe o mouse sobre um dia com compromisso para ver a descrição
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-basic-calendar',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-calendar></tcloud-ui-calendar>
+  `
+})
+export class BasicCalendarComponent {}
+```
+
+### Com Seleção de Data
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-select-calendar',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div>
+      <tcloud-ui-calendar 
+        (onSelectDate)="onDateSelected($event)">
+      </tcloud-ui-calendar>
+      
+      <p *ngIf="selectedDate()">
+        Data selecionada: {{ selectedDate() | date: 'dd/MM/yyyy' }}
+      </p>
+    </div>
+  `
+})
+export class SelectCalendarComponent {
+  selectedDate = signal<Date | null>(null);
+
+  onDateSelected(date: Date): void {
+    this.selectedDate.set(date);
+    console.log('Data selecionada:', date);
+  }
+}
+```
+
+### Com Compromissos
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule, CalendarAppointment } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-appointments-calendar',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-calendar 
+      [appointments]="appointments()"
+      (onSelectDate)="onDateSelected($event)">
+    </tcloud-ui-calendar>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      padding: 20px;
+    }
+  `]
+})
+export class AppointmentsCalendarComponent {
+  selectedDate = signal<Date | null>(null);
+
+  appointments = signal<CalendarAppointment[]>([
+    {
+      appointmentDate: new Date().toISOString().split('T')[0],
+      type: 'info',
+      description: 'Reunião de planejamento'
+    },
+    {
+      appointmentDate: new Date(new Date().getTime() + 2*24*60*60*1000).toISOString().split('T')[0],
+      type: 'success',
+      description: 'Projeto aprovado'
+    },
+    {
+      appointmentDate: new Date(new Date().getTime() + 5*24*60*60*1000).toISOString().split('T')[0],
+      type: 'alert',
+      description: 'Atenção: Prazo próximo'
+    },
+    {
+      appointmentDate: new Date(new Date().getTime() + 10*24*60*60*1000).toISOString().split('T')[0],
+      type: 'danger',
+      description: 'Urgente: Revisão necessária'
+    }
+  ]);
+
+  onDateSelected(date: Date): void {
+    this.selectedDate.set(date);
+  }
+}
+```
+
+### Com Data Ativa Pré-selecionada
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-preset-calendar',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-calendar 
+      [activeDate]="activeDate()"
+      (onSelectDate)="onDateSelected($event)">
+    </tcloud-ui-calendar>
+  `
+})
+export class PresetCalendarComponent {
+  activeDate = signal('2024-12-25'); // Data pré-selecionada
+
+  onDateSelected(date: Date): void {
+    console.log('Data selecionada:', date);
+  }
+}
+```
+
+### Múltiplos Calendários com Diferentes Estados
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule, CalendarAppointment } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-multi-calendar',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="calendars-grid">
+      <div class="calendar-box">
+        <h3>Calendário Simples</h3>
+        <tcloud-ui-calendar></tcloud-ui-calendar>
+      </div>
+
+      <div class="calendar-box">
+        <h3>Calendário com Compromissos</h3>
+        <tcloud-ui-calendar 
+          [appointments]="appointments()">
+        </tcloud-ui-calendar>
+      </div>
+
+      <div class="calendar-box">
+        <h3>Calendário com Seleção</h3>
+        <tcloud-ui-calendar 
+          [appointments]="appointments()"
+          (onSelectDate)="onDateSelected($event)">
+        </tcloud-ui-calendar>
+        <p *ngIf="selectedDate()">
+          Selecionado: {{ selectedDate() | date: 'dd/MM/yyyy' }}
+        </p>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .calendars-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+      padding: 20px;
+    }
+    .calendar-box {
+      padding: 20px;
+      border: 1px solid var(--c-neutral-200);
+      border-radius: 8px;
+      background: var(--c-neutral-50);
+    }
+    h3 {
+      margin-top: 0;
+      color: var(--c-neutral-800);
+    }
+  `]
+})
+export class MultiCalendarComponent {
+  selectedDate = signal<Date | null>(null);
+
+  appointments = signal<CalendarAppointment[]>([
+    {
+      appointmentDate: new Date().toISOString().split('T')[0],
+      type: 'success',
+      description: 'Disponível'
+    },
+    {
+      appointmentDate: new Date(new Date().getTime() + 3*24*60*60*1000).toISOString().split('T')[0],
+      type: 'danger',
+      description: 'Ocupado'
+    }
+  ]);
+
+  onDateSelected(date: Date): void {
+    this.selectedDate.set(date);
+  }
+}
+```
+
+### Em Formulário Reativo
+
+```typescript
+import { Component, signal, OnInit } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-form-calendar',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule, ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form">
+      <div>
+        <label>Selecione uma data de início:</label>
+        
+        <tcloud-ui-calendar 
+          (onSelectDate)="setStartDate($event)">
+        </tcloud-ui-calendar>
+
+        <p>Data selecionada: {{ form.get('startDate')?.value | date: 'dd/MM/yyyy' }}</p>
+      </div>
+
+      <button (click)="submitForm()" [disabled]="!form.valid">
+        Confirmar
+      </button>
+    </form>
+  `,
+  styles: [`
+    form {
+      padding: 20px;
+      background: var(--c-neutral-50);
+      border-radius: 8px;
+    }
+    div {
+      margin-bottom: 20px;
+    }
+    label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 600;
+      color: var(--c-neutral-700);
+    }
+    button {
+      padding: 10px 20px;
+      background: var(--c-primary-500);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  `]
+})
+export class FormCalendarComponent implements OnInit {
+  form!: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.form = this.fb.group({
+      startDate: [null, Validators.required]
+    });
+  }
+
+  setStartDate(date: Date): void {
+    this.form.patchValue({ startDate: date });
+  }
+
+  submitForm(): void {
+    if (this.form.valid) {
+      console.log('Formulário enviado:', this.form.value);
+    }
+  }
+}
+```
+
+## Estilos e Customização
+
+O componente utiliza variáveis CSS do tema para composição visual:
+- `--c-neutral-50`: Fundo do calendário
+- `--c-neutral-300`: Borda
+- `--c-primary-500`: Cor primária (hover/seleção)
+- `--c-info-500`, `--c-alert-500`, `--c-danger-500`, `--c-success-500`: Cores dos indicadores de compromissos
+
+Você pode sobrescrever essas variáveis no seu escopo CSS para customizar o calendário.
+
+## Notas Importantes
+
+- O componente é **standalone** e não requer NgModule
+- As datas devem estar no formato `YYYY-MM-DD` quando utilisadas como string
+- O objeto Date emitido em `onSelectDate` pode ser formatado com pipes (date, etc)
+- Compromise dates devem estar sincronizadas com o formato esperado (YYYY-MM-DD)
+- O componente é responsivo e se adapta ao tamanho do container
+
+## Acessibilidade
+
+- Navegação via teclado (em desenvolvimento)
+- Aria-labels para leitores de tela (em desenvolvimento)
+- Alto contraste em modo noturno

package/docs/tcloud-ui-card-accordion.md

@@ -0,0 +1,266 @@
+# Card Accordion
+
+## Características
+
+O componente `tcloud-ui-card-accordion` é um accordion estilizado em formato de cartão com suporte a título, ícone customizável, badge informativo e comportamento responsivo. Implementa controle de estado aberto/fechado com two-way binding, facilitando a criação de listas expansíveis de informações organizadas em cartões.
+
+## Instalação
+
+Para utilizar o componente Card Accordion, importe o módulo `TCloudUiModule`:
+
+```typescript
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `<tcloud-ui-card-accordion ...></tcloud-ui-card-accordion>`
+})
+export class ExampleComponent {}
+```
+
+Ou importe diretamente o componente:
+
+```typescript
+import { TCloudUiCardAccordionComponent } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiCardAccordionComponent],
+  template: `<tcloud-ui-card-accordion ...></tcloud-ui-card-accordion>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+
+### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `title` | `string` | Título principal do accordion | `''` (vazio) |
+| `iconClass` | `string` | Classe CSS do ícone FontAwesome a exibir | `'fa-light fa-hard-drive'` |
+| `showMoreText` | `string` | Texto do botão para expandir (desktop) | `'Exibir mais'` |
+| `showLessText` | `string` | Texto do botão para retrair (desktop) | `'Exibir menos'` |
+| `badge` | `{text: string; class: string} \| null` | Objeto com texto e classe CSS do badge | `null` |
+
+### Two-Way Binding (Model)
+
+| Nome | Tipo | Descrição |
+|------|------|-----------|
+| `isOpen` | `boolean` | Controla se o accordion está expandido ou retraído |
+
+### Outputs
+
+| Nome | Tipo de Evento | Descrição |
+|------|----------------|-----------|
+| `toggle` | `boolean` | Emitido quando o accordion é expandido ou retraído, com o novo estado |
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-basic-example',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-card-accordion [title]="'Informações Gerais'">
+      <p>Conteúdo do accordion aqui</p>
+    </tcloud-ui-card-accordion>
+  `
+})
+export class BasicExampleComponent {}
+```
+
+### Uso com Badge
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-badge-example',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-card-accordion 
+      [title]="'ID: 12345 - Topologia Prod'"
+      [badge]="{ text: 'Ativo', class: 'c-success-500 bor-c-success-500' }"
+    >
+      <p>Detalhes da topologia em produção</p>
+    </tcloud-ui-card-accordion>
+  `
+})
+export class BadgeExampleComponent {}
+```
+
+### Uso Avançado com Two-Way Binding
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-advanced-example',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div>
+      <button (click)="toggleAll()">
+        {{ allOpen ? 'Retrair Tudo' : 'Expandir Tudo' }}
+      </button>
+
+      <tcloud-ui-card-accordion 
+        *ngFor="let item of items; let i = index"
+        [(isOpen)]="items[i].isOpen"
+        [title]="item.title"
+        [iconClass]="item.icon"
+        [badge]="item.badge"
+        (toggle)="onToggle(i, $event)"
+        class="mar-t-16"
+      >
+        <p>{{ item.content }}</p>
+      </tcloud-ui-card-accordion>
+    </div>
+  `
+})
+export class AdvancedExampleComponent {
+  allOpen = false;
+  
+  items = [
+    {
+      title: 'ID: 001 - Ambiente Produção',
+      icon: 'fa-light fa-server',
+      badge: { text: 'Ativo', class: 'c-success-500 bor-c-success-500' },
+      content: 'Informações do ambiente de produção',
+      isOpen: false
+    },
+    {
+      title: 'ID: 002 - Ambiente Homologação',
+      icon: 'fa-light fa-flask',
+      badge: { text: 'Pendente', class: 'c-warning-500 bor-c-warning-500' },
+      content: 'Informações do ambiente de homologação',
+      isOpen: false
+    },
+    {
+      title: 'ID: 003 - Ambiente Desenvolvimento',
+      icon: 'fa-light fa-laptop',
+      badge: null,
+      content: 'Informações do ambiente de desenvolvimento',
+      isOpen: false
+    }
+  ];
+
+  toggleAll(): void {
+    this.allOpen = !this.allOpen;
+    this.items.forEach(item => {
+      item.isOpen = this.allOpen;
+    });
+  }
+
+  onToggle(index: number, isOpen: boolean): void {
+    console.log(`Accordion ${index} toggled to:`, isOpen);
+  }
+}
+```
+
+### Customização de Ícones e Textos
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-custom-example',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-card-accordion 
+      [title]="'Configurações Avançadas'"
+      [iconClass]="'fa-light fa-gear'"
+      [showMoreText]="'Mostrar detalhes'"
+      [showLessText]="'Ocultar detalhes'"
+    >
+      <div>
+        <label>Configuração 1: <input type="checkbox" /></label>
+        <label>Configuração 2: <input type="checkbox" /></label>
+        <label>Configuração 3: <input type="checkbox" /></label>
+      </div>
+    </tcloud-ui-card-accordion>
+  `
+})
+export class CustomExampleComponent {}
+```
+
+### Controle Programático de Estado
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+import { signal } from '@angular/core';
+
+@Component({
+  selector: 'app-programmatic-example',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <button (click)="expandAccordion()">Expandir</button>
+    <button (click)="collapseAccordion()">Retrair</button>
+
+    <tcloud-ui-card-accordion 
+      [(isOpen)]="isExpanded"
+      [title]="'Estado Controlado Programaticamente'"
+      class="mar-t-16"
+    >
+      <p>Este accordion está expandido: {{ isExpanded }}</p>
+    </tcloud-ui-card-accordion>
+  `
+})
+export class ProgrammaticExampleComponent {
+  isExpanded = signal(false);
+
+  expandAccordion(): void {
+    this.isExpanded.set(true);
+  }
+
+  collapseAccordion(): void {
+    this.isExpanded.set(false);
+  }
+}
+```
+
+## Comportamento Responsivo
+
+O componente implementa diferentes comportamentos para desktop e mobile:
+
+- **Desktop**: Exibe botão com texto "Exibir mais" / "Exibir menos" e aplicam-se classes de padding maiores
+- **Mobile (< 480px)**: Exibe botão reduzido apenas com ícone de chevron para economizar espaço
+
+O componente utiliza o serviço `TCloudUiDeviceUtilsService` para detectar o tamanho da viewport e aplicar os estilos adequados automaticamente.
+
+## Conteúdo Dinâmico
+
+O conteúdo do accordion é projetado usando `<ng-content>`, permitindo qualquer conteúdo HTML ou componentes Angular dentro:
+
+```typescript
+<tcloud-ui-card-accordion [title]="'Seção Dinâmica'">
+  <app-custom-component></app-custom-component>
+  <table>...</table>
+  <form>...</form>
+</tcloud-ui-card-accordion>
+```
+
+O conteúdo será exibido ou ocultado conforme o estado `isOpen` do accordion.

package/docs/tcloud-ui-card-title.md

@@ -0,0 +1,47 @@
+# Card Title
+
+## Características
+- Cabeçalho de cartão com ícone projetado e texto obrigatório.
+- Projeção flexível: aceita conteúdo extra (ex.: botões) após o título.
+- Responsivo: reduz dimensões do ícone e tipografia em telas menores.
+- Standalone, pronto para importação direta.
+
+## Instalação
+```ts
+import { TCloudUiCardTitleComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiCardTitleComponent],
+  template: `<tcloud-ui-card-title title="Title"></tcloud-ui-card-title>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| title | string (obrigatório) | Texto exibido como título. | - |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| (não possui) | - | Componente não emite eventos. |
+
+## Exemplos de Uso
+### Uso Básico
+```html
+<tcloud-ui-card-title title="Card Title">
+  <i class="fas fa-times" icon></i>
+</tcloud-ui-card-title>
+```
+
+### Uso Avançado
+```html
+<tcloud-ui-card-title title="Relatório Semanal">
+  <i class="fa-light fa-chart-line" icon></i>
+  <button type="button" class="tc-btn tc-btn-primary mar-l-a">Ação</button>
+</tcloud-ui-card-title>
+```