ngx-opalbytes-components 1.19.0 → 1.20.0

package/README.md

@@ -72,6 +72,59 @@ export class ExemploComponent {
 
 ---
 
+## Comandos CLI
+
+A biblioteca disponibiliza uma CLI (`cao-comp`) para copiar o código-fonte de um componente da `ngx-opalbytes-components` para qualquer projeto. Isso é útil quando você precisa customizar o código-fonte de um componente internamente, sem depender apenas da API pública.
+
+### Instalação global
+
+Para utilizar o comando `cao-comp` de qualquer lugar, instale a biblioteca globalmente:
+
+```bash
+npm install -g ngx-opalbytes-components
+```
+
+Para desenvolvimento local, a partir da pasta `projects/ngx-opalbytes-components`:
+
+```bash
+npm link
+```
+
+> Caso não queira instalar, também é possível executar o script diretamente:
+> `node ./node_modules/ngx-opalbytes-components/cli/cao-comp.cjs ...`
+
+### Uso
+
+```bash
+cao-comp <componente> <destino> [opcoes]
+```
+
+**Argumentos:**
+
+| Argumento | Descrição |
+| --- | --- |
+| `<componente>` | Nome da pasta do componente em `shared/components` (ex: `base-button`). |
+| `<destino>` | Pasta de destino onde os arquivos serão gerados (criada se não existir). |
+
+**Opções:**
+
+| Opção | Descrição |
+| --- | --- |
+| `-h, --help` | Exibe a ajuda. |
+| `-l, --list` | Lista os componentes disponíveis para cópia. |
+| `-f, --force` | Sobrescreve arquivos existentes no destino. |
+| `-v, --version` | Exibe a versão. |
+
+**Exemplos:**
+
+```bash
+cao-comp base-button ./src/app/components
+cao-comp stepper ./src/app/components --force
+cao-comp --list
+```
+
+---
+
 ## Organização de Pastas
 
 Dentro da pasta `src/lib/`, os componentes são organizados em `shared/components/` e cada componente reside em sua própria pasta, contendo seus arquivos (`.ts`, `.html`, `.css`, `.spec.ts`).
@@ -89,6 +142,7 @@ src/
         |   ├── base-toggle/
         |   ├── drop-down/
         |   ├── footer/
+        |   ├── kpi/
         |   ├── links-button/
         |   ├── paginator/
         |   ├── stepper/
@@ -816,6 +870,55 @@ Um rodapé simples para a aplicação.
 
 ---
 
+### `CaoKpi`
+
+Um componente de KPI (Key Performance Indicator) que exibe um cartão com ícone, valor, título, cor de texto e cor de borda configuráveis.
+
+**Seletor:** `<cao-kpi>`
+
+**Interface `ICaoKPI`**
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `title` | `string` | O título do KPI. |
+| `value` | `string` | O valor exibido (ex: `"R$ 12.345"`). |
+| `textColor` | `string` | Cor do texto (valor e título). |
+| `borderColor` | `string` | Cor da borda do cartão. |
+| `icon` | `ICaoImage` | O ícone exibido no canto superior direito. |
+
+**Interface `ICaoImage`**
+
+| Propriedade | Tipo | Descrição |
+| --- | --- | --- |
+| `src` | `string` | Caminho ou URL da imagem do ícone. |
+| `alt` | `string` | Texto alternativo (acessibilidade) da imagem. |
+
+**Atributos (Inputs)**
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `kpiData` | `ICaoKPI` | — (obrigatório) | Dados do KPI, recebidos via `input.required`. |
+
+**Exemplo de uso:**
+
+```html
+<cao-kpi [kpiData]="meuKpi"></cao-kpi>
+```
+
+```typescript
+import { CaoKpi, ICaoKPI } from 'ngx-opalbytes-components';
+
+meuKpi: ICaoKPI = {
+  title: 'Total de Vendas',
+  value: 'R$ 12.345',
+  textColor: '#16a34a',
+  borderColor: '#16a34a',
+  icon: { src: 'assets/icon-vendas.svg', alt: 'Vendas' }
+};
+```
+
+---
+
 ### `LinksButton`
 Exibe uma lista de links de navegação como botões.
 

package/cli/cao-comp.cjs

@@ -0,0 +1,186 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const USAGE = `cao-comp — Copia um componente da lib ngx-opalbytes-components para qualquer projeto
+
+Uso:
+  cao-comp <componente> <destino> [opcoes]
+
+Argumentos:
+  <componente>   Nome da pasta do componente em shared/components (ex: base-button)
+  <destino>      Pasta de destino onde os arquivos serao gerados (criada se nao existir)
+
+Opcoes:
+  -h, --help      Exibe esta ajuda
+  -l, --list      Lista os componentes disponiveis para copia
+  -f, --force     Sobrescreve arquivos existentes no destino
+  -v, --version   Exibe a versao
+
+Exemplos:
+  cao-comp base-button ./src/app/components
+  cao-comp stepper ./src/app/components --force
+  cao-comp --list
+`;
+
+function resolveTemplatesDir() {
+  const candidates = [
+    path.join(__dirname, '..', 'templates'),
+    path.join(__dirname, '..', 'src', 'lib', 'shared', 'components'),
+    path.join(__dirname, '..', '..', 'src', 'lib', 'shared', 'components'),
+  ];
+  for (const dir of candidates) {
+    if (fs.existsSync(dir) && fs.statSync(dir).isDirectory()) {
+      return dir;
+    }
+  }
+  return null;
+}
+
+function resolvePackageVersion() {
+  const candidates = [
+    path.join(__dirname, '..', 'package.json'),
+    path.join(__dirname, '..', '..', 'package.json'),
+    path.join(__dirname, '..', '..', '..', 'package.json'),
+  ];
+  for (const file of candidates) {
+    if (fs.existsSync(file)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(file, 'utf8'));
+        if (pkg && pkg.version) {
+          return pkg.version;
+        }
+      } catch (_) {
+        /* ignore */
+      }
+    }
+  }
+  return 'desconhecida';
+}
+
+function listComponents(templatesDir) {
+  return fs
+    .readdirSync(templatesDir, { withFileTypes: true })
+    .filter((e) => e.isDirectory())
+    .map((e) => e.name)
+    .sort();
+}
+
+function copyRecursive(src, dest, force, conflicts) {
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyRecursive(srcPath, destPath, force, conflicts);
+    } else {
+      if (fs.existsSync(destPath) && !force) {
+        conflicts.push(destPath);
+        continue;
+      }
+      fs.mkdirSync(path.dirname(destPath), { recursive: true });
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function parseArgs(argv) {
+  const positionals = [];
+  const flags = { help: false, list: false, force: false, version: false };
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    switch (arg) {
+      case '-h':
+      case '--help':
+        flags.help = true;
+        break;
+      case '-l':
+      case '--list':
+        flags.list = true;
+        break;
+      case '-f':
+      case '--force':
+        flags.force = true;
+        break;
+      case '-v':
+      case '--version':
+        flags.version = true;
+        break;
+      default:
+        positionals.push(arg);
+    }
+  }
+  return { positionals, flags };
+}
+
+function main() {
+  const argv = process.argv.slice(2);
+  const { positionals, flags } = parseArgs(argv);
+
+  if (flags.help) {
+    process.stdout.write(USAGE + '\n');
+    return 0;
+  }
+
+  if (flags.version) {
+    process.stdout.write(`cao-comp ${resolvePackageVersion()}\n`);
+    return 0;
+  }
+
+  const templatesDir = resolveTemplatesDir();
+  if (!templatesDir) {
+    process.stderr.write(
+      'Erro: nao foi possivel localizar a pasta de templates dos componentes.\n'
+    );
+    return 1;
+  }
+
+  if (flags.list) {
+    const components = listComponents(templatesDir);
+    process.stdout.write('Componentes disponiveis:\n');
+    for (const c of components) {
+      process.stdout.write(`  - ${c}\n`);
+    }
+    return 0;
+  }
+
+  const [component, destination] = positionals;
+  if (!component || !destination) {
+    process.stderr.write(
+      'Erro: informe o componente e o destino.\n\n' + USAGE + '\n'
+    );
+    return 1;
+  }
+
+  const sourceDir = path.join(templatesDir, component);
+  if (!fs.existsSync(sourceDir) || !fs.statSync(sourceDir).isDirectory()) {
+    const available = listComponents(templatesDir).join(', ');
+    process.stderr.write(
+      `Erro: componente "${component}" nao encontrado.\n` +
+        `Componentes disponiveis: ${available}\n`
+    );
+    return 1;
+  }
+
+  fs.mkdirSync(destination, { recursive: true });
+  const conflicts = [];
+  copyRecursive(sourceDir, destination, flags.force, conflicts);
+
+  if (conflicts.length) {
+    process.stderr.write(
+      `Erro: os seguintes arquivos ja existem no destino (use --force para sobrescrever):\n` +
+        conflicts.map((c) => `  - ${c}`).join('\n') +
+        '\n'
+    );
+    return 1;
+  }
+
+  process.stdout.write(
+    `Componente "${component}" copiado para "${destination}".\n`
+  );
+  return 0;
+}
+
+process.exit(main());

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, Injectable } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, Injectable } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -75,6 +75,7 @@ class CaoBaseButtonComponent {
     iconColor;
     strokeWidthIcon = 1;
     minTextToTooltip = 20;
+    iconSize = 24;
     ngOnInit() {
         if (!this.dataCy) {
             this.dataCy = `btn-${this.buttonText.replace(/\s+/g, '-').toLowerCase()}`;
@@ -89,11 +90,11 @@ class CaoBaseButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon", minTextToTooltip: "minTextToTooltip" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon", minTextToTooltip: "minTextToTooltip", iconSize: "iconSize" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "cao-button", imports: [CommonModule, MatTooltipModule, LucideDynamicIcon], template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
+            args: [{ standalone: true, selector: "cao-button", imports: [CommonModule, MatTooltipModule, LucideDynamicIcon], template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
         }], propDecorators: { buttonClick: [{
                 type: Output
             }], buttonText: [{
@@ -122,6 +123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], minTextToTooltip: [{
                 type: Input
+            }], iconSize: [{
+                type: Input
             }] } });
 
 class CaoBaseInput {
@@ -373,6 +376,7 @@ class CaoAutocompleteComponent {
     strokeWidthIcon = 1;
     isDisabled = false;
     inputHeigth = '50px';
+    iconSize = 24;
     checkIcon = '✓';
     showCheckIcon = true;
     isLucideCheckIcon = false;
@@ -768,13 +772,13 @@ class CaoAutocompleteComponent {
         this.renderer.setStyle(this.el.nativeElement, "--form-field-height", this.inputHeigth);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled", inputHeigth: "inputHeigth", checkIcon: "checkIcon", showCheckIcon: "showCheckIcon", isLucideCheckIcon: "isLucideCheckIcon" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled", inputHeigth: "inputHeigth", iconSize: "iconSize", checkIcon: "checkIcon", showCheckIcon: "showCheckIcon", isLucideCheckIcon: "isLucideCheckIcon" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CaoAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [style.width]=\"iconSize\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [style.width]=\"iconSize\"  [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
             type: Component,
@@ -790,7 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useExisting: forwardRef(() => CaoAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"] }]
+                    ], template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [style.width]=\"iconSize\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [style.width]=\"iconSize\"  [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -825,6 +829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], inputHeigth: [{
                 type: Input
+            }], iconSize: [{
+                type: Input
             }], checkIcon: [{
                 type: Input
             }], showCheckIcon: [{
@@ -1862,6 +1868,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }] } });
 
+class CaoKpi {
+    kpiData = input.required(...(ngDevMode ? [{ debugName: "kpiData" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoKpi, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoKpi, isStandalone: true, selector: "cao-kpi", inputs: { kpiData: { classPropertyName: "kpiData", publicName: "kpiData", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"flex flex-col py-2 pt-2.25 px-3.75 rounded-card border-b w-46.25 bg-(--color-white)\"\n  [style.border-color]=\"kpiData().borderColor\">\n  <div class=\"flex w-full justify-end\">\n    <img class=\"w-6 h-6 mr-2\" [src]=\"kpiData().icon.src\" [alt]=\"kpiData().icon.alt\" />\n  </div>\n  <div class=\"flex flex-col pl-1.5\">\n    <p class=\"text-2xl\" [style.color]=\"kpiData().textColor\">{{ kpiData().value }}</p>\n    <h3 class=\"text-base\" [style.color]=\"kpiData().textColor\">{{ kpiData().title }}</h3>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoKpi, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-kpi", imports: [CommonModule], standalone: true, template: "<div\n  class=\"flex flex-col py-2 pt-2.25 px-3.75 rounded-card border-b w-46.25 bg-(--color-white)\"\n  [style.border-color]=\"kpiData().borderColor\">\n  <div class=\"flex w-full justify-end\">\n    <img class=\"w-6 h-6 mr-2\" [src]=\"kpiData().icon.src\" [alt]=\"kpiData().icon.alt\" />\n  </div>\n  <div class=\"flex flex-col pl-1.5\">\n    <p class=\"text-2xl\" [style.color]=\"kpiData().textColor\">{{ kpiData().value }}</p>\n    <h3 class=\"text-base\" [style.color]=\"kpiData().textColor\">{{ kpiData().title }}</h3>\n  </div>\n</div>\n" }]
+        }], propDecorators: { kpiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "kpiData", required: true }] }] } });
+
 class BaseModalService {
     constructor() { }
     toggleModalEvent = new EventEmitter();
@@ -2987,5 +3003,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoDropDownComponent, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoDropDownComponent, CaoKpi, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map