ngx-opalbytes-components 1.22.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/src/lib/shared/components/error/error.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  color: var(--cao-form-field-color-error, var(--error, #dc2626));
+}
+
+.cao-error {
+  display: block;
+}

package/src/lib/shared/components/error/error.html

@@ -0,0 +1,5 @@
+@if (hasErrorState) {
+  <div class="cao-error" role="alert">
+    <ng-content />
+  </div>
+}

package/src/lib/shared/components/error/error.spec.ts

@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { CaoFormField } from '../form-field/form-field';
+import { CaoError } from './error';
+
+@Component({
+  selector: 'cao-error-host',
+  imports: [CaoFormField, CaoError, ReactiveFormsModule],
+  template: `
+    <cao-form-field label="Email" [control]="control">
+      <input caoInput [formControl]="control" />
+      <cao-error>E-mail obrigatório</cao-error>
+    </cao-form-field>
+  `,
+})
+class CaoErrorHostComponent {
+  control = new FormControl('', [Validators.required]);
+}
+
+describe('CaoError', () => {
+  let fixture: ComponentFixture<CaoError>;
+  let component: CaoError;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoError],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoError);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('não deve exibir erro quando não há controle', () => {
+    expect(component.hasErrorState).toBe(false);
+  });
+});
+
+describe('CaoError (dentro de CaoFormField)', () => {
+  let hostFixture: ComponentFixture<CaoErrorHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoErrorHostComponent],
+    }).compileComponents();
+
+    hostFixture = TestBed.createComponent(CaoErrorHostComponent);
+    hostFixture.detectChanges();
+  });
+
+  it('deve ocultar o erro quando o controle está válido', () => {
+    hostFixture.componentInstance.control.setValue('teste@exemplo.com');
+    hostFixture.detectChanges();
+    const error = hostFixture.nativeElement.querySelector('cao-error .cao-error');
+    expect(error).toBeFalsy();
+  });
+
+  it('deve exibir o erro quando o controle está inválido e tocado', () => {
+    hostFixture.componentInstance.control.markAsTouched();
+    hostFixture.detectChanges();
+    const error = hostFixture.nativeElement.querySelector('cao-error .cao-error');
+    expect(error).toBeTruthy();
+    expect(error.textContent.trim()).toBe('E-mail obrigatório');
+  });
+
+  it('deve ocultar o erro quando está inválido mas não foi tocado', () => {
+    const error = hostFixture.nativeElement.querySelector('cao-error .cao-error');
+    expect(error).toBeFalsy();
+  });
+});

package/src/lib/shared/components/error/error.stories.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { AbstractControl, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoError } from './error';
+import { CaoBaseInput } from '../base-input/base-input';
+import { CaoFormField } from '../form-field/form-field';
+
+@Component({
+  selector: 'cao-error-story',
+  imports: [ReactiveFormsModule, CaoFormField, CaoBaseInput, CaoError],
+  template: `
+    <div style="max-width: 420px; display: flex; flex-direction: column; gap: 24px;">
+      <cao-form-field [control]="requiredControl" label="E-mail">
+        <cao-input [control]="requiredControl" placeholder="Digite seu e-mail"></cao-input>
+        <cao-error>O campo é obrigatório</cao-error>
+      </cao-form-field>
+      <cao-form-field [control]="patternControl" label="CPF">
+        <cao-input [control]="patternControl" placeholder="000.000.000-00"></cao-input>
+        @if (patternControl.hasError('pattern')) {
+          <cao-error>Formato de CPF inválido</cao-error>
+        }
+      </cao-form-field>
+    </div>
+  `,
+})
+class CaoErrorStoryComponent {
+  requiredControl: AbstractControl = new FormControl('', [Validators.required]);
+  patternControl: AbstractControl = new FormControl('', [
+    Validators.pattern(/^\d{3}\.\d{3}\.\d{3}-\d{2}$/),
+  ]);
+
+  constructor() {
+    this.requiredControl.markAsTouched();
+    this.patternControl.markAsTouched();
+  }
+}
+
+const render = () => ({
+  component: CaoErrorStoryComponent,
+});
+
+const meta: Meta<CaoError> = {
+  title: 'Componentes/Error',
+  component: CaoError,
+  tags: ['autodocs'],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<CaoError>;
+
+export const ErroObrigatorio: Story = {
+  render,
+};
+
+export const ErroPorPadrao: Story = {
+  args: {},
+  render,
+};

package/src/lib/shared/components/error/error.ts

@@ -0,0 +1,33 @@
+import { Component, inject, Input } from '@angular/core';
+
+import { IErrorStateMatcher } from '../form-field/error-state-matcher';
+import { CaoFormField } from '../form-field/form-field';
+
+@Component({
+  selector: 'cao-error',
+  imports: [],
+  templateUrl: './error.html',
+  styleUrl: './error.css',
+})
+export class CaoError {
+  @Input() errorStateMatcher?: IErrorStateMatcher;
+
+  private readonly formField = inject(CaoFormField, { optional: true }) as
+    | CaoFormField
+    | null;
+
+  get control() {
+    return this.formField?.control ?? null;
+  }
+
+  get hasErrorState(): boolean {
+    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));
+  }
+}

package/src/lib/shared/components/form-field/error-state-matcher.ts

@@ -0,0 +1,41 @@
+import { AbstractControl } from '@angular/forms';
+
+import { IFormFieldControl } from './form-field-control';
+
+export interface IErrorStateMatcher {
+  isErrorState(
+    control: AbstractControl | null,
+    formFieldControl: IFormFieldControl | null
+  ): boolean;
+}
+
+export class ErrorStateMatcher implements IErrorStateMatcher {
+  isErrorState(
+    control: AbstractControl | null,
+    formFieldControl: IFormFieldControl | null
+  ): boolean {
+    if (!control) {
+      return false;
+    }
+    const isSubmitted = formFieldControl && (formFieldControl as any)._isSubmitted;
+    return !!(
+      control.invalid &&
+      (control.touched || control.dirty || isSubmitted)
+    );
+  }
+}
+
+export class ShowOnDirtyErrorStateMatcher implements IErrorStateMatcher {
+  isErrorState(
+    control: AbstractControl | null,
+    formFieldControl: IFormFieldControl | null
+  ): boolean {
+    if (!control) {
+      return false;
+    }
+    const isSubmitted = formFieldControl && (formFieldControl as any)._isSubmitted;
+    return !!(control.invalid && (control.dirty || isSubmitted));
+  }
+}
+
+export const DEFAULT_ERROR_STATE_MATCHER = new ErrorStateMatcher();

package/src/lib/shared/components/form-field/form-field-control.ts

@@ -0,0 +1,10 @@
+import { AbstractControl } from '@angular/forms';
+
+export interface IFormFieldControl<T = any> {
+  readonly control: AbstractControl<T> | null | undefined;
+  readonly id: string;
+  readonly label: string;
+  readonly labelInside: boolean;
+  readonly disabled: boolean;
+  readonly required: boolean;
+}

package/src/lib/shared/components/form-field/form-field.css

@@ -0,0 +1,154 @@
+: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: 0.75rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+  color: var(--cao-form-field-color-label);
+  text-transform: uppercase;
+  letter-spacing: 0.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 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: calc(100% - 24px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cao-form-field__label--floated {
+  transform: translateY(calc(-50% - 14px)) scale(0.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 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms cubic-bezier(0.4, 0, 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: 0.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: 0.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: 0.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);
+}

package/src/lib/shared/components/form-field/form-field.html

@@ -0,0 +1,51 @@
+<div
+  class="cao-form-field"
+  [class.label-inside]="labelInside"
+  [class.error-state]="errorStateActive"
+  [class.disabled]="disabled"
+  [class.required]="required"
+  [style]="formFieldStyles()">
+  @if (label && !labelInside) {
+    <label class="cao-form-field__label" [for]="forId">{{ label }}</label>
+  }
+  <div class="input-field" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
+    @if (leadingIcon) {
+      <cao-base-icon
+        [isLucideIcon]="isLucideIcon"
+        [strokeWidthIcon]="strokeWidthIcon"
+        [imgSource]="leadingIcon"
+        [iconColor]="iconColor"
+        [size]="size" />
+    }
+    <div class="input-slot">
+      @if (label && labelInside) {
+        <label
+          class="cao-form-field__label cao-form-field__label--float"
+          [class.cao-form-field__label--floated]="floating"
+          [for]="forId">{{ label }}</label>
+      }
+      <ng-content select="[caoInput]" />
+      <ng-content select="cao-input" />
+      <ng-content select="input" />
+      <ng-content select="select" />
+      <ng-content select="textarea" />
+      <ng-content select="h2" />
+      <ng-content />
+    </div>
+    @if (trailingIcon) {
+      <cao-base-icon
+        [isLucideIcon]="isLucideIcon"
+        [iconColor]="iconColor"
+        [size]="size"
+        [imgSource]="trailingIcon"
+        [strokeWidthIcon]="strokeWidthIcon" />
+    }
+  </div>
+  <div class="subscript-wrapper">
+    @if (hintLabel) {
+      <small class="cao-form-field__hint">{{ hintLabel }}</small>
+    }
+    <ng-content select="cao-hint" />
+    <ng-content select="cao-error" />
+  </div>
+</div>

package/src/lib/shared/components/form-field/form-field.spec.ts

@@ -0,0 +1,114 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, Validators } from '@angular/forms';
+
+import { CaoFormField } from './form-field';
+
+describe('CaoFormField', () => {
+  let component: CaoFormField;
+  let fixture: ComponentFixture<CaoFormField>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoFormField],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoFormField);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('deve exibir label fora do input por padrão', () => {
+    fixture.componentRef.setInput('label', 'Nome');
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('.cao-form-field__label');
+    expect(label).toBeTruthy();
+    expect(label.textContent.trim()).toBe('Nome');
+    expect(component.labelInside).toBe(false);
+  });
+
+  it('deve usar label interna quando labelInside for true', () => {
+    fixture.componentRef.setInput('label', 'Nome');
+    fixture.componentRef.setInput('labelInside', true);
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('.cao-form-field__label--float');
+    expect(label).toBeTruthy();
+  });
+
+  it('deve flutuar o label quando o controle possui valor', () => {
+    const control = new FormControl('valor');
+    fixture.componentRef.setInput('label', 'Nome');
+    fixture.componentRef.setInput('labelInside', true);
+    fixture.componentRef.setInput('control', control);
+    fixture.detectChanges();
+    expect(component.floating).toBe(true);
+    const label = fixture.nativeElement.querySelector('.cao-form-field__label--floated');
+    expect(label).toBeTruthy();
+  });
+
+  it('deve exibir hintLabel quando definido', () => {
+    fixture.componentRef.setInput('hintLabel', 'Digite um CEP válido');
+    fixture.detectChanges();
+    const hint = fixture.nativeElement.querySelector('.cao-form-field__hint');
+    expect(hint).toBeTruthy();
+    expect(hint.textContent.trim()).toBe('Digite um CEP válido');
+  });
+
+  it('deve detectar estado de erro quando controle inválido e tocado', () => {
+    const control = new FormControl('', [Validators.required]);
+    control.markAsTouched();
+    fixture.componentRef.setInput('control', control);
+    fixture.detectChanges();
+    expect(component.errorStateActive).toBe(true);
+  });
+
+  it('nao deve ativar estado de erro quando controle não for tocado', () => {
+    const control = new FormControl('', [Validators.required]);
+    fixture.componentRef.setInput('control', control);
+    fixture.detectChanges();
+    expect(component.errorStateActive).toBe(false);
+  });
+
+  it('deve marcar como obrigatório quando o controle tem Validators.required', () => {
+    const control = new FormControl('', [Validators.required]);
+    fixture.componentRef.setInput('control', control);
+    fixture.detectChanges();
+    expect(component.required).toBe(true);
+  });
+
+  it('deve reutilizar o id do forId no atributo for do label', () => {
+    fixture.componentRef.setInput('label', 'Email');
+    fixture.componentRef.setInput('forId', 'campo-email');
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('.cao-form-field__label');
+    expect(label.getAttribute('for')).toBe('campo-email');
+  });
+
+  it('deve detectar o controle vindo de um AbstractControl', () => {
+    const control = new FormControl('abc');
+    fixture.componentRef.setInput('control', control);
+    fixture.detectChanges();
+    expect(component.disabled).toBe(false);
+  });
+
+  it('deve aplicar as cores customizadas como custom props no elemento interno', () => {
+    fixture.componentRef.setInput('inputBackground', '#f8fafc');
+    fixture.componentRef.setInput('errorColor', '#e11d48');
+    fixture.componentRef.setInput('borderRadius', '16px');
+    fixture.detectChanges();
+    const el = fixture.nativeElement.querySelector('.cao-form-field') as HTMLElement;
+    expect(el.style.getPropertyValue('--cao-form-field-bg-background')).toBe('#f8fafc');
+    expect(el.style.getPropertyValue('--cao-form-field-color-error')).toBe('#e11d48');
+    expect(el.style.getPropertyValue('--cao-form-field-border-radius')).toBe('16px');
+  });
+
+  it('nao deve aplicar custom props de cor quando o input tem undefined', () => {
+    fixture.detectChanges();
+    const el = fixture.nativeElement.querySelector('.cao-form-field') as HTMLElement;
+    expect(el.style.getPropertyValue('--cao-form-field-bg-background')).toBe('');
+  });
+});