ngx-opalbytes-components 1.21.0 → 1.23.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

@@ -16,4 +16,15 @@ export * from "./tab-group/tab-group"
 export * from "./tab-panel/tab-panel"
 
 export * from "./base-icon/base-icon"
-export * from "./kpi/kpi"
+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/src/lib/shared/components/skeleton/skeleton.css

@@ -0,0 +1,92 @@
+/*
+ * CSS Custom Properties — all prefixed with --skeleton-*
+ * These cascade naturally, so a parent component can override any token:
+ *
+ *   .my-card {
+ *     --skeleton-bg: #d1d5db;
+ *     --skeleton-shine: #f3f4f6;
+ *     --skeleton-radius: 8px;
+ *     --skeleton-speed: 2s;
+ *   }
+ */
+
+:host {
+  /* ─── Layout defaults (overridable via [width]/[height] inputs) ─── */
+  --skeleton-width: 100%;
+  --skeleton-height: 100%;
+
+  /* ─── Visual tokens — inherit from parent if set there ─── */
+  --skeleton-bg: #e2e8f0;
+  --skeleton-shine: #f8fafc;
+  --skeleton-radius: 14px;
+  --skeleton-speed: 2s;
+  --skeleton-animation-deg: 90deg;
+
+  display: contents; /* host element is transparent to layout */
+}
+
+/* ─────────────────────────── Base block ─────────────────────────── */
+
+.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);
+
+  /* Prevent content from leaking during SSR */
+  color: transparent;
+  user-select: none;
+  pointer-events: none;
+
+  /* Respect reduced-motion preference */
+  @media (prefers-reduced-motion: no-preference) {
+    will-change: transform; /* promote shimmer layer */
+  }
+}
+
+/* ─────────────────────────── Variants ───────────────────────────── */
+
+.cao-skeleton--circle {
+  --skeleton-radius: 50%;
+  /* For circles the consumer usually sets equal width/height;
+     but we guard with aspect-ratio so it stays circular even
+     when only width is specified. */
+  aspect-ratio: 1 / 1;
+}
+
+.cao-skeleton--text {
+  --skeleton-radius: 4px;
+  height: 1em; /* matches current font-size of parent context */
+  width: var(--skeleton-width);
+}
+
+/* ─────────────────────────── Shimmer ────────────────────────────── */
+
+.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) {
+    animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}

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

@@ -0,0 +1,3 @@
+<span class="cao-skeleton" [ngClass]="'cao-skeleton--' + variant()" [style]="skeletonStyles()">
+  <span class="cao-skeleton__shimmer"></span>
+</span>

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

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

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

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoSkeletonComponent } from './skeleton';
+
+const meta: Meta<CaoSkeletonComponent> = {
+  title: 'Componentes/Skeleton',
+  component: CaoSkeletonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['rect', 'circle', 'text'],
+    },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    size: { control: 'text' },
+    bgColor: { control: 'color' },
+    shine: { control: 'color' },
+    borderRadius: { control: 'text' },
+    speed: { control: 'text' },
+    animationDeg: { control: 'text' },
+  },
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    bgColor: '#e2e8f0',
+    shine: '#f8fafc',
+    speed: '2s',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoSkeletonComponent>;
+
+export const Retangulo: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+  },
+};
+
+export const RetanguloComBordaArredondada: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '60px',
+    borderRadius: '8px',
+  },
+};
+
+export const Circulos: Story = {
+  args: {
+    bgColor: '#8100ff',
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <cao-skeleton [size]="'24px'" [variant]="'circle'"></cao-skeleton>
+        <cao-skeleton [size]="'48px'" [variant]="'circle'"></cao-skeleton>
+        <cao-skeleton [size]="'80px'" [variant]="'circle'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const RetangulosComTamanhosVariados: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; width: 320px;">
+        <cao-skeleton [width]="'100%'" [height]="'12px'"></cao-skeleton>
+        <cao-skeleton [width]="'80%'" [height]="'12px'"></cao-skeleton>
+        <cao-skeleton [width]="'60%'" [height]="'12px'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const LinhaDeTexto: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; width: 260px;">
+        <cao-skeleton [variant]="'text'" [width]="'100%'"></cao-skeleton>
+        <cao-skeleton [variant]="'text'" [width]="'90%'"></cao-skeleton>
+        <cao-skeleton [variant]="'text'" [width]="'70%'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const CorCustomizada: Story = {
+  args: {
+    variant: 'rect',
+    width: '220px',
+    height: '48px',
+    bgColor: '#e0e7ff',
+    shine: '#ffffff',
+    borderRadius: '12px',
+  },
+};
+
+export const AnimacaoRapida: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    speed: '0.8s',
+  },
+};
+
+export const AnimacaoLenta: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    speed: '4s',
+  },
+};
+
+export const GradienteVertical: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    animationDeg: '0deg',
+  },
+};