ngx-opalbytes-components 1.22.0 → 1.23.0

package/README.md

@@ -125,6 +125,104 @@ cao-comp --list
 
 ---
 
+## Quando usar `cao-comp` vs. a biblioteca (`npm install`)
+
+A `ngx-opalbytes-components` pode ser consumida de duas formas distintas, e cada uma atende a necessidades diferentes:
+
+- **Usar o pacote (`npm install ngx-opalbytes-components`)** — você consome a **API pública** dos componentes, como qualquer dependência externa. O código vive dentro do `node_modules`, é versionado e atualizado por você (ou pela própria biblioteca). A biblioteca funciona como uma "caixa preta": você usa os `@Input`s, `@Output`s e métodos que ela expõe, mas não altera o comportamento interno.
+- **Copiar o código-fonte (`cao-comp`)** — você copia o fonte de um componente para dentro do **seu próprio projeto**. A partir daí o componente deixa de ser gerenciado pela biblioteca e se torna **seu código**, com total liberdade de edição (template, estilos, lógica e eventos). A biblioteca funciona como uma "caixa aberta": você passa a ter a posse daquele componente.
+
+A escolha entre uma abordagem e outra não é sobre "qual é melhor", mas sobre **o quanto você precisa de controle sobre o componente**.
+
+### Tabela comparativa
+
+| Critério | `cao-comp` (copiar o código) | `npm install` (usar a lib) |
+| --- | --- | --- |
+| **Explorar/visualizar componentes e inputs** | Ideal — gera o setup de **Storybook** para navegar os componentes e seus `@Input`s/`@Output`s. | Não oferece isso diretamente — a visualização depende de documentação ou de você montar Storybook por conta própria. |
+| **Grau de customização** | Total — você edita template, CSS e lógica internos. | Limitado à API pública (`@Input`/`@Output`/métodos expostos). |
+| **Estratégia de extensão** | Modificar o comportamento interno do componente (fork). | Compor/envolver o componente com a estrutura da lib (ex.: estender `AlertService`/`DialogService` via `generateComponentPortal()`). |
+| **Volume de inputs/eventos para repassar** | Baixo — você edita onde precisa, sem re-expor dezenas de `@Input`s de um wrapper. | Alto em wrappers — cada `@Input`/`@Output` que você quiser repassar precisa ser declarado e repassado manualmente no componente que envolve o da lib. |
+| **Atualização / manutenção** | **Não** acompanha a lib — o código vira seu; correções e novas versões precisam ser reaplicadas à mão. | Acompanha a lib — `npm update`/`npm install` entrega fixes, features e novas versões automaticamente. |
+| **Consistência entre projetos** | Divisão de risco — cada projeto pode divergir do padrão visual/lógico da lib. | Alta consistência — todos os projetos usam a mesma versão publicada. |
+| **Testes, acessibilidade e qualidade** | Ficam sob responsabilidade do time local após o fork. | Já prontos e centralizados (testes, a11y e convenções da lib). |
+| **Ownership do código** | Seu projeto assume a posse e a responsabilidade do componente. | A biblioteca mantém a responsabilidade da manutenção. |
+
+### Use `cao-comp` quando:
+
+- **Precisar visualizar** os componentes existentes e seus inputs **antes** de usá-los — o `cao-comp storybook` gera o setup mínimo para explorar tudo visualmente.
+- A customização **escapa da API pública** — por exemplo, alterar estilização, atributos, funcionalidades ou eventos que só existem no código-fonte do componente (ex.: um **tooltip customizável** que o componente base não expõe como input).
+- Você **não quer estender** um componente a partir do componente da lib (isso costuma gerar wrappers frágeis), mas sim **modificar o componente em si**.
+- Quer **reduzir o trabalho de repassar todos os `@Input`s e `@Output`s** de um componente pai para um componente da lib — em vez de declarar e propagar dezenas de entradas/saídas, você edita o componente diretamente.
+- O componente funcionará como um **fork**: você quer posse total do código e **não precisa** acompanhar as versões da biblioteca (seja por questão de isolamento, build offline ou regra de não instalar a dependência).
+- Um componente da lib já expõe boa parte, **mas** atende a um caso tão específico do seu domínio que a manutenção local é mais simples do que manter um wrapper enorme.
+
+### Use `npm install` (a lib) quando:
+
+- Quiser ter **sempre a versão mais atualizada** da biblioteca, com fixes e melhorias centralizados.
+- **Não precisar visualizar** os componentes existentes em detalhe — a API pública e a documentação já são suficientes.
+- Pretender usar **somente os eventos e atributos** expostos, **criando componentes que estendem/compoem a estrutura da lib** — por exemplo `AlertService`/`DialogService` (veja a seção "Como estender o `AlertService`" e "Como estender o `DialogService`" abaixo), que permitem customizar a aparência mantendo o consumo via npm, sem precisar copiar fonte nenhum.
+- O componente pronto (com a API atual) já atende ao caso, e você valoriza testes, acessibilidade e padrão visual já validados.
+- Precisar de **consistência visual e de comportamento entre múltiplos projetos** — todos passam a usar a mesma versão publicada e atualizada.
+
+### Prós e contras
+
+**`cao-comp` (copiar o código)**
+
+- ✅ Liberdade total de edição (template, estilos, lógica, eventos).
+- ✅ Sem custo de repasse de dezenas de `@Input`s/`@Output`s.
+- ✅ Visualização imediata via Storybook.
+- ❌ O código vira seu: **não** recebe atualizações/fixes da lib automaticamente.
+- ❌ Código duplicado: a cópia pode divergir da lib com o tempo.
+- ❌ Testes, a11y e manutenção passam a ser responsabilidade do seu time.
+
+**`npm install` (a lib)**
+
+- ✅ Sempre atualizado (`npm update`/`npm install`).
+- ✅ Testes, acessibilidade e convenções já prontas e centralizadas.
+- ✅ Consistência entre projetos e equipas.
+- ❌ Limitado à API pública (sem alterar comportamento interno).
+- ❌ Wrappers para mais inputs/eventos podem crescer muito.
+- ❌ Sem visualização direta dos componentes (depende de docs/Storybook próprio).
+
+### Exemplo prático — quando vale usar `cao-comp`
+
+Suponha que sua aplicação precise de um `<cao-input>` com um **tooltip mais elaborado** e um **layout interno específico** que a API pública do `BaseInput` não expõe. A API atual só oferece `tooltip` (texto simples), mas você precisa de tooltip customizada (com título, conteúdo rico e ícone) e de uma estrutura interna diferente.
+
+**Abordagem ruim (com a lib):** você cria um wrapper `AppInputComponent` que envolve `<cao-input>` e tenta "empacotar" todos os `@Input`s/`@Output`s do `BaseInput`, além de tentar replicar uma tooltip customizada que o componente interno nem sequer aceita. Resultado: muito código de repasse, frágil, e ainda assim sem atingir o layout interno desejado.
+
+**Abordagem boa (com `cao-comp`):**
+
+1. Explore os componentes disponíveis:
+   ```bash
+   cao-comp --list
+   ```
+2. Copie o fonte do componente para o seu projeto:
+   ```bash
+   cao-comp base-input ./src/app/components/base-input-custom
+   ```
+3. Gere o Storybook para visualizar e validar:
+   ```bash
+   cao-comp base-input ./src/app/components/base-input-custom
+   cao-comp storybook .
+   ```
+4. Edite diretamente o `template` e os estilos do componente copiado para incluir o novo layout e a tooltip customizada, e adicione os novos `@Input`s/`@Output`s que o seu caso precisa — sem repassar nada de um wrapper.
+
+Agora o componente copiado é seu, atende exatamente ao domínio da aplicação, e você validou visualmente via Storybook.
+
+### Checklist de decisão rápida
+
+- Preciso explorar os componentes e seus inputs (Storybook)? → **`cao-comp`**
+- A customização que preciso (estilo/comportamento/eventos) **não** está na API pública? → **`cao-comp`**
+- Quero modificar o componente em si, não apenas compor/estender? → **`cao-comp`**
+- Estou disposto a assumir a manutenção do código (sem updates automáticos)? → **`cao-comp`**
+- Prefiro sempre a versão mais atualizada e manutenção centralizada? → **`npm install`**
+- A API pública já atende (só uso eventos/atributos) e vou compor/extender a estrutura da lib? → **`npm install`**
+- Preciso de consistência visual/qualidade (testes, a11y) entre projetos? → **`npm install`**
+
+> **Importante quanto ao `cao-comp`:** ao copiar componentes, observe as **dependências internas**. Alguns componentes dependem de outros que precisam ser copiados juntos (ex.: `tab-group` depende de `tab-panel`, `stepper` depende de `step`; serviços que usam `ComponentPortal`, como `AlertService`/`DialogService`, precisam do componente correspondente). Além disso, o projeto de destino precisa ter as **peer dependencies** instaladas (`@angular/material`, `ngx-mask`, `@lucide/angular`, `@angular/cdk`) — o setup de Storybook gerado já orienta essa instalação.
+
+---
+
 ## 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`).

package/fesm2022/ngx-opalbytes-components.mjs

@@ -6,7 +6,7 @@ import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
 import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import * as i2$1 from '@angular/material/datepicker';
 import { MatDatepickerModule, MatDateRangeInput } from '@angular/material/datepicker';
@@ -1914,6 +1914,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'cao-skeleton', imports: [CommonModule], template: "<span class=\"cao-skeleton\" [ngClass]=\"'cao-skeleton--' + variant()\" [style]=\"skeletonStyles()\">\n  <span class=\"cao-skeleton__shimmer\"></span>\n</span>", styles: [":host{--skeleton-width: 100%;--skeleton-height: 100%;--skeleton-bg: #e2e8f0;--skeleton-shine: #f8fafc;--skeleton-radius: 14px;--skeleton-speed: 2s;--skeleton-animation-deg: 90deg;display:contents}.cao-skeleton{position:relative;display:block;overflow:hidden;width:var(--skeleton-width);height:var(--skeleton-height);background-color:var(--skeleton-bg);border-radius:var(--skeleton-radius);color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}@media(prefers-reduced-motion:no-preference){.cao-skeleton{will-change:transform}}.cao-skeleton--circle{--skeleton-radius: 50%;aspect-ratio:1 / 1}.cao-skeleton--text{--skeleton-radius: 4px;height:1em;width:var(--skeleton-width)}.cao-skeleton__shimmer{position:absolute;inset:0;background:linear-gradient(var(--skeleton-animation-deg),transparent 30%,var(--skeleton-shine) 50%,transparent 70%);background-size:200% 100%}@media(prefers-reduced-motion:no-preference){.cao-skeleton__shimmer{animation:skeleton-shimmer var(--skeleton-speed) ease-in-out infinite}}@keyframes skeleton-shimmer{0%{background-position:200% center}to{background-position:-200% center}}\n"] }]
         }], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], shine: [{ type: i0.Input, args: [{ isSignal: true, alias: "shine", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animationDeg: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDeg", required: false }] }] } });
 
+class CaoFormField extends CaoBaseIcon {
+    inputBackground = input(...(ngDevMode ? [undefined, { debugName: "inputBackground" }] : []));
+    borderColor = input(...(ngDevMode ? [undefined, { debugName: "borderColor" }] : []));
+    borderWidth = input(...(ngDevMode ? [undefined, { debugName: "borderWidth" }] : []));
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : []));
+    errorColor = input(...(ngDevMode ? [undefined, { debugName: "errorColor" }] : []));
+    labelColor = input(...(ngDevMode ? [undefined, { debugName: "labelColor" }] : []));
+    hintColor = input(...(ngDevMode ? [undefined, { debugName: "hintColor" }] : []));
+    textColor = input(...(ngDevMode ? [undefined, { debugName: "textColor" }] : []));
+    focusBorderColor = input(...(ngDevMode ? [undefined, { debugName: "focusBorderColor" }] : []));
+    successBorderColor = input(...(ngDevMode ? [undefined, { debugName: "successBorderColor" }] : []));
+    formFieldStyles = computed(() => {
+        const styles = {};
+        if (this.inputBackground()) {
+            styles['--cao-form-field-bg-background'] = this.inputBackground();
+        }
+        if (this.borderColor()) {
+            styles['--cao-form-field-border-color'] = this.borderColor();
+        }
+        if (this.borderWidth()) {
+            styles['--cao-form-field-border-width'] = this.borderWidth();
+        }
+        if (this.borderRadius()) {
+            styles['--cao-form-field-border-radius'] = this.borderRadius();
+        }
+        if (this.errorColor()) {
+            styles['--cao-form-field-color-error'] = this.errorColor();
+        }
+        if (this.labelColor()) {
+            styles['--cao-form-field-color-label'] = this.labelColor();
+        }
+        if (this.hintColor()) {
+            styles['--cao-form-field-color-hint'] = this.hintColor();
+        }
+        if (this.textColor()) {
+            styles['--cao-form-field-color-text'] = this.textColor();
+        }
+        if (this.focusBorderColor()) {
+            styles['--cao-form-field-focus-border'] = this.focusBorderColor();
+        }
+        if (this.successBorderColor()) {
+            styles['--cao-form-field-success-border'] = this.successBorderColor();
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "formFieldStyles" }] : []));
+    label = '';
+    labelInside = false;
+    hintLabel = '';
+    control = null;
+    forId = '';
+    errorStateMatcher;
+    leadingIcon;
+    trailingIcon;
+    _isSubmitted = false;
+    _focused = false;
+    get id() {
+        return this.forId;
+    }
+    get disabled() {
+        return !!this.control?.disabled;
+    }
+    get required() {
+        if (!this.control) {
+            return false;
+        }
+        const hasValidator = typeof this.control.hasValidator === 'function'
+            ? this.control.hasValidator(Validators.required)
+            : false;
+        return hasValidator;
+    }
+    get floating() {
+        return this._focused || !!this.control?.value;
+    }
+    get errorStateActive() {
+        const control = this.control;
+        if (!control) {
+            return false;
+        }
+        const matcher = this.errorStateMatcher;
+        return matcher
+            ? matcher.isErrorState(control, this)
+            : !!(control.invalid && (control.touched || control.dirty || this._isSubmitted));
+    }
+    onFocusIn() {
+        this._focused = true;
+        if (this.control && !this._isSubmitted) {
+            this.control.markAsTouched();
+        }
+    }
+    onFocusOut() {
+        this._focused = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoFormField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoFormField, isStandalone: true, selector: "cao-form-field", inputs: { inputBackground: { classPropertyName: "inputBackground", publicName: "inputBackground", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, errorColor: { classPropertyName: "errorColor", publicName: "errorColor", isSignal: true, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, hintColor: { classPropertyName: "hintColor", publicName: "hintColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, focusBorderColor: { classPropertyName: "focusBorderColor", publicName: "focusBorderColor", isSignal: true, isRequired: false, transformFunction: null }, successBorderColor: { classPropertyName: "successBorderColor", publicName: "successBorderColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, labelInside: { classPropertyName: "labelInside", publicName: "labelInside", isSignal: false, isRequired: false, transformFunction: null }, hintLabel: { classPropertyName: "hintLabel", publicName: "hintLabel", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, forId: { classPropertyName: "forId", publicName: "forId", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: false, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"cao-form-field\"\n  [class.label-inside]=\"labelInside\"\n  [class.error-state]=\"errorStateActive\"\n  [class.disabled]=\"disabled\"\n  [class.required]=\"required\"\n  [style]=\"formFieldStyles()\">\n  @if (label && !labelInside) {\n    <label class=\"cao-form-field__label\" [for]=\"forId\">{{ label }}</label>\n  }\n  <div class=\"input-field\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\n    @if (leadingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\"\n        [imgSource]=\"leadingIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\" />\n    }\n    <div class=\"input-slot\">\n      @if (label && labelInside) {\n        <label\n          class=\"cao-form-field__label cao-form-field__label--float\"\n          [class.cao-form-field__label--floated]=\"floating\"\n          [for]=\"forId\">{{ label }}</label>\n      }\n      <ng-content select=\"[caoInput]\" />\n      <ng-content select=\"cao-input\" />\n      <ng-content select=\"input\" />\n      <ng-content select=\"select\" />\n      <ng-content select=\"textarea\" />\n      <ng-content select=\"h2\" />\n      <ng-content />\n    </div>\n    @if (trailingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\"\n        [imgSource]=\"trailingIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\" />\n    }\n  </div>\n  <div class=\"subscript-wrapper\">\n    @if (hintLabel) {\n      <small class=\"cao-form-field__hint\">{{ hintLabel }}</small>\n    }\n    <ng-content select=\"cao-hint\" />\n    <ng-content select=\"cao-error\" />\n  </div>\n</div>", styles: [":host{--cao-form-field-bg-background: var(--input-background, #ffffff);--cao-form-field-border-color: var(--line-color, #e5e7eb);--cao-form-field-border-width: 1px;--cao-form-field-border-radius: 8px;--cao-form-field-color-error: var(--error, #dc2626);--cao-form-field-color-label: var(--primary, #111827);--cao-form-field-color-hint: var(--input-text, #9ca3af);--cao-form-field-color-text: var(--text-color-input, #111827);--cao-form-field-focus-border: var(--primary, #111827);--cao-form-field-success-border: var(--success, #16a34a);display:block;width:100%}.cao-form-field{display:flex;flex-direction:column;gap:4px;width:100%;font-family:inherit}.cao-form-field__label{display:block;font-size:.75rem;font-weight:700;line-height:1.25rem;color:var(--cao-form-field-color-label);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}.cao-form-field__label--float{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-weight:500;text-transform:none;letter-spacing:0;color:var(--cao-form-field-color-hint);pointer-events:none;transition:transform .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.cao-form-field__label--floated{transform:translateY(calc(-50% - 14px)) scale(.75);transform-origin:left top;color:var(--cao-form-field-color-label);font-weight:700}.input-field{position:relative;display:flex;align-items:center;width:100%;min-height:44px;background-color:var(--cao-form-field-bg-background);border:var(--cao-form-field-border-width) solid var(--cao-form-field-border-color);border-radius:var(--cao-form-field-border-radius);transition:border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}.input-field:focus-within{border-color:var(--cao-form-field-focus-border)}.cao-form-field.error-state .input-field{border-color:var(--cao-form-field-color-error)}.cao-form-field.disabled .input-field{opacity:.7}.input-slot{position:relative;flex:1;display:flex;align-items:center;width:100%;height:100%}.input-slot ::ng-deep input,.input-slot ::ng-deep textarea,.input-slot ::ng-deep select{width:100%;min-height:40px;border:none;outline:none;background:transparent;color:var(--cao-form-field-color-text);font-family:inherit;font-size:.875rem;padding:6px 12px;box-sizing:border-box}.input-slot ::ng-deep cao-input,.input-slot ::ng-deep .cao-input{width:100%}.input-slot ::ng-deep cao-input .input-component,.input-slot ::ng-deep cao-input .input-wrapper{width:100%;background:transparent}.input-slot ::ng-deep cao-input input,.input-slot ::ng-deep cao-input textarea{background:transparent;border:none;color:var(--cao-form-field-color-text)}.label-inside .input-slot ::ng-deep input,.label-inside .input-slot ::ng-deep textarea,.label-inside .input-slot ::ng-deep select{padding-top:16px;padding-bottom:8px}.subscript-wrapper{display:flex;flex-direction:column;gap:2px}.cao-form-field__hint{font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint)}.cao-form-field__hint+.subscript-wrapper{margin-top:0}.cao-form-field.required .cao-form-field__label:after{content:\" *\";color:var(--cao-form-field-color-error)}\n"], dependencies: [{ kind: "component", type: CaoBaseIcon, selector: "cao-base-icon", inputs: ["imgSource", "isLucideIcon", "strokeWidthIcon", "iconColor", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-form-field', imports: [CaoBaseIcon], template: "<div\n  class=\"cao-form-field\"\n  [class.label-inside]=\"labelInside\"\n  [class.error-state]=\"errorStateActive\"\n  [class.disabled]=\"disabled\"\n  [class.required]=\"required\"\n  [style]=\"formFieldStyles()\">\n  @if (label && !labelInside) {\n    <label class=\"cao-form-field__label\" [for]=\"forId\">{{ label }}</label>\n  }\n  <div class=\"input-field\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\n    @if (leadingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\"\n        [imgSource]=\"leadingIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\" />\n    }\n    <div class=\"input-slot\">\n      @if (label && labelInside) {\n        <label\n          class=\"cao-form-field__label cao-form-field__label--float\"\n          [class.cao-form-field__label--floated]=\"floating\"\n          [for]=\"forId\">{{ label }}</label>\n      }\n      <ng-content select=\"[caoInput]\" />\n      <ng-content select=\"cao-input\" />\n      <ng-content select=\"input\" />\n      <ng-content select=\"select\" />\n      <ng-content select=\"textarea\" />\n      <ng-content select=\"h2\" />\n      <ng-content />\n    </div>\n    @if (trailingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\"\n        [imgSource]=\"trailingIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\" />\n    }\n  </div>\n  <div class=\"subscript-wrapper\">\n    @if (hintLabel) {\n      <small class=\"cao-form-field__hint\">{{ hintLabel }}</small>\n    }\n    <ng-content select=\"cao-hint\" />\n    <ng-content select=\"cao-error\" />\n  </div>\n</div>", styles: [":host{--cao-form-field-bg-background: var(--input-background, #ffffff);--cao-form-field-border-color: var(--line-color, #e5e7eb);--cao-form-field-border-width: 1px;--cao-form-field-border-radius: 8px;--cao-form-field-color-error: var(--error, #dc2626);--cao-form-field-color-label: var(--primary, #111827);--cao-form-field-color-hint: var(--input-text, #9ca3af);--cao-form-field-color-text: var(--text-color-input, #111827);--cao-form-field-focus-border: var(--primary, #111827);--cao-form-field-success-border: var(--success, #16a34a);display:block;width:100%}.cao-form-field{display:flex;flex-direction:column;gap:4px;width:100%;font-family:inherit}.cao-form-field__label{display:block;font-size:.75rem;font-weight:700;line-height:1.25rem;color:var(--cao-form-field-color-label);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}.cao-form-field__label--float{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-weight:500;text-transform:none;letter-spacing:0;color:var(--cao-form-field-color-hint);pointer-events:none;transition:transform .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.cao-form-field__label--floated{transform:translateY(calc(-50% - 14px)) scale(.75);transform-origin:left top;color:var(--cao-form-field-color-label);font-weight:700}.input-field{position:relative;display:flex;align-items:center;width:100%;min-height:44px;background-color:var(--cao-form-field-bg-background);border:var(--cao-form-field-border-width) solid var(--cao-form-field-border-color);border-radius:var(--cao-form-field-border-radius);transition:border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}.input-field:focus-within{border-color:var(--cao-form-field-focus-border)}.cao-form-field.error-state .input-field{border-color:var(--cao-form-field-color-error)}.cao-form-field.disabled .input-field{opacity:.7}.input-slot{position:relative;flex:1;display:flex;align-items:center;width:100%;height:100%}.input-slot ::ng-deep input,.input-slot ::ng-deep textarea,.input-slot ::ng-deep select{width:100%;min-height:40px;border:none;outline:none;background:transparent;color:var(--cao-form-field-color-text);font-family:inherit;font-size:.875rem;padding:6px 12px;box-sizing:border-box}.input-slot ::ng-deep cao-input,.input-slot ::ng-deep .cao-input{width:100%}.input-slot ::ng-deep cao-input .input-component,.input-slot ::ng-deep cao-input .input-wrapper{width:100%;background:transparent}.input-slot ::ng-deep cao-input input,.input-slot ::ng-deep cao-input textarea{background:transparent;border:none;color:var(--cao-form-field-color-text)}.label-inside .input-slot ::ng-deep input,.label-inside .input-slot ::ng-deep textarea,.label-inside .input-slot ::ng-deep select{padding-top:16px;padding-bottom:8px}.subscript-wrapper{display:flex;flex-direction:column;gap:2px}.cao-form-field__hint{font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint)}.cao-form-field__hint+.subscript-wrapper{margin-top:0}.cao-form-field.required .cao-form-field__label:after{content:\" *\";color:var(--cao-form-field-color-error)}\n"] }]
+        }], propDecorators: { inputBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputBackground", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], errorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorColor", required: false }] }], labelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColor", required: false }] }], hintColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], focusBorderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusBorderColor", required: false }] }], successBorderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "successBorderColor", required: false }] }], label: [{
+                type: Input
+            }], labelInside: [{
+                type: Input
+            }], hintLabel: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], forId: [{
+                type: Input
+            }], errorStateMatcher: [{
+                type: Input
+            }], leadingIcon: [{
+                type: Input
+            }], trailingIcon: [{
+                type: Input
+            }] } });
+
+class ErrorStateMatcher {
+    isErrorState(control, formFieldControl) {
+        if (!control) {
+            return false;
+        }
+        const isSubmitted = formFieldControl && formFieldControl._isSubmitted;
+        return !!(control.invalid &&
+            (control.touched || control.dirty || isSubmitted));
+    }
+}
+class ShowOnDirtyErrorStateMatcher {
+    isErrorState(control, formFieldControl) {
+        if (!control) {
+            return false;
+        }
+        const isSubmitted = formFieldControl && formFieldControl._isSubmitted;
+        return !!(control.invalid && (control.dirty || isSubmitted));
+    }
+}
+const DEFAULT_ERROR_STATE_MATCHER = new ErrorStateMatcher();
+
+class CaoHint {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoHint, isStandalone: true, selector: "cao-hint", ngImport: i0, template: "<span class=\"cao-hint\"><ng-content /></span>\n", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint, var(--input-text, #9ca3af))}.cao-hint{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoHint, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-hint', imports: [], template: "<span class=\"cao-hint\"><ng-content /></span>\n", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint, var(--input-text, #9ca3af))}.cao-hint{display:block}\n"] }]
+        }] });
+
+class CaoError {
+    errorStateMatcher;
+    formField = inject(CaoFormField, { optional: true });
+    get control() {
+        return this.formField?.control ?? null;
+    }
+    get hasErrorState() {
+        const control = this.control;
+        if (!control) {
+            return false;
+        }
+        const matcher = this.errorStateMatcher ?? this.formField?.errorStateMatcher;
+        return matcher
+            ? matcher.isErrorState(control, this.formField)
+            : !!(control.invalid && (control.touched || control.dirty));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoError, isStandalone: true, selector: "cao-error", inputs: { errorStateMatcher: "errorStateMatcher" }, ngImport: i0, template: "@if (hasErrorState) {\n  <div class=\"cao-error\" role=\"alert\">\n    <ng-content />\n  </div>\n}", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-error, var(--error, #dc2626))}.cao-error{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoError, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-error', imports: [], template: "@if (hasErrorState) {\n  <div class=\"cao-error\" role=\"alert\">\n    <ng-content />\n  </div>\n}", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-error, var(--error, #dc2626))}.cao-error{display:block}\n"] }]
+        }], propDecorators: { errorStateMatcher: [{
+                type: Input
+            }] } });
+
 class CaoCardComponent {
     variant = "horizontal";
     title;
@@ -3275,5 +3447,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, CaoBaseToggleComponent, CaoCardComponent, CaoDropDownComponent, CaoKpi, CaoSkeletonComponent, 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, CaoBaseToggleComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map