@dev-tcloud/tcloud-ui 6.14.3 → 6.17.0

package/docs/tcloud-ui-card.md

@@ -0,0 +1,40 @@
+# Card
+
+## Características
+- Container de conteúdo com padding responsivo: `shadow-md pad-16` em desktop e `shadow-sm pad-14` em telas menores.
+- Suporta qualquer conteúdo projetado via `<ng-content>`.
+- Standalone component, pronto para importação direta.
+
+## Instalação
+Importe o componente no standalone que for usá-lo:
+```ts
+import { TCloudUiCardComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiCardComponent],
+  template: `<tcloud-ui-card>...</tcloud-ui-card>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| (não possui) | - | Componente não expõe inputs. | - |
+
+### 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>
+  <h2>Card Title</h2>
+  <p>Conteúdo livre dentro do card.</p>
+</tcloud-ui-card>
+```

package/docs/tcloud-ui-choice-issues.md

@@ -0,0 +1,59 @@
+# Choice Issues
+
+## Características
+- Componente de decisão binária (Sim/Não) com rótulos configuráveis.
+- Suporta `ngModel` (ControlValueAccessor) para two-way binding do valor booleano.
+- Modo visualização (`view=true`) exibe apenas o estado atual sem permitir interação.
+- Emite evento de mudança para integração com fluxos externos.
+
+## Instalação
+```ts
+import { TCloudUiChoiceIssuesComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiChoiceIssuesComponent],
+  template: `<tcloud-ui-choice-issues></tcloud-ui-choice-issues>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| view | boolean | Quando verdadeiro, bloqueia interação e apenas exibe o estado. | false |
+| titulo | string | Título exibido no topo do card. | '' |
+| subTitulo | string | Subtítulo/descrição auxiliar. | '' |
+| disabled | boolean | Desabilita interação. | false |
+| ngModel | boolean | Valor selecionado (Sim/Não) com two-way binding. | false |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| onChange | EventEmitter<any> | Emite o valor ao alterar (Sim/Não). |
+| ngModelChange | EventEmitter<any> | Suporte ao two-way binding de `ngModel`. |
+
+## Exemplos de Uso
+### Uso Básico com binding
+```html
+<tcloud-ui-choice-issues
+  titulo="Deseja sinalizar como concluído?"
+  subTitulo="As ações concluídas serão enviadas para a fila de processamento"
+  [(ngModel)]="checked"
+  (onChange)="handleChange($event)">
+</tcloud-ui-choice-issues>
+
+<pre>checked: {{ checked }}</pre>
+```
+
+### Modo visualização (somente leitura)
+```html
+<tcloud-ui-choice-issues
+  [view]="true"
+  [titulo]="'Operação concluída'"
+  [subTitulo]="'Status final'"
+  [ngModel]="true">
+</tcloud-ui-choice-issues>
+```

package/docs/tcloud-ui-cnpj.md

@@ -0,0 +1,102 @@
+# CNPJPipe
+
+O pipe `cnpj` formata uma string numérica de 14 dígitos no padrão de CNPJ brasileiro (`##.###.###/####-##`). Se o valor informado não possuir exatamente 14 caracteres, o pipe retorna o valor original sem formatação.
+
+## Características
+
+- Formatação automática no padrão `##.###.###/####-##`
+- Validação de comprimento: aplica a máscara apenas quando o valor possui exatamente 14 dígitos
+- Remoção de espaços em branco antes da formatação
+- Retorno do valor original caso não possua 14 dígitos
+- Pipe standalone
+
+## Instalação
+
+Importe o pipe diretamente no módulo ou componente standalone:
+
+```typescript
+import { CNPJPipe } from 'tcloud-ui';
+```
+
+## API
+
+### Sintaxe do Pipe
+
+```
+{{ valor | cnpj }}
+```
+
+### Parâmetros
+
+Este pipe não recebe parâmetros adicionais.
+
+### Entrada e Saída
+
+| Entrada          | Saída                  |
+|------------------|------------------------|
+| `'12345678000195'` | `'12.345.678/0001-95'` |
+| `'00123456000178'` | `'00.123.456/0001-78'` |
+| `'123'`           | `'123'` (sem formatação) |
+
+## Exemplos de Uso
+
+### Básico — Formatação de CNPJ
+
+```html
+<p>{{ '12345678000195' | cnpj }}</p>
+<!-- Resultado: 12.345.678/0001-95 -->
+
+<p>{{ '00123456000178' | cnpj }}</p>
+<!-- Resultado: 00.123.456/0001-78 -->
+```
+
+```typescript
+import { CNPJPipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [CNPJPipe],
+  template: `
+    <p>{{ cnpj | cnpj }}</p>
+  `
+})
+export class ExemploBasicoComponent {
+  cnpj = '12345678000195';
+}
+```
+
+### Avançado — Exibição condicional em listagem
+
+```html
+<table class="table">
+  <thead>
+    <tr>
+      <th>Empresa</th>
+      <th>CNPJ</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let empresa of empresas">
+      <td>{{ empresa.nome }}</td>
+      <td>{{ empresa.cnpj | cnpj }}</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```typescript
+import { CNPJPipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, CNPJPipe],
+  template: `...`
+})
+export class ExemploAvancadoComponent {
+  empresas = [
+    { nome: 'Empresa Alpha', cnpj: '12345678000195' },
+    { nome: 'Empresa Beta', cnpj: '98765432000110' },
+    { nome: 'Empresa Gamma', cnpj: '00123456000178' }
+  ];
+}
+```

package/docs/tcloud-ui-container.md

@@ -0,0 +1,171 @@
+# Container
+
+O componente **Container** fornece uma estrutura de layout responsivo com sidebar colapsável, ideal para aplicações com navegação lateral. Ele gerencia automaticamente o estado de expansão/contração da coluna lateral e sincroniza este estado entre seus componentes filhos.
+
+## Características
+
+- **Layout de duas colunas**: Suporta uma coluna lateral (navbar/menu) e uma área de conteúdo principal
+- **Responsividade**: A coluna lateral pode ser expandida ou contraída dinamicamente
+- **Sincronização de estado**: Utiliza um serviço centralizado para gerenciar o estado expandido/contraído
+- **Composição flexível**: Aceita conteúdo através de sub-componentes (`tcloud-ui-container-col` e `tcloud-ui-container-content`)
+- **Sinal reativo**: Implementa Angular Signals para reatividade eficiente
+
+## Instalação
+
+```typescript
+import { TCloudUiModule } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  imports: [TCloudUiModule],
+  // ... resto da configuração
+})
+export class MyComponent {}
+```
+
+## Propriedades (API)
+
+### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `expanded` | `boolean` | Define se o container (coluna lateral) está expandido ou contraído | `false` |
+
+### Métodos
+
+| Nome | Descrição |
+|------|-----------|
+| `to_expanded()` | Método manual para disparar a atualização do estado expandido. Mantido por retrocompatibilidade |
+
+## Componentes Filhos
+
+### tcloud-ui-container-col
+
+Represente a coluna lateral do container. Acessa o estado de expansão através do serviço compartilhado.
+
+```html
+<tcloud-ui-container-col>
+  <!-- Conteúdo da coluna lateral -->
+</tcloud-ui-container-col>
+```
+
+### tcloud-ui-container-content
+
+Represente a área de conteúdo principal do container. Ajusta seu layout baseado no estado de expansão da coluna.
+
+```html
+<tcloud-ui-container-content>
+  <!-- Conteúdo principal -->
+</tcloud-ui-container-content>
+```
+
+## Exemplos de Uso
+
+### Uso Básico
+
+Estrutura simples com navbar e conteúdo principal:
+
+```typescript
+@Component({
+  selector: 'app-my-layout',
+  imports: [TCloudUiModule],
+  template: `
+    <tcloud-ui-container [expanded]="isExpanded">
+      <tcloud-ui-container-col>
+        <nav>
+          <!-- Menu items -->
+        </nav>
+      </tcloud-ui-container-col>
+
+      <tcloud-ui-container-content>
+        <main>
+          <!-- Conteúdo principal -->
+        </main>
+      </tcloud-ui-container-content>
+    </tcloud-ui-container>
+  `
+})
+export class MyLayoutComponent {
+  isExpanded: boolean = true;
+}
+```
+
+### Uso Avançado com Sub-Navbar
+
+Integração com o componente de sub-navbar para navegação colapsável:
+
+```typescript
+@Component({
+  selector: 'app-advanced-layout',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-container [expanded]="submenuExpanded">
+      <tcloud-ui-container-col>
+        <tcloud-ui-sub-navbar (onSubMenuExpandChange)="submenuExpanded = $event">
+          <tcloud-ui-sub-navbar-item label="Dashboard">
+            <i class="fa-solid fa-chart-line" icon></i>
+          </tcloud-ui-sub-navbar-item>
+          
+          <tcloud-ui-sub-navbar-item label="Usuários">
+            <i class="fa-solid fa-users" icon></i>
+          </tcloud-ui-sub-navbar-item>
+          
+          <tcloud-ui-sub-navbar-item label="Configurações">
+            <i class="fa-solid fa-cog" icon></i>
+          </tcloud-ui-sub-navbar-item>
+        </tcloud-ui-sub-navbar>
+      </tcloud-ui-container-col>
+
+      <tcloud-ui-container-content>
+        <tcloud-ui-card>
+          <tcloud-ui-card-title title="Bem-vindo">
+            <i class="fas fa-home" icon></i>
+          </tcloud-ui-card-title>
+          <p>Conteúdo principal da aplicação</p>
+        </tcloud-ui-card>
+      </tcloud-ui-container-content>
+    </tcloud-ui-container>
+  `
+})
+export class AdvancedLayoutComponent {
+  submenuExpanded: boolean = false;
+}
+```
+
+### Controle Programático do Expansion
+
+```typescript
+@Component({
+  selector: 'app-controllable-layout',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <button (click)="toggleExpanded()" class="tc-btn">
+      {{ isExpanded ? 'Fechar Menu' : 'Abrir Menu' }}
+    </button>
+
+    <tcloud-ui-container [expanded]="isExpanded">
+      <tcloud-ui-container-col>
+        <!-- Coluna lateral -->
+      </tcloud-ui-container-col>
+
+      <tcloud-ui-container-content>
+        <!-- Conteúdo -->
+      </tcloud-ui-container-content>
+    </tcloud-ui-container>
+  `
+})
+export class ControllableLayoutComponent {
+  isExpanded: boolean = false;
+
+  toggleExpanded() {
+    this.isExpanded = !this.isExpanded;
+  }
+}
+```
+
+## Notas de Implementação
+
+- O componente utiliza **Angular Signals** para gerenciamento reativo de estado através do `ContainerService`
+- O serviço é fornecido no nível do componente, garantindo isolamento de estado entre instâncias múltiplas de Container
+- Ambas as colunas (`col` e `content`) acessam o mesmo sinal de estado através da injeção de dependência do serviço
+- A coerção de booleanos é automática: qualquer valor truthy/falsy é convertido para `true` ou `false`
+- O componente detecta mudanças no `expanded` input e dispara a sincronização de estado apenas quando o valor efetivamente muda

package/docs/tcloud-ui-cpf.md

@@ -0,0 +1,102 @@
+# CPFPipe
+
+O pipe `cpf` formata uma string numérica de 11 dígitos no padrão de CPF brasileiro (`###.###.###-##`). Se o valor informado não possuir exatamente 11 caracteres, o pipe retorna o valor original sem formatação.
+
+## Características
+
+- Formatação automática no padrão `###.###.###-##`
+- Validação de comprimento: aplica a máscara apenas quando o valor possui exatamente 11 dígitos
+- Remoção de espaços em branco antes da formatação
+- Retorno do valor original caso não possua 11 dígitos
+- Pipe standalone
+
+## Instalação
+
+Importe o pipe diretamente no módulo ou componente standalone:
+
+```typescript
+import { CPFPipe } from 'tcloud-ui';
+```
+
+## API
+
+### Sintaxe do Pipe
+
+```
+{{ valor | cpf }}
+```
+
+### Parâmetros
+
+Este pipe não recebe parâmetros adicionais.
+
+### Entrada e Saída
+
+| Entrada          | Saída               |
+|------------------|----------------------|
+| `'12345678901'`  | `'123.456.789-01'`   |
+| `'00012345678'`  | `'000.123.456-78'`   |
+| `'123'`          | `'123'` (sem formatação) |
+
+## Exemplos de Uso
+
+### Básico — Formatação de CPF
+
+```html
+<p>{{ '12345678901' | cpf }}</p>
+<!-- Resultado: 123.456.789-01 -->
+
+<p>{{ '00012345678' | cpf }}</p>
+<!-- Resultado: 000.123.456-78 -->
+```
+
+```typescript
+import { CPFPipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [CPFPipe],
+  template: `
+    <p>{{ cpf | cpf }}</p>
+  `
+})
+export class ExemploBasicoComponent {
+  cpf = '12345678901';
+}
+```
+
+### Avançado — Exibição em listagem de usuários
+
+```html
+<table class="table">
+  <thead>
+    <tr>
+      <th>Nome</th>
+      <th>CPF</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let usuario of usuarios">
+      <td>{{ usuario.nome }}</td>
+      <td>{{ usuario.cpf | cpf }}</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```typescript
+import { CPFPipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, CPFPipe],
+  template: `...`
+})
+export class ExemploAvancadoComponent {
+  usuarios = [
+    { nome: 'Rodrigo Rea', cpf: '12345678901' },
+    { nome: 'Maria Silva', cpf: '98765432100' },
+    { nome: 'João Santos', cpf: '00012345678' }
+  ];
+}
+```