ngx-opalbytes-components 1.22.0 → 1.24.0

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

@@ -0,0 +1,177 @@
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoFormField } from './form-field';
+import { CaoBaseInput } from '../base-input/base-input';
+import { CaoError } from '../error/error';
+import { CaoHint } from '../hint/hint';
+
+const storyImports = [ReactiveFormsModule, CaoFormField, CaoBaseInput, CaoHint, CaoError];
+
+const renderFormField = (inner: string, props: Record<string, unknown> = {}) => ({
+  template: `<div style="max-width: 420px;">${inner}</div>`,
+  moduleMetadata: { imports: storyImports },
+  props,
+});
+
+const control = () => new FormControl('', [Validators.required]);
+
+const meta: Meta<CaoFormField> = {
+  title: 'Componentes/Form Field',
+  component: CaoFormField,
+  subcomponents: {
+    caoBaseInput: CaoBaseInput,
+    caoHint: CaoHint,
+    caoError: CaoError,
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    labelInside: { control: 'boolean' },
+    hintLabel: { control: 'text' },
+    leadingIcon: { control: 'text' },
+    trailingIcon: { control: 'text' },
+    inputBackground: { control: 'color' },
+    borderColor: { control: 'color' },
+    borderWidth: { control: 'text' },
+    borderRadius: { control: 'text' },
+    errorColor: { control: 'color' },
+    labelColor: { control: 'color' },
+    hintColor: { control: 'color' },
+    textColor: { control: 'color' },
+    focusBorderColor: { control: 'color' },
+    successBorderColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoFormField>;
+
+export const Padrao: Story = {
+  render: () =>
+    renderFormField(
+      `
+        <cao-form-field forId="padrao" [label]="'Nome'" [control]="control">
+          <cao-input [control]="control" [placeholder]="'Digite seu nome'"></cao-input>
+        </cao-form-field>
+      `,
+      { control: control() }
+    ),
+};
+
+export const LabelDentro: Story = {
+  render: () =>
+    renderFormField(
+      `
+        <cao-form-field forId="label-dentro" [label]="'Nome'" [labelInside]="true" [control]="control">
+          <cao-input [control]="control" [placeholder]="' '"></cao-input>
+        </cao-form-field>
+      `,
+      { control: control() }
+    ),
+};
+
+export const ComHint: Story = {
+  render: () =>
+    renderFormField(
+      `
+        <cao-form-field forId="cep" [label]="'CEP'" [control]="control">
+          <cao-input [control]="control" [placeholder]="'00000-000'"></cao-input>
+          <cao-hint>Formato: 00000-000</cao-hint>
+        </cao-form-field>
+      `,
+      { control: control() }
+    ),
+};
+
+export const ComErro: Story = {
+  render: () => {
+    const erroControl = control();
+    erroControl.markAsTouched();
+    return renderFormField(
+      `
+        <cao-form-field forId="email" [label]="'E-mail'" [control]="control">
+          <cao-input [control]="control" [placeholder]="'Digite seu e-mail'"></cao-input>
+          <cao-error>Campo obrigatório</cao-error>
+        </cao-form-field>
+      `,
+      { control: erroControl }
+    );
+  },
+};
+
+export const ComIcones: Story = {
+  render: () =>
+    renderFormField(
+      `
+        <cao-form-field
+          forId="buscar"
+          [label]="'Buscar'"
+          leadingIcon="Search"
+          trailingIcon="SlidersHorizontal"
+          iconColor="#4f46e5"
+          [control]="control">
+          <cao-input [control]="control" [placeholder]="'Pesquisar...'"></cao-input>
+        </cao-form-field>
+      `,
+      { control: control() }
+    ),
+};
+
+export const ComMascaraCPF: Story = {
+  render: () =>
+    renderFormField(
+      `
+        <cao-form-field forId="cpf" [label]="'CPF'" [control]="control">
+          <cao-input
+            [control]="control"
+            [placeholder]="'000.000.000-00'"
+            [mask]="'000.000.000-00'"></cao-input>
+        </cao-form-field>
+      `,
+      { control: control() }
+    ),
+};
+
+export const Desabilitado: Story = {
+  render: () =>
+    renderFormField(
+      `
+        <cao-form-field forId="bloqueado" [label]="'Campo bloqueado'" [control]="control">
+          <cao-input [control]="control" [isDisabled]="true" [placeholder]="'Valor indisponível'"></cao-input>
+        </cao-form-field>
+      `,
+      { control: new FormControl({ value: '', disabled: true }) }
+    ),
+};
+
+export const CoresCustomizadas: Story = {
+  render: () => {
+    const coresControl = control();
+    coresControl.markAsTouched();
+    return renderFormField(
+      `
+        <cao-form-field
+          forId="cores"
+          [label]="'Personalizado'"
+          inputBackground="#f8fafc"
+          borderColor="#94a3b8"
+          borderWidth="2px"
+          borderRadius="16px"
+          errorColor="#e11d48"
+          labelColor="#0f766e"
+          hintColor="#64748b"
+          textColor="#0f172a"
+          focusBorderColor="#0d9488"
+          successBorderColor="#16a34a"
+          [control]="control">
+          <cao-input [control]="control" [placeholder]="'Cores via input'"></cao-input>
+          <cao-hint>Hint customizado</cao-hint>
+          <cao-error>Erro customizado</cao-error>
+        </cao-form-field>
+      `,
+      { control: coresControl }
+    );
+  },
+};

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

@@ -0,0 +1,118 @@
+import { Component, computed, input, Input } from '@angular/core';
+import { AbstractControl, Validators } from '@angular/forms';
+
+import { IErrorStateMatcher } from './error-state-matcher';
+import { IFormFieldControl } from './form-field-control';
+import { CaoBaseIcon } from '../base-icon/base-icon';
+
+@Component({
+  selector: 'cao-form-field',
+  imports: [CaoBaseIcon],
+  templateUrl: './form-field.html',
+  styleUrl: './form-field.css',
+})
+export class CaoFormField extends CaoBaseIcon implements IFormFieldControl {
+  inputBackground = input<string>();
+  borderColor = input<string>();
+  borderWidth = input<string>();
+  borderRadius = input<string>();
+  errorColor = input<string>();
+  labelColor = input<string>();
+  hintColor = input<string>();
+  textColor = input<string>();
+  focusBorderColor = input<string>();
+  successBorderColor = input<string>();
+
+  formFieldStyles = computed(() => {
+    const styles: Record<string, string> = {};
+
+    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;
+  });
+  @Input() label = '';
+  @Input() labelInside = false;
+  @Input() hintLabel = '';
+  @Input() control: AbstractControl | null = null;
+  @Input() forId = '';
+  @Input() errorStateMatcher?: IErrorStateMatcher;
+  @Input() leadingIcon?: string;
+  @Input() trailingIcon?: string;
+
+  _isSubmitted = false;
+  _focused = false;
+
+  get id(): string {
+    return this.forId;
+  }
+
+  get disabled(): boolean {
+    return !!this.control?.disabled;
+  }
+
+  get required(): boolean {
+    if (!this.control) {
+      return false;
+    }
+    const hasValidator =
+      typeof this.control.hasValidator === 'function'
+        ? this.control.hasValidator(Validators.required)
+        : false;
+    return hasValidator;
+  }
+
+  get floating(): boolean {
+    return this._focused || !!this.control?.value;
+  }
+
+  get errorStateActive(): boolean {
+    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(): void {
+    this._focused = true;
+    if (this.control && !this._isSubmitted) {
+      this.control.markAsTouched();
+    }
+  }
+
+  onFocusOut(): void {
+    this._focused = false;
+  }
+}

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

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

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

@@ -0,0 +1 @@
+<span class="cao-hint"><ng-content /></span>

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoHint } from './hint';
+
+describe('CaoHint', () => {
+  let component: CaoHint;
+  let fixture: ComponentFixture<CaoHint>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoHint],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoHint);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoHint } from './hint';
+import { CaoBaseInput } from '../base-input/base-input';
+import { CaoFormField } from '../form-field/form-field';
+
+@Component({
+  selector: 'cao-hint-story',
+  imports: [ReactiveFormsModule, CaoFormField, CaoBaseInput, CaoHint],
+  template: `
+    <div style="max-width: 420px;">
+      <cao-form-field [control]="control" label="Usuário">
+        <cao-input [control]="control" placeholder="nome.sobrenome"></cao-input>
+        <cao-hint>{{ text }}</cao-hint>
+      </cao-form-field>
+    </div>
+  `,
+})
+class CaoHintStoryComponent {
+  control = new FormControl('');
+  text = 'Use seu nome de usuário ou e-mail';
+}
+
+const render = (args: Partial<CaoHintStoryComponent>) => ({
+  component: CaoHintStoryComponent,
+  props: args,
+});
+
+const meta: Meta<CaoHint> = {
+  title: 'Componentes/Hint',
+  component: CaoHint,
+  tags: ['autodocs'],
+  argTypes: {
+    text: { control: 'text' },
+  },
+  args: {
+    text: 'Use seu nome de usuário ou e-mail',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoHint>;
+
+export const Padrao: Story = {
+  render: () => render({ text: 'Uma dica para auxiliar o preenchimento' }),
+};
+
+export const ComTextoExemplo: Story = {
+  render: () => render({ text: 'Formato esperado: 000.000.000-00' }),
+};

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cao-hint',
+  imports: [],
+  templateUrl: './hint.html',
+  styleUrl: './hint.css',
+})
+export class CaoHint {}

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

@@ -19,6 +19,12 @@ export * from "./base-icon/base-icon"
 export * from "./kpi/kpi"
 export * from "./skeleton/skeleton"
 
+export * from "./form-field/form-field"
+export * from "./form-field/form-field-control"
+export * from "./form-field/error-state-matcher"
+export * from "./hint/hint"
+export * from "./error/error"
+
 export * from "./card/card.component"
 export * from "./base-toggle/base-toggle.component"
 export * from "./footer/footer"

package/types/ngx-opalbytes-components.d.ts

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { OnInit, EventEmitter, OnChanges, OnDestroy, AfterViewInit, ElementRef, TemplateRef, SimpleChanges, ChangeDetectorRef, Signal, AfterContentInit, QueryList, WritableSignal } from '@angular/core';
+import * as _angular_forms from '@angular/forms';
 import { ControlValueAccessor, AbstractControl, FormControl } from '@angular/forms';
 import { MatDateRangeInput } from '@angular/material/datepicker';
 import * as rxjs from 'rxjs';
@@ -476,6 +477,73 @@ declare class CaoSkeletonComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoSkeletonComponent, "cao-skeleton", never, { "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "shine": { "alias": "shine"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "animationDeg": { "alias": "animationDeg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+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;
+}
+
+interface IErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, formFieldControl: IFormFieldControl | null): boolean;
+}
+declare class ErrorStateMatcher implements IErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, formFieldControl: IFormFieldControl | null): boolean;
+}
+declare class ShowOnDirtyErrorStateMatcher implements IErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, formFieldControl: IFormFieldControl | null): boolean;
+}
+declare const DEFAULT_ERROR_STATE_MATCHER: ErrorStateMatcher;
+
+declare class CaoFormField extends CaoBaseIcon implements IFormFieldControl {
+    inputBackground: i0.InputSignal<string | undefined>;
+    borderColor: i0.InputSignal<string | undefined>;
+    borderWidth: i0.InputSignal<string | undefined>;
+    borderRadius: i0.InputSignal<string | undefined>;
+    errorColor: i0.InputSignal<string | undefined>;
+    labelColor: i0.InputSignal<string | undefined>;
+    hintColor: i0.InputSignal<string | undefined>;
+    textColor: i0.InputSignal<string | undefined>;
+    focusBorderColor: i0.InputSignal<string | undefined>;
+    successBorderColor: i0.InputSignal<string | undefined>;
+    formFieldStyles: i0.Signal<Record<string, string>>;
+    label: string;
+    labelInside: boolean;
+    hintLabel: string;
+    control: AbstractControl | null;
+    forId: string;
+    errorStateMatcher?: IErrorStateMatcher;
+    leadingIcon?: string;
+    trailingIcon?: string;
+    _isSubmitted: boolean;
+    _focused: boolean;
+    get id(): string;
+    get disabled(): boolean;
+    get required(): boolean;
+    get floating(): boolean;
+    get errorStateActive(): boolean;
+    onFocusIn(): void;
+    onFocusOut(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoFormField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoFormField, "cao-form-field", never, { "inputBackground": { "alias": "inputBackground"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "borderWidth": { "alias": "borderWidth"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "errorColor": { "alias": "errorColor"; "required": false; "isSignal": true; }; "labelColor": { "alias": "labelColor"; "required": false; "isSignal": true; }; "hintColor": { "alias": "hintColor"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "focusBorderColor": { "alias": "focusBorderColor"; "required": false; "isSignal": true; }; "successBorderColor": { "alias": "successBorderColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; }; "labelInside": { "alias": "labelInside"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "control": { "alias": "control"; "required": false; }; "forId": { "alias": "forId"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; }, {}, never, ["[caoInput]", "cao-input", "input", "select", "textarea", "h2", "*", "cao-hint", "cao-error"], true, never>;
+}
+
+declare class CaoHint {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoHint, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoHint, "cao-hint", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class CaoError {
+    errorStateMatcher?: IErrorStateMatcher;
+    private readonly formField;
+    get control(): _angular_forms.AbstractControl<any, any, any> | null;
+    get hasErrorState(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoError, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoError, "cao-error", never, { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
 type CaoCardVariant = "horizontal" | "square";
 interface ICaoCardBadge {
     label: string;
@@ -960,5 +1028,5 @@ declare class BaseAlertService {
     static ɵprov: i0.ɵɵInjectableDeclaration<BaseAlertService>;
 }
 
-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 type { AlertType, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoTabChangeEvent, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };
+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 };
+export type { AlertType, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoTabChangeEvent, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IErrorStateMatcher, IFormFieldControl, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };