ngx-opalbytes-components 1.19.0 → 1.21.0

package/src/lib/shared/components/base-input/base-input.spec.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { CaoBaseInput } from "./base-input";
+import { EventEmitter } from '@angular/core';
+
+describe("CaoBaseInputComponent", () => {
+  let component: CaoBaseInput;
+  let fixture: ComponentFixture<CaoBaseInput>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormsModule, CaoBaseInput],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoBaseInput);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("deve ser criado", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("deve ter type e placeholder padrão definidos como 'text' e ''", () => {
+    expect(component.type).toBe("text");
+    expect(component.placeholder).toBe("");
+  });
+
+  it("deve aplicar o placeholder corretamente", () => {
+    component.placeholder = "Digite aqui";
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector("input");
+    expect(input.placeholder).toBe("Digite aqui");
+  });
+
+  it("deve aplicar o tipo de input corretamente", () => {
+    component.type = "password";
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector("input");
+    expect(input.type).toBe("password");
+  });
+
+  it("deve aplicar o maxlength corretamente", () => {
+    component.maxLength = 5;
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector("input");
+    expect(input.getAttribute("maxlength")).toBe("5");
+  });
+
+  it("deve escrever o valor corretamente", () => {
+    component.writeValue("valor inicial");
+    expect(component.value).toBe("valor inicial");
+  });
+
+  it("deve lidar com valores nulos ou indefinidos no writeValue", () => {
+    component.writeValue(null);
+    expect(component.value).toBe("");
+    component.writeValue(undefined);
+    expect(component.value).toBe("");
+  });
+
+  it("deve registrar função onChange corretamente", () => {
+    const mockFn = vi.fn();
+    component.registerOnChange(mockFn);
+    component.onChange("teste");
+    expect(mockFn).toHaveBeenCalledWith("teste");
+  });
+
+  it("deve registrar função onTouched corretamente", () => {
+    const mockFn = vi.fn();
+    component.registerOnTouched(mockFn);
+    component.onTouched();
+    expect(mockFn).toHaveBeenCalledWith();
+  });
+
+  it("deve desabilitar o input quando setDisabledState(true) é chamado", () => {
+    component.setDisabledState(true);
+    fixture.detectChanges();
+    expect(component.isDisabled).toBeTruthy();
+  });
+
+  it("deve atualizar o valor quando o input é alterado", () => {
+    const input = fixture.nativeElement.querySelector("input");
+    input.value = "novo valor";
+    input.dispatchEvent(new Event("input"));
+    fixture.detectChanges();
+    expect(component.value).toBe("novo valor");
+  });
+
+  it("deve emitir o evento valueChange quando o valor é alterado", () => {
+    const emitSpy = vi.spyOn(component.valueChange as EventEmitter<string>, 'emit');
+    const input = fixture.nativeElement.querySelector("input");
+    input.value = "valor teste";
+    input.dispatchEvent(new Event("input"));
+    fixture.detectChanges();
+    expect(emitSpy).toHaveBeenCalledWith("valor teste");
+  });
+
+  it("deve emitir evento searchClick ao chamar onSearchClick", () => {
+    const emitSpy = vi.spyOn(component.searchClick as EventEmitter<void>, 'emit');
+    component.onSearchClick();
+    expect(emitSpy).toHaveBeenCalledWith();
+  });
+
+  it("deve chamar onTouched quando o input perde o foco", () => {
+    const mockTouchedFn = vi.fn();
+    component.registerOnTouched(mockTouchedFn);
+    fixture.detectChanges();
+
+    const input = fixture.nativeElement.querySelector("input");
+    input.dispatchEvent(new Event("blur"));
+
+    expect(mockTouchedFn).toHaveBeenCalledWith();
+  });
+
+  it("deve ativar isFocused ao focar", () => {
+    const input = fixture.nativeElement.querySelector("input");
+    input.dispatchEvent(new Event("focus"));
+    expect(component.isFocused).toBeTruthy();
+  });
+
+  it("deve desativar isFocused ao desfocar", () => {
+    const input = fixture.nativeElement.querySelector("input");
+    input.dispatchEvent(new Event("focus"));
+    input.dispatchEvent(new Event("blur"));
+    expect(component.isFocused).toBeFalsy();
+  });
+
+  it("deve retornar o valor de controlName via controlNameValue", () => {
+    component.controlName = "cpf";
+    expect(component.controlNameValue).toBe("cpf");
+  });
+
+  it("deve aplicar ícone do material se isLucideIcon for true", () => {
+    component.isLucideIcon = true;
+    component.leadingIcon = "home";
+    expect(component._leadingIcon).toBe("home");
+  });
+
+  it("deve manter a máscara definida corretamente", () => {
+    component.mask = "000.000.000-00";
+    fixture.detectChanges();
+    expect(component.mask).toBe("000.000.000-00");
+  });
+});

package/src/lib/shared/components/base-input/base-input.stories.ts

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoBaseInput } from './base-input';
+
+const meta: Meta<CaoBaseInput> = {
+  title: 'Componentes/Base Input',
+  component: CaoBaseInput,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'textarea', 'number', 'password', 'date'],
+    },
+    placeholder: { control: 'text' },
+    inputClass: { control: 'text' },
+    value: { control: 'text' },
+    errorMessage: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+    maxLength: { control: { type: 'number', min: 1 } },
+    searchMode: { control: 'boolean' },
+    showBorder: { control: 'boolean' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    mask: { control: 'text' },
+    tooltip: { control: 'text' },
+    dataCy: { control: 'text' },
+    textareaRows: { control: 'text' },
+    decimalMarker: { control: 'select', options: ['.', ','] },
+    thousandSeparator: { control: 'text' },
+    allowNegativeNumbers: { control: 'boolean' },
+    separatorLimit: { control: 'text' },
+  },
+  args: {
+    valueChange: fn(),
+    searchClick: fn(),
+    inputChange: fn(),
+    placeholder: 'Digite algo...',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseInput>;
+
+export const Padrao: Story = {
+  args: {
+    placeholder: 'Digite seu nome',
+    type: 'text',
+  },
+};
+
+export const ComLeadingIcon: Story = {
+  args: {
+    placeholder: 'Buscar usuário',
+    type: 'text',
+    leadingIcon: 'Search',
+    isLucideIcon: true,
+  },
+};
+
+export const ComTrailingIcon: Story = {
+  args: {
+    placeholder: 'Buscar usuário',
+    type: 'text',
+    trailingIcon: 'ChevronDown',
+    isLucideIcon: true,
+  },
+};
+
+export const ComAmbosIcones: Story = {
+  args: {
+    placeholder: 'Valor monetário',
+    type: 'text',
+    leadingIcon: 'DollarSign',
+    trailingIcon: 'X',
+    isLucideIcon: true,
+  },
+};
+
+export const PadraoComIconeSVG: Story = {
+  args: {
+    placeholder: 'Buscar',
+    type: 'text',
+    leadingIcon: 'https://lucide.dev/icons/search.svg',
+    isLucideIcon: false,
+  },
+};
+
+export const AreaDeTexto: Story = {
+  args: {
+    placeholder: 'Descreva o problema...',
+    type: 'textarea',
+    textareaRows: '4',
+  },
+};
+
+export const Senha: Story = {
+  args: {
+    placeholder: 'Digite sua senha',
+    type: 'password',
+    trailingIcon: 'Eye',
+    isLucideIcon: true,
+  },
+};
+
+export const ModoSearch: Story = {
+  args: {
+    placeholder: 'Pesquisar itens...',
+    type: 'text',
+    searchMode: true,
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    placeholder: 'Campo desabilitado',
+    type: 'text',
+    isDisabled: true,
+    value: 'Valor bloqueado',
+  },
+};
+
+export const ComErro: Story = {
+  args: {
+    placeholder: 'Digite seu e-mail',
+    type: 'text',
+    errorMessage: 'E-mail obrigatório',
+  },
+};
+
+export const ComMascara: Story = {
+  args: {
+    placeholder: '00.000.000/0000-00',
+    type: 'text',
+    mask: '00.000.000/0000-00',
+  },
+};

package/src/lib/shared/components/base-input/base-input.ts

@@ -0,0 +1,133 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from "@angular/forms";
+import { MatTooltipModule } from "@angular/material/tooltip";
+
+import { LucideDynamicIcon } from "@lucide/angular";
+import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
+
+export type CaoTypeInputs = 'text' | 'textarea' | 'number' | 'password' | 'date'
+
+@Component({
+  standalone: true,
+  selector: "cao-input",
+  templateUrl: "./base-input.html",
+  styleUrls: ["./base-input.css"],
+  imports: [CommonModule, FormsModule, NgxMaskDirective, MatTooltipModule, LucideDynamicIcon],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CaoBaseInput,
+      multi: true,
+    },
+    provideNgxMask(),
+  ],
+})
+export class CaoBaseInput implements ControlValueAccessor {
+  @Input() type: CaoTypeInputs = "text" ;
+  @Input() placeholder = "";
+  @Input() inputClass = "";
+  @Input() value: string | number | boolean | Date = "";
+  @Input() errorMessage = "";
+  @Input() isDisabled = false;
+  @Input() maxLength?: number;
+  @Input() searchMode = false;
+  @Input() showBorder = false;
+  @Input() isLucideIcon = false;
+  @Input() iconColor = "";
+  @Input() mask?: string;
+  @Input() control?: AbstractControl | null;
+  @Input() tooltip = "";
+  @Input() dataCy?: string = "";
+  @Input() textareaRows?: string = "";
+
+  @Input() decimalMarker: "." | "," | [".", ","] = ",";
+  @Input() thousandSeparator = ".";
+  @Input() allowNegativeNumbers = false;
+  @Input() separatorLimit = "";
+
+  @Input() set leadingIcon(value: string) {
+    this._leadingIcon = value;
+    this.icon = true;
+  }
+
+  @Input() set trailingIcon(value: string) {
+    this._trailingIcon = value;
+    this.icon = true;
+  }
+
+  @Output() readonly valueChange = new EventEmitter<string>();
+  @Output() readonly searchClick = new EventEmitter<void>();
+  @Output() readonly inputChange = new EventEmitter<string>();
+
+  isFocused = false;
+  icon = false;
+  _leadingIcon?: string;
+  _trailingIcon?: string;
+
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  get hasError() {
+    return !!this.errorMessage;
+  }
+
+  @Input() controlName = "";
+
+  get controlNameValue(): string {
+    return this.controlName;
+  }
+
+  onInput(event: Event) {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.onChange(newValue);
+    this.valueChange.emit(newValue);
+  }
+
+  onInputChange(event: Event) {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.inputChange.emit(newValue);
+  }
+
+  onFocus() {
+    this.isFocused = true;
+    this.onTouched();
+  }
+
+  onBlur() {
+    this.isFocused = false;
+    this.onTouched();
+
+    if (this.control?.touched && this.control?.valid && this.control?.value) {
+      setTimeout(() => {
+        const active = document.activeElement as HTMLElement;
+        const current = document.querySelector(`[formcontrolname="${this.controlNameValue}"]`);
+        if (!current || !active || !current.contains(active)) {
+          this.control?.markAsUntouched();
+        }
+      });
+    }
+  }
+
+  onSearchClick() {
+    this.searchClick.emit();
+  }
+
+  writeValue(value: string | null | undefined): void {
+    this.value = value || "";
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+}

package/src/lib/shared/components/base-time-range/base-time-range.css

@@ -0,0 +1,27 @@
+.input-data-field {
+  height: 44px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.input-data-field.mat-mdc-text-field-wrapper {
+    height: 100% !important;
+  }
+
+.input-data-field.mat-mdc-form-field-flex {
+    height: 100% !important;
+  }
+
+.input-data-field.mat-mdc-form-field-infix {
+    height: 100%;
+    padding: 10px 0 !important;
+  }
+
+.input-data-field.mat-mdc-notch-piece {
+    border: none;
+  }
+
+.input-data-field.mat-date-range-input-container {
+    font-size: 12px;
+  }

package/src/lib/shared/components/base-time-range/base-time-range.html

@@ -0,0 +1,23 @@
+<label class="label-dropw-down" [for]="controlName">{{ label }}</label>
+<mat-form-field class="input-data-field" subscriptSizing="dynamic" appearance="outline">
+  <mat-date-range-input [rangePicker]="picker" [max]="maxDate"
+    [attr.dataCy]="this.dataCy"
+  >
+    <input
+      #startDateInput
+      matStartDate
+      placeholder="DATA INÍCIO"
+      [tabIndex]="1"
+      [value]="startDate"
+      (dateInput)="onSelectStartDate($event)" />
+    <input
+      #endDateInput
+      matEndDate
+      placeholder="DATA FIM"
+      [tabIndex]="2"
+      [value]="finalDate"
+      (dateInput)="onInputMaxDate($event)" />
+  </mat-date-range-input>
+  <mat-datepicker-toggle matIconSuffix [for]="picker" />
+  <mat-date-range-picker #picker />
+</mat-form-field>

package/src/lib/shared/components/base-time-range/base-time-range.spec.ts

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

package/src/lib/shared/components/base-time-range/base-time-range.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { BaseTimeRange } from './base-time-range';
+
+const meta: Meta<BaseTimeRange> = {
+  title: 'Componentes/Base Time Range',
+  component: BaseTimeRange,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    dataCy: { control: 'text' },
+    controlName: { control: 'text' },
+  },
+  args: {
+    rangeSelected: fn(),
+    label: 'Período',
+  },
+};
+
+export default meta;
+type Story = StoryObj<BaseTimeRange>;
+
+export const Padrao: Story = {
+  args: {
+    label: 'Período de análise',
+  },
+};
+
+export const ComMinimoEMaximo: Story = {
+  args: {
+    label: 'Período de análise',
+    minDate: new Date(2026, 0, 1),
+    maxDate: new Date(2026, 11, 31),
+  },
+};
+
+export const ComInicioEFinal: Story = {
+  args: {
+    label: 'Período de análise',
+    startDate: new Date(2026, 2, 1),
+    finalDate: new Date(2026, 2, 15),
+    minDate: new Date(2026, 0, 1),
+    maxDate: new Date(2026, 11, 31),
+  },
+};
+
+export const ComDataCy: Story = {
+  args: {
+    label: 'Período de análise',
+    dataCy: 'time-range-analise',
+    controlName: 'periodo',
+  },
+};

package/src/lib/shared/components/base-time-range/base-time-range.ts

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDatepickerModule, MatDateRangeInput } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'cao-base-time-range',
+  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
+  templateUrl: './base-time-range.html',
+  styleUrl: './base-time-range.css',
+})
+export class BaseTimeRange implements OnInit{
+  @Input() label = "";
+  @Input() max: Date | undefined;
+  @Input() minDate: Date | undefined;
+  @Input() maxDate: Date | undefined;
+  @Input() startDate: Date | undefined;
+  @Input() finalDate: Date | undefined;
+  @Input() dataCy?: string
+  @Input() controlName = "";
+
+  @Output() readonly rangeSelected = new EventEmitter<Date[]>();
+
+  @ViewChild(MatDateRangeInput) dateRangeInput!: MatDateRangeInput<Date>;
+
+  ngOnInit(): void {
+    if(!this.dataCy){
+      this.dataCy = `time-range-${this.label}`
+    }
+  }
+
+  onSelectStartDate(event: any) {
+    const date = event.target.value as Date;
+    this.startDate = date;
+    this.finalDate = undefined;
+
+    const maxDate = new Date(date);
+    maxDate.setDate(maxDate.getDate() + 30);
+
+    this.maxDate = maxDate;
+  }
+
+  onInputMaxDate(event: any) {
+    const finalDate = event.target.value as Date;
+    if (this.startDate && finalDate) {
+      const data = [this.startDate, finalDate];
+      this.rangeSelected.emit(data);
+    }
+  }
+
+  clearInputs() {
+    this.max = undefined;
+    this.minDate = undefined;
+    this.maxDate = undefined;
+    this.startDate = undefined;
+    this.finalDate = undefined;
+
+    this.dateRangeInput._startInput.value = "";
+    this.dateRangeInput._endInput.value = "";
+  }
+}

package/src/lib/shared/components/base-toggle/base-toggle.component.html

@@ -0,0 +1,28 @@
+<div class="d-flex col aic jcc base-toggle">
+  <input #checkbox type="checkbox" class="checkbox" [checked]="isChecked" [disabled]="isDisabled" />
+  <div
+    class="d-flex checkbox-element aic jcsb"
+    tabindex="0"
+    role="button"
+    [class.activated-toggle]="isChecked"
+    (click)="onToggleCheckbox()"
+    (keydown.enter)="onToggleCheckbox()"
+    (keydown.space)="onToggleCheckbox(); $event.preventDefault()">
+    @if (isChecked) {
+    <mat-icon class="eye-icon" />
+    <div class="check-text"> Ativada </div>
+    <div class="line"></div>
+    <p class="unchecked">Desativar</p>
+    }@else {
+    <mat-icon class="fa-circle" />
+    <div class="check-text"> Não ativada </div>
+    <div class="line"></div>
+    <p>Ativar</p>
+    }
+  </div>
+  @if(isChecked){
+  <span>{{ checkedTextPlaceholder }} ativada com sucesso</span>
+  } @else{
+  <span>Clique para ativar {{ uncheckedTextPlaceholder }}</span>
+  }
+</div>

package/src/lib/shared/components/base-toggle/base-toggle.component.scss

@@ -0,0 +1,45 @@
+.base-toggle {
+  input {
+    display: none;
+    visibility: hidden;
+  }
+
+  .checkbox-element {
+    border-radius: 24px;
+    cursor: pointer;
+    gap: 10px;
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--border-toggle);
+    background-color: transparent;
+
+    .check-text {
+      font-weight: 700;
+    }
+
+    .line {
+      height: 24px;
+      width: 1px;
+      background-color: var(--data-bg);
+    }
+
+    &.activated-toggle {
+      border: 2px solid var(--border-toggle-checked);
+      background-color: var(--bg-toggle-checked);
+
+      .check-text {
+        color: var(--text-toggle-checked);
+      }
+
+      .unchecked {
+        color: var(--text-unselected-toggle-checked);
+      }
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+}