@dev-tcloud/tcloud-ui 6.14.3 → 6.17.0

package/docs/tcloud-ui-linha-logo.md

@@ -0,0 +1,550 @@
+# TCloud UI Linha Logo
+
+Componente Angular standalone para exibir logo de linha de produtos TOTVS com dimensionamento automático e URL configurável. Renderiza imagens SVG de logos de linhas de produtos com resposta adaptativa.
+
+## Características
+
+- ✅ **Logo responsivo** - Imagens SVG dinâmicas ajustadas ao container
+- ✅ **URL configurável** - Aponta para AWS S3 da Ateleia por padrão
+- ✅ **Standalone** - Componente independente sem dependências
+- ✅ **Otimizado** - Apenas renderiza se `product` estiver preenchido
+- ✅ **Nomeação automática** - Converte nome do produto para nome do arquivo
+- ✅ **Alt text automático** - Acessibilidade garantida
+
+## Informações Técnicas
+
+| Propriedade | Valor |
+|------------|-------|
+| **Dimensão** | 150px de largura (responsiva) |
+| **Formato** | SVG |
+| **URL Padrão** | `https://ateleia-email.s3-sa-east-1.amazonaws.com/` |
+| **Template** | `logo-linha-{produto}.svg` |
+| **Renderização** | Condicional (*ngIf product !== '') |
+
+## Instalação
+
+O componente já está disponível no módulo `TCloudUiModule`:
+
+```typescript
+import { TCloudUiModule } from 'projects/tcloud-ui/src/public-api';
+
+@NgModule({
+  imports: [TCloudUiModule]
+})
+export class MyModule { }
+```
+
+Ou importar direto como component standalone:
+
+```typescript
+import { TCloudUiLinhaLogoComponent } from 'projects/tcloud-ui/src/lib/_modules/tcloud-ui-linha-logo/tcloud-ui-linha-logo.component';
+
+@Component({
+  imports: [TCloudUiLinhaLogoComponent]
+})
+export class MyComponent { }
+```
+
+## Uso Básico
+
+### Exemplo Simples - Logo do Protheus
+
+```typescript
+@Component({
+  selector: 'app-product-logo',
+  standalone: true,
+  imports: [TCloudUiLinhaLogoComponent],
+  template: `<tcloud-ui-linha-logo [product]="'protheus'"></tcloud-ui-linha-logo>`
+})
+export class ProductLogoComponent { }
+```
+
+**Resultado HTML:**
+```html
+<div class="tcloud-ui-linha-logo logo-product">
+  <img class="img-logo" 
+       src="https://ateleia-email.s3-sa-east-1.amazonaws.com/logo-linha-protheus.svg"
+       alt="PROTHEUS">
+</div>
+```
+
+### Exemplo com Propriedade Binária
+
+```typescript
+@Component({
+  selector: 'app-my-component',
+  standalone: true,
+  imports: [CommonModule, TCloudUiLinhaLogoComponent],
+  template: `
+    <tcloud-ui-linha-logo [product]="selectedProduct"></tcloud-ui-linha-logo>
+    <button (click)="changeProduct('rm')">Mudar para RM</button>
+  `
+})
+export class MyComponent {
+  selectedProduct: string = 'protheus';
+
+  changeProduct(product: string) {
+    this.selectedProduct = product;
+  }
+}
+```
+
+### Exemplo com URL Customizada
+
+```typescript
+@Component({
+  standalone: true,
+  imports: [TCloudUiLinhaLogoComponent],
+  template: `
+    <tcloud-ui-linha-logo 
+      [product]="'fluig'"
+      [url]="'https://seu-servidor.com/logos/'">
+    </tcloud-ui-linha-logo>
+  `
+})
+export class CustomUrlComponent {
+  // Renderizará: https://seu-servidor.com/logos/logo-linha-fluig.svg
+}
+```
+
+### Exemplo Avançado - Grid de Produtos
+
+```typescript
+@Component({
+  selector: 'app-product-grid',
+  standalone: true,
+  imports: [CommonModule, TCloudUiLinhaLogoComponent],
+  template: `
+    <div class="product-grid">
+      <div class="product-item" *ngFor="let product of products">
+        <tcloud-ui-linha-logo 
+          [product]="product"
+          (click)="selectProduct(product)">
+        </tcloud-ui-linha-logo>
+        <p class="product-label">{{ product | titlecase }}</p>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .product-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: 20px;
+      padding: 20px;
+    }
+    .product-item {
+      text-align: center;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    .product-item:hover {
+      transform: scale(1.05);
+    }
+    .product-label {
+      margin-top: 10px;
+      font-weight: 600;
+      color: #333;
+    }
+  `]
+})
+export class ProductGridComponent {
+  products = ['protheus', 'rm', 'fluig', 'datasul', 'consinco'];
+
+  selectProduct(product: string) {
+    console.log('Produto selecionado:', product);
+  }
+}
+```
+
+## API
+
+### Componente: `tcloud-ui-linha-logo`
+
+#### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-----------|------|--------|-----------|-----------|
+| `product` | `string` | `''` | ❌ | Nome do produto (ex: 'protheus', 'rm') |
+| `url` | `string` | AWS S3 Ateleia | ❌ | URL base para os logos SVG |
+
+#### Propriedades Internas (somente leitura)
+
+| Propriedade | Tipo | Descrição |
+|-----------|------|-----------|
+| `logo_name` | `string` | Nome do arquivo gerado (ex: 'logo-linha-protheus') |
+| `product_name` | `string` | Nome do produto formatado (utilizado internamente) |
+| `alt_product_name` | `string` | Nome em UPPERCASE para atributo alt da imagem |
+| `font_size` | `string` | Tamanho da fonte (legado, não utilizado na renderização atual) |
+
+## Lógica de Processamento
+
+### 1. Transformação de Nome do Produto
+
+O componente converte o nome do produto para o nome do arquivo:
+
+```typescript
+// Entrada e transformação
+'protheus'        → 'logo-linha-protheus'
+'rm'              → 'logo-linha-rm'
+'fluig'           → 'logo-linha-fluig'
+'datasul_grande'  → 'logo-linha-datasul-grande'  // underscores → hífens
+'RM'              → 'logo-linha-rm'               // maiúsculas → minúsculas
+```
+
+**Método:** `getLogoName()`
+- Substitui `_` por `-`
+- Converte para minúsculas
+- Prepend `logo-linha-`
+
+```typescript
+export class MyComponent {
+  product: string = 'rm';
+  customUrl: string = 'https://seu-dominio.com/logos/';
+}
+```
+
+```html
+<tcloud-ui-linha-logo 
+  [product]="product"
+  [url]="customUrl">
+</tcloud-ui-linha-logo>
+```
+
+### Exemplo Avançado - Múltiplos Produtos
+
+```typescript
+export class MyComponent {
+  produtos: string[] = [
+    'protheus',
+    'rm',
+    'fluig',
+    'datasul',
+    'consinco',
+    'winthor',
+    'taf',
+    'tss',
+    'license'
+  ];
+
+  customUrl: string = 'https://ateleia-email.s3-sa-east-1.amazonaws.com/';
+}
+```
+
+```html
+<div class="logo-grid">
+  <tcloud-ui-linha-logo 
+    *ngFor="let produto of produtos"
+    [product]="produto"
+    [url]="customUrl">
+  </tcloud-ui-linha-logo>
+</div>
+```
+
+## API
+
+### Componente: `tcloud-ui-linha-logo`
+
+#### Inputs
+
+| Propriedade | Tipo | Padrão | Descrição |
+|-----------|------|--------|-----------|
+| `product` | `string` | `''` | Nome do produto (obrigatório) |
+| `url` | `string` | AWS S3 padrão | URL base para as imagens SVG |
+
+#### Saídas
+
+Nenhuma saída de evento.
+
+#### Propriedades Internas
+
+| Propriedade | Tipo | Descrição |
+|-----------|------|-----------|
+| `logo_name` | `string` | Nome do arquivo do logo gerado |
+| `product_name` | `string` | Nome do produto formatado |
+| `alt_product_name` | `string` | Nome do produto em UPPERCASE para alt text |
+| `font_size` | `string` | Tamanho da fonte calculado dinamicamente |
+
+## Comportamento Detalhado
+
+### Nomeação de Logo
+
+O componente converte o `product` para o nome do arquivo:
+
+```typescript
+// Entrada: 'protheus'
+// Nome gerado: 'logo-linha-protheus'
+// URL final: '{url}logo-linha-protheus.svg'
+```
+
+Conversões realizadas:
+- Underscores (`_`) são convertidos para hífens (`-`)
+- Tudo é convertido para minúsculas
+- Prefixo `logo-linha-` é adicionado
+
+### Dimensionamento Automático
+
+O `font_size` é calculado baseado no comprimento do nome do produto:
+
+| Comprimento | Tamanho | Cálculo |
+|------------|--------|---------|
+| ≤ 8 caracteres | 28px | Tamanho padrão |
+| 9-12 caracteres | 28px | Tamanho padrão |
+| 13-15 caracteres | ~19-24px | 28 - (28 * (5 + len*2) / 100) |
+| > 15 caracteres | ~16-22px | 28 - (28 * (10 + len*2) / 100) |
+
+Exemplo:
+```
+- 'protheus' (8 chars) → 28px
+- 'fluig' (5 chars) → 28px
+- 'consinco' (8 chars) → 28px
+- 'winthor_super_mega_produto' (26 chars) → reduzido dinamicamente
+```
+
+### Estrutura HTML Renderizada
+
+```html
+<div class="tcloud-ui-linha-logo logo-product">
+  <img class="img-logo" 
+       data-name-image="logo-linha-protheus"
+       src="https://ateleia-email.s3-sa-east-1.amazonaws.com/logo-linha-protheus.svg"
+       alt="PROTHEUS">
+</div>
+```
+
+## Exemplos Práticos
+
+### 1. Seletor de Produtos com Logo
+
+```typescript
+@Component({
+  selector: 'app-product-selector',
+  standalone: true,
+  imports: [CommonModule, TCloudUiLinhaLogoComponent],
+  template: `
+    <div class="product-selector">
+      <h2>Escolha um Produto</h2>
+      <div class="products-grid">
+        <div class="product-card" *ngFor="let prod of availableProducts">
+          <tcloud-ui-linha-logo [product]="prod"></tcloud-ui-linha-logo>
+          <p class="product-name">{{ prod | titlecase }}</p>
+          <button (click)="selectProduct(prod)">Selecionar</button>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class ProductSelectorComponent {
+  availableProducts = ['protheus', 'rm', 'fluig', 'datasul'];
+
+  selectProduct(product: string) {
+    console.log('Produto selecionado:', product);
+  }
+}
+```
+
+### 2. Logo em Header com Branding
+
+```typescript
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [CommonModule, TCloudUiLinhaLogoComponent],
+  template: `
+    <header class="app-header">
+      <div class="logo-section">
+        <img src="/assets/totvs-logo.svg" alt="TOTVS" class="main-logo">
+        <div class="product-line">
+          <span class="line-text">Linha</span>
+          <tcloud-ui-linha-logo [product]="currentProduct"></tcloud-ui-linha-logo>
+        </div>
+      </div>
+      <nav class="navigation">
+        <!-- Navegação aqui -->
+      </nav>
+    </header>
+  `,
+  styles: [`
+    .app-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border-bottom: 1px solid #ddd;
+    }
+    .logo-section {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+    .main-logo {
+      height: 40px;
+    }
+    .product-line {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  `]
+})
+export class HeaderComponent {
+  currentProduct = 'protheus';
+}
+```
+
+### 3. Tooltip com Logo
+
+```typescript
+@Component({
+  selector: 'app-logo-tooltip',
+  standalone: true,
+  imports: [CommonModule, TCloudUiLinhaLogoComponent, NgFor],
+  template: `
+    <div class="logo-display">
+      <tcloud-ui-linha-logo 
+        [product]="selectedProduct"
+        (mouseenter)="showInfo = true"
+        (mouseleave)="showInfo = false">
+      </tcloud-ui-linha-logo>
+      
+      <div class="tooltip" *ngIf="showInfo">
+        <p><strong>Produto:</strong> {{ selectedProduct | uppercase }}</p>
+        <p><strong>URL:</strong> {{ baseUrl }}logo-linha-{{ selectedProduct }}.svg</p>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .logo-display {
+      position: relative;
+      display: inline-block;
+    }
+    .tooltip {
+      position: absolute;
+      bottom: 100%;
+      left: 0;
+      background: #333;
+      color: white;
+      padding: 12px;
+      border-radius: 4px;
+      white-space: nowrap;
+      font-size: 12px;
+    }
+  `]
+})
+export class LogoTooltipComponent {
+  selectedProduct = 'fluig';
+  baseUrl = 'https://ateleia-email.s3-sa-east-1.amazonaws.com/';
+  showInfo = false;
+}
+```
+
+## Produtos Suportados
+
+Os seguintes produtos têm logos disponíveis na AWS S3:
+
+- ✅ `protheus` - Protheus
+- ✅ `rm` - RM
+- ✅ `fluig` - Fluig
+- ✅ `datasul` - Datasul
+- ✅ `consinco` - Consinco
+- ✅ `winthor` - Winthor
+- ✅ `taf` - TAF (Tax)
+- ✅ `tss` - TSS
+- ✅ `license` - License Manager
+
+## Customização de URL
+
+Se você quiser hospedar os logos em seu próprio servidor:
+
+```typescript
+const customBaseUrl = 'https://seu-servidor.com/logos/';
+
+@Component({
+  template: `
+    <tcloud-ui-linha-logo 
+      product="protheus"
+      [url]="customBaseUrl">
+    </tcloud-ui-linha-logo>
+  `
+})
+export class MyComponent {
+  customBaseUrl = customBaseUrl;
+}
+```
+
+**Importante:** Os arquivos SVG devem estar nomeados como:
+- `logo-linha-{produto}.svg`
+
+Exemplo: `logo-linha-protheus.svg`, `logo-linha-rm.svg`, etc.
+
+## Tratamento de Erros
+
+### Produto Vazio
+
+Se `product` estiver vazio, o componente não renderiza nada:
+
+```html
+<!-- Isso não renderiza nada -->
+<tcloud-ui-linha-logo product=""></tcloud-ui-linha-logo>
+
+<!-- Valide antes de usar -->
+<tcloud-ui-linha-logo *ngIf="product" [product]="product"></tcloud-ui-linha-logo>
+```
+
+### Arquivo Não Encontrado
+
+Se o arquivo SVG não existir, o navegador exibirá um ícone de erro:
+
+```typescript
+// Certifique-se de que os arquivos existem em:
+// {url}logo-linha-{produto}.svg
+```
+
+## Boas Práticas
+
+1. **Sempre trate produtos vazios** com `*ngIf`
+2. **Use URLs HTTPS** para evitar avisos de segurança
+3. **Mantenha nomes de produtos consistentes** (minúsculas, sem espaços)
+4. **Armazene em cache** se usar URL customizada
+5. **Forneça alt text** válido (feito automaticamente)
+
+## Styling
+
+Para customizar a aparência:
+
+```scss
+// Estilo global
+.tcloud-ui-linha-logo {
+  &.logo-product {
+    .img-logo {
+      max-width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+}
+
+// Ou no escopo do componente
+:host {
+  --logo-max-width: 200px;
+  --logo-height: auto;
+}
+```
+
+## Troubleshooting
+
+| Problema | Solução |
+|----------|---------|
+| Logo não aparece | Verifique se `product` não está vazio |
+| URL 404 | Confirme que o arquivo SVG existe no caminho correto |
+| Logo muito pequeno/grande | Ajuste via CSS ou verifique o comprimento do nome |
+| Imagem quebrada | Verifique a URL base e a conexão com a internet |
+
+## Versionamento
+
+| Versão | Data | Mudanças |
+|--------|------|----------|
+| 1.0.0 | 2026-02-12 | Versão inicial com suporte a logos de linha |
+
+## Licença
+
+Parte do TCloud UI Component Library

package/docs/tcloud-ui-loading.md

@@ -0,0 +1,88 @@
+# Loading
+
+## Características
+- Indicador de carregamento standalone com suportes: ícone isolado, inline e overlay (parcial ou full-screen).
+- Modo `mode` auxilia conveniência: `icon` ativa `onlyIcon`; `inline` ativa `onlyInline`.
+- Suporta múltiplos tipos de animação através da propriedade `gif`: `'circle'` (spinner) ou `'totvs'` (logo TOTVS animado).
+- Permite sobrepor container relativo ou tela inteira (`full=true`).
+- Componentes internos: `tcloud-ui-circle` (default) e `tcloud-ui-totvs` disponíveis.
+- Independente de z-index ou posicionamento, o overlay se ajusta ao contexto do container pai.
+
+## Instalação
+```ts
+import { TCloudUiLoadingComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiLoadingComponent],
+  template: `<tcloud-ui-loading [loading]="true"></tcloud-ui-loading>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| gif | 'totvs' \| 'circle' | Define o tipo de animação exibida. `'circle'` = spinner circular; `'totvs'` = logo TOTVS animado. | 'circle' |
+| mode | string | Conveniência: `'icon'` força `onlyIcon=true`; `'inline'` força `onlyInline=true`. | '' |
+| onlyInline | boolean | Mostra loader inline (conteúdo compacto). | false |
+| onlyIcon | boolean | Mostra apenas o ícone (mini). | false |
+| full | boolean | Mostra overlay em tela cheia. | false |
+| loading | boolean | Controla exibição do loader. | false |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| (não possui) | - | Componente não emite eventos. |
+
+## Exemplos de Uso
+### Uso Básico (overlay padrão)
+```html
+<tcloud-ui-loading [loading]="loading"></tcloud-ui-loading>
+<button type="button" (click)="loading = true">Start</button>
+```
+
+### Com animação TOTVS
+```html
+<tcloud-ui-loading [loading]="true" [gif]="'totvs'"></tcloud-ui-loading>
+```
+
+### Ícone isolado
+```html
+<tcloud-ui-loading [loading]="true" [onlyIcon]="true"></tcloud-ui-loading>
+<!-- ou -->
+<tcloud-ui-loading [loading]="true" mode="icon"></tcloud-ui-loading>
+```
+
+### Ícone isolado com TOTVS
+```html
+<tcloud-ui-loading [loading]="true" [onlyIcon]="true" [gif]="'totvs'"></tcloud-ui-loading>
+```
+
+### Inline
+```html
+<tcloud-ui-loading [loading]="true" [onlyInline]="true"></tcloud-ui-loading>
+<!-- ou -->
+<tcloud-ui-loading [loading]="true" mode="inline"></tcloud-ui-loading>
+```
+
+### Inline com TOTVS
+```html
+<tcloud-ui-loading [loading]="true" [onlyInline]="true" [gif]="'totvs'"></tcloud-ui-loading>
+```
+
+### Full-screen
+```html
+<tcloud-ui-loading [loading]="loadingFull" [full]="true"></tcloud-ui-loading>
+<button type="button" (click)="loadingFull = true">Start full</button>
+```
+
+### Dentro de container relativo
+```html
+<div style="position: relative; width: 200px; height: 120px;">
+  <tcloud-ui-loading [loading]="loadingRelative"></tcloud-ui-loading>
+</div>
+<button type="button" (click)="loadingRelative = true">Start</button>
+```