@dev-tcloud/tcloud-ui 6.15.0 → 6.17.0

package/docs/tcloud-ui-input-password.md

@@ -0,0 +1,258 @@
+# Input Password
+
+## Características
+- Componente standalone para entrada de senhas com validação robusta.
+- Suporta validação customizável: letras maiúsculas, minúsculas, caracteres especiais, comprimento mínimo.
+- Regex de validação gerado dinamicamente baseado nas propriedades de configuração.
+- Ações integradas: visualizar/ocultar senha, gerar senha aleatória, copiar para clipboard.
+- Feedback visual de cópia: ícone muda para checkmark por 3 segundos ao copiar.
+- Toggle entre modo password (mascarado) e text (visível).
+- Integração com ngModel (two-way binding) via ControlValueAccessor.
+- Suporte a padrão HTML5 pattern para validação.
+
+## Instalação
+```ts
+import { TCloudUiInputPasswordComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiInputPasswordComponent],
+  template: `<tcloud-ui-input-password [(ngModel)]="password"></tcloud-ui-input-password>`
+})
+export class ExampleComponent {
+  password: string = '';
+}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| actionView | boolean | Se true, exibe botão para visualizar/ocultar a senha. | true |
+| actionCopy | boolean | Se true, exibe botão para copiar a senha ao clipboard. | true |
+| actionGeneratePassword | boolean | Se true, exibe botão para gerar uma senha aleatória. | true |
+| numberOfCharacter | number | Comprimento mínimo da senha (e tamanho base para geração). | 14 |
+| atLeastOneUppercaseLetter | boolean | Se true, valida presença de pelo menos uma letra maiúscula. | true |
+| atLeastOneLowercaseLetter | boolean | Se true, valida presença de pelo menos uma letra minúscula. | true |
+| atLeastOneSpecialCharacter | boolean | Se true, valida presença de pelo menos um caractere especial. | true |
+| ngModel | string | Valor da senha (two-way binding). | '' |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| ngModelChange | EventEmitter<string> | Emite quando a senha é alterada. |
+
+## Exemplos de Uso
+### Uso Básico
+```html
+<tcloud-ui-input-password [(ngModel)]="password"></tcloud-ui-input-password>
+
+<p>Senha: {{ password }}</p>
+```
+
+Componente:
+```ts
+export class ExampleComponent {
+  password: string = '';
+}
+```
+
+### Sem Ação de Gerar Senha
+```html
+<tcloud-ui-input-password 
+  [(ngModel)]="password"
+  [actionGeneratePassword]="false">
+</tcloud-ui-input-password>
+```
+
+### Com Apenas Ação de Visualizar
+```html
+<tcloud-ui-input-password 
+  [(ngModel)]="password"
+  [actionCopy]="false"
+  [actionGeneratePassword]="false">
+</tcloud-ui-input-password>
+```
+
+### Sem Nenhuma Ação (apenas input)
+```html
+<tcloud-ui-input-password 
+  [(ngModel)]="password"
+  [actionView]="false"
+  [actionCopy]="false"
+  [actionGeneratePassword]="false">
+</tcloud-ui-input-password>
+```
+
+### Customizando Validação - Sem Requisitos Especiais
+```html
+<tcloud-ui-input-password 
+  [(ngModel)]="password"
+  [numberOfCharacter]="8"
+  [atLeastOneUppercaseLetter]="false"
+  [atLeastOneSpecialCharacter]="false">
+</tcloud-ui-input-password>
+```
+
+## Uso Avançado
+### Validação Rigorosa - Apenas Maiúsculas, Minúsculas e Números
+```html
+<tcloud-ui-input-password 
+  [(ngModel)]="password"
+  [numberOfCharacter]="12"
+  [atLeastOneUppercaseLetter]="true"
+  [atLeastOneLowercaseLetter]="true"
+  [atLeastOneSpecialCharacter]="false">
+</tcloud-ui-input-password>
+```
+
+### Comprimento Customizado
+```html
+<!-- Senha curta (8 caracteres) -->
+<tcloud-ui-input-password 
+  [(ngModel)]="shortPassword"
+  [numberOfCharacter]="8">
+</tcloud-ui-input-password>
+
+<!-- Senha alongada (20 caracteres) -->
+<tcloud-ui-input-password 
+  [(ngModel)]="longPassword"
+  [numberOfCharacter]="20">
+</tcloud-ui-input-password>
+```
+
+### Em Formulário com Validação
+```html
+<form #passwordForm="ngForm">
+  <div>
+    <label>Nova Senha:</label>
+    <tcloud-ui-input-password 
+      name="password"
+      [(ngModel)]="password"
+      (ngModelChange)="onPasswordChange($event)">
+    </tcloud-ui-input-password>
+  </div>
+  
+  <div *ngIf="password && !isPasswordValid()">
+    <p class="error">Senha não atende aos requisitos</p>
+  </div>
+  
+  <button [disabled]="!passwordForm.valid">Salvar</button>
+</form>
+```
+
+Componente:
+```ts
+export class PasswordFormComponent {
+  password: string = '';
+  numberOfCharacter: number = 14;
+  atLeastOneUppercaseLetter: boolean = true;
+  atLeastOneLowercaseLetter: boolean = true;
+  atLeastOneSpecialCharacter: boolean = true;
+
+  onPasswordChange(newPassword: string) {
+    console.log('Senha alterada:', newPassword);
+  }
+
+  isPasswordValid(): boolean {
+    if (this.password.length < this.numberOfCharacter) return false;
+    if (this.atLeastOneUppercaseLetter && !/[A-Z]/.test(this.password)) return false;
+    if (this.atLeastOneLowercaseLetter && !/[a-z]/.test(this.password)) return false;
+    if (this.atLeastOneSpecialCharacter && !/[!@#$%^&*()_+{}[\]:;<>,.?/~]/.test(this.password)) return false;
+    return true;
+  }
+}
+```
+
+### Gerador de Senha com Customização
+```ts
+export class PasswordGeneratorComponent {
+  generatedPassword: string = '';
+  passwordLength: number = 16;
+  
+  generateNewPassword() {
+    // Aciona o gerador via botão no componente
+    // Ou manualmente:
+    const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const lowercaseLetters = 'abcdefghijklmnopqrstuvwxyz';
+    const numbers = '0123456789';
+    const specialCharacters = '!@#$%^&*()_+{}[]:;<>,.?/~';
+    const allCharacters = uppercaseLetters + lowercaseLetters + numbers + specialCharacters;
+    
+    let password = '';
+    password += uppercaseLetters[Math.floor(Math.random() * uppercaseLetters.length)];
+    password += lowercaseLetters[Math.floor(Math.random() * lowercaseLetters.length)];
+    password += specialCharacters[Math.floor(Math.random() * specialCharacters.length)];
+    
+    for (let i = password.length; i < this.passwordLength; i++) {
+      password += allCharacters[Math.floor(Math.random() * allCharacters.length)];
+    }
+    
+    this.generatedPassword = password.split('').sort(() => Math.random() - 0.5).join('');
+  }
+}
+```
+
+```html
+<div>
+  <label>Comprimento da Senha:</label>
+  <input type="number" [(ngModel)]="passwordLength" min="8" max="32">
+  
+  <button (click)="generateNewPassword()">Gerar Nova Senha</button>
+  
+  <tcloud-ui-input-password 
+    [(ngModel)]="generatedPassword"
+    [numberOfCharacter]="passwordLength"
+    readonly>
+  </tcloud-ui-input-password>
+</div>
+```
+
+### Com Múltiplos Níveis de Segurança
+```ts
+export class PasswordSecurityComponent {
+  password: string = '';
+  securityLevel: 'low' | 'medium' | 'high' = 'high';
+
+  getPasswordConfig() {
+    const configs = {
+      low: { numberOfCharacter: 6, atLeastOneUppercaseLetter: false, atLeastOneSpecialCharacter: false },
+      medium: { numberOfCharacter: 10, atLeastOneUppercaseLetter: true, atLeastOneSpecialCharacter: false },
+      high: { numberOfCharacter: 14, atLeastOneUppercaseLetter: true, atLeastOneSpecialCharacter: true }
+    };
+    return configs[this.securityLevel];
+  }
+}
+```
+
+```html
+<div>
+  <label>Nível de Segurança:</label>
+  <select [(ngModel)]="securityLevel">
+    <option value="low">Baixo (6 caracteres)</option>
+    <option value="medium">Médio (10 caracteres, maiúsculas)</option>
+    <option value="high">Alto (14 caracteres, maiúsculas, especiais)</option>
+  </select>
+  
+  <tcloud-ui-input-password 
+    [(ngModel)]="password"
+    [numberOfCharacter]="getPasswordConfig().numberOfCharacter"
+    [atLeastOneUppercaseLetter]="getPasswordConfig().atLeastOneUppercaseLetter"
+    [atLeastOneSpecialCharacter]="getPasswordConfig().atLeastOneSpecialCharacter">
+  </tcloud-ui-input-password>
+</div>
+```
+
+## Validação
+A senha é validada através de um regex dinâmico com as seguintes regras:
+- **Comprimento mínimo**: Configurável via `numberOfCharacter`
+- **Letra maiúscula**: Validada se `atLeastOneUppercaseLetter=true`
+- **Letra minúscula**: Validada se `atLeastOneLowercaseLetter=true`
+- **Caractere especial**: Validada se `atLeastOneSpecialCharacter=true`
+  - Caracteres especiais reconhecidos: `!@#$%^&*()_+{}[]:;<>,.?/~`
+
+Exemplos de regex gerados:
+- Com todos os requisitos (14+ caracteres): `^(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*\(\)_+\{\}\[\]:;<>,.?\/~])(?!.*\s).{14,}$`
+- Sem caracteres especiais: `^(?=.*[A-Z])(?=.*[a-z]).{14,}$`
+- Comprimento mínimo apenas: `^.{14,}$`

package/docs/tcloud-ui-input-search.md

@@ -0,0 +1,314 @@
+# Input Search
+
+## Características
+- Componente standalone para busca full-text em arrays de objetos.
+- Suporta dois modos: **mirror** (exibe todos os itens, filtrando visualmente) e **não mirror** (exibe apenas resultados encontrados).
+- Normalização automática: ignora maiúsculas, minúsculas, acentos e caracteres especiais.
+- Busca em todos os campos do objeto ou apenas em campos selecionados.
+- Suporte a busca em dados aninhados e datas.
+- Botões integrados: ícone de busca (quando vazio) e ícone de limpeza (quando preenchido).
+- Placeholder customizável.
+- Emite resultados através do evento `found`.
+
+## Instalação
+```ts
+import { TCloudUiInputSearchComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiInputSearchComponent],
+  template: `
+    <tcloud-ui-input-search 
+      [base_object]="items"
+      (found)="searchResult = $event">
+    </tcloud-ui-input-search>
+  `
+})
+export class ExampleComponent {
+  items: any[] = [...];
+  searchResult: any[] = [];
+}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| base_object | any[] | Array de objetos ou dados simples a serem pesquisados. | undefined |
+| placeholder | string | Texto exibido no input quando vazio. | 'Procurar...' |
+| mirror | boolean | Se true, exibe todos os itens espelhados (com destaque). Se false, exibe apenas os resultados encontrados. | true |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| found | EventEmitter<any[]> | Emite o array de resultados encontrados. |
+
+## Exemplos de Uso
+### Uso Básico com Array de Objetos
+```ts
+export class ExampleComponent {
+  items = [
+    { id: 1, name: 'João Silva', city: 'São Paulo' },
+    { id: 2, name: 'Maria Santos', city: 'Rio de Janeiro' },
+    { id: 3, name: 'Pedro Oliveira', city: 'São Paulo' }
+  ];
+
+  searchResult: any[] = [];
+}
+```
+
+```html
+<tcloud-ui-input-search 
+  [base_object]="items"
+  placeholder="Buscar por nome ou cidade..."
+  (found)="searchResult = $event">
+</tcloud-ui-input-search>
+
+<div *ngFor="let item of searchResult">
+  <p>{{ item.name }} - {{ item.city }}</p>
+</div>
+```
+
+### Modo Espelho (Mirror) - Padrão
+```html
+<!-- Todos os itens são exibidos, mas apenas os encontrados são destacados -->
+<tcloud-ui-input-search 
+  [base_object]="items"
+  [mirror]="true"
+  placeholder="Procurar...">
+</tcloud-ui-input-search>
+```
+
+### Modo Sem Espelho
+```html
+<!-- Apenas os itens encontrados são exibidos -->
+<tcloud-ui-input-search 
+  [base_object]="items"
+  [mirror]="false"
+  placeholder="Procurar...">
+</tcloud-ui-input-search>
+```
+
+### Com Array Simples
+```ts
+export class ExampleComponent {
+  countries = ['Brasil', 'Argentina', 'Uruguai', 'Paraguai', 'Chile'];
+  searchResult: string[] = [];
+}
+```
+
+```html
+<tcloud-ui-input-search 
+  [base_object]="countries"
+  placeholder="Buscar país..."
+  (found)="searchResult = $event">
+</tcloud-ui-input-search>
+
+<ul>
+  <li *ngFor="let country of searchResult">{{ country }}</li>
+</ul>
+```
+
+## Uso Avançado
+### Com Objetos Complexos e Aninhados
+```ts
+export class ExampleComponent {
+  products = [
+    {
+      id: 1,
+      name: 'Notebook Dell',
+      category: { name: 'Eletrônicos', subcategory: 'Computadores' },
+      price: 3500,
+      stock: true,
+      supplier: { name: 'Fornecedor A', city: 'São Paulo' }
+    },
+    {
+      id: 2,
+      name: 'Mouse Logitech',
+      category: { name: 'Eletrônicos', subcategory: 'Periféricos' },
+      price: 150,
+      stock: true,
+      supplier: { name: 'Fornecedor B', city: 'Rio de Janeiro' }
+    }
+  ];
+
+  searchResult: any[] = [];
+}
+```
+
+```html
+<tcloud-ui-input-search 
+  [base_object]="products"
+  placeholder="Buscar por nome, categoria, fornecedor..."
+  [mirror]="false"
+  (found)="searchResult = $event">
+</tcloud-ui-input-search>
+
+<table>
+  <thead>
+    <tr>
+      <th>Nome</th>
+      <th>Categoria</th>
+      <th>Preço</th>
+      <th>Fornecedor</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let product of searchResult">
+      <td>{{ product.name }}</td>
+      <td>{{ product.category.name }}</td>
+      <td>{{ product.price | currency }}</td>
+      <td>{{ product.supplier.name }}</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### Com Busca e Tabela de Resultados
+```ts
+export class SearchTableComponent {
+  employees = [
+    { id: 1, name: 'Alice Johnson', department: 'TI', role: 'Desenvolvedor', hired: new Date(2020, 0, 15) },
+    { id: 2, name: 'Bob Smith', department: 'RH', role: 'Gerente', hired: new Date(2019, 5, 20) },
+    { id: 3, name: 'Carol White', department: 'TI', role: 'Analista', hired: new Date(2021, 2, 10) },
+    { id: 4, name: 'David Brown', department: 'Vendas', role: 'Vendedor', hired: new Date(2022, 8, 5) }
+  ];
+
+  searchResult: any[] = [];
+
+  ngOnInit() {
+    // Inicial com todos os itens
+    this.searchResult = this.employees;
+  }
+}
+```
+
+```html
+<div class="search-container">
+  <h2>Buscar Funcionários</h2>
+  <tcloud-ui-input-search 
+    [base_object]="employees"
+    placeholder="Nome, departamento, cargo..."
+    [mirror]="false"
+    (found)="searchResult = $event">
+  </tcloud-ui-input-search>
+</div>
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>ID</th>
+      <th>Nome</th>
+      <th>Departamento</th>
+      <th>Cargo</th>
+      <th>Data Admissão</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let employee of searchResult">
+      <td>{{ employee.id }}</td>
+      <td>{{ employee.name }}</td>
+      <td>{{ employee.department }}</td>
+      <td>{{ employee.role }}</td>
+      <td>{{ employee.hired | date: 'dd/MM/yyyy' }}</td>
+    </tr>
+  </tbody>
+</table>
+
+<div *ngIf="searchResult.length === 0">
+  <p>Nenhum resultado encontrado.</p>
+</div>
+```
+
+### Com Dupla Busca (Cascade)
+```ts
+export class CascadeSearchComponent {
+  companies = [
+    { id: 1, name: 'Tech Solutions', city: 'São Paulo', employees: [...] },
+    { id: 2, name: 'Data Corp', city: 'Rio de Janeiro', employees: [...] }
+  ];
+
+  selectedCompany: any = null;
+  companyResults: any[] = [];
+  employeeResults: any[] = [];
+}
+```
+
+```html
+<div class="search-cascade">
+  <h3>Buscar Empresa</h3>
+  <tcloud-ui-input-search 
+    [base_object]="companies"
+    placeholder="Nome da empresa, cidade..."
+    [mirror]="false"
+    (found)="companyResults = $event">
+  </tcloud-ui-input-search>
+
+  <h3>Empresas Encontradas</h3>
+  <div *ngFor="let company of companyResults" (click)="selectedCompany = company">
+    <p>{{ company.name }} - {{ company.city }}</p>
+  </div>
+
+  <div *ngIf="selectedCompany">
+    <h3>Buscar Funcionário em {{ selectedCompany.name }}</h3>
+    <tcloud-ui-input-search 
+      [base_object]="selectedCompany.employees"
+      placeholder="Nome do funcionário..."
+      [mirror]="false"
+      (found)="employeeResults = $event">
+    </tcloud-ui-input-search>
+
+    <div *ngFor="let employee of employeeResults">
+      <p>{{ employee.name }}</p>
+    </div>
+  </div>
+</div>
+```
+
+### Customização Visual com Resultados
+```html
+<div class="search-wrapper">
+  <tcloud-ui-input-search 
+    [base_object]="items"
+    placeholder="Digite para buscar..."
+    [mirror]="false"
+    (found)="searchResult = $event">
+  </tcloud-ui-input-search>
+
+  <div class="results-info">
+    <span *ngIf="searchResult.length > 0">
+      {{ searchResult.length }} resultado(s) encontrado(s)
+    </span>
+    <span *ngIf="searchResult.length === 0">
+      Nenhum resultado encontrado
+    </span>
+  </div>
+
+  <ul class="results-list">
+    <li *ngFor="let item of searchResult" class="result-item">
+      <span class="result-title">{{ item.title }}</span>
+      <span class="result-description">{{ item.description }}</span>
+    </li>
+  </ul>
+</div>
+```
+
+## Normalização de Busca
+O componente normaliza automaticamente o texto de busca:
+- Converte para minúsculas
+- Remove acentos e caracteres especiais
+- Remove espaços em branco
+- Formata datas para busca (DD/MM/YYYY e formato médio)
+
+Exemplos de buscas equivalentes:
+- `João` = `joao` = `JOÃO` = `jõão`
+- `São Paulo` = `sao paulo` = `SÃO PAULO`
+- `15/03/2024` buscará por qualquer data nesse formato
+
+## Casos de Uso
+- **Tabelas dinâmicas**: Filtrar registros enquanto digita
+- **Listas de produtos**: Buscar por nome, categoria, fornecedor
+- **Diretórios**: Localizar contatos por nome, departamento, cidade
+- **Relatórios**: Filtrar dados dinâmicamente
+- **Autocomplete**: Implementar sugestões baseadas em busca em tempo real