ngx-opalbytes-components 1.18.0 → 1.20.0

package/src/lib/shared/components/base-icon/base-icon.html

@@ -0,0 +1,11 @@
+@if (imgSource) {
+    @if (isLucideIcon) {
+        <div class="icon">
+            <svg [lucideIcon]="imgSource" [style.color]="iconColor" [strokeWidth]="strokeWidthIcon" [size]="size"></svg>
+        </div>
+    } @else {
+        <div class="icon">
+            <img alt="ícone de início" [src]="imgSource" />
+        </div>
+    }
+}

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

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

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

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+import { LucideDynamicIcon } from '@lucide/angular';
+
+@Component({
+  selector: 'cao-base-icon',
+  imports: [CommonModule, LucideDynamicIcon],
+  templateUrl: './base-icon.html',
+  styleUrl: './base-icon.css',
+})
+export class CaoBaseIcon {
+  @Input() imgSource = ""
+  @Input() isLucideIcon = true
+  @Input() strokeWidthIcon = 1
+  @Input() iconColor = ""
+  @Input() size = 32
+}

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

@@ -0,0 +1,193 @@
+.form-field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+label {
+  font-size: 12px;
+  color: var(--primary);
+  font-weight: 700;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.input-wrapper input,
+.input-wrapper textarea {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: var(--input-background);
+  border-radius: 8px;
+  padding: 14px 10px;
+  color: var(--text-color-input);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.input-wrapper input::placeholder,
+.input-wrapper textarea::placeholder {
+  color: var(--input-text);
+}
+
+.input-wrapper input:focus,
+.input-wrapper textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.input-wrapper.has-leading-icon input {
+  padding-left: 33px;
+}
+
+.input-wrapper.has-trailing-icon input {
+  padding-right: 30px;
+}
+
+.input-wrapper img {
+  width: 100%;
+  height: auto;
+}
+
+.input-wrapper .icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 15px;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-wrapper.has-leading-icon .icon:first-of-type {
+  left: 8px;
+}
+
+.input-wrapper.has-trailing-icon .icon:last-of-type {
+  right: 8px;
+}
+
+.input-wrapper .search-icon-border {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  transform: translateY(-50%);
+  border-left: 1px solid var(--line-color);
+  padding-left: 8px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.input-wrapper .search-icon {
+  width: 16px;
+  height: 24px;
+  cursor: pointer;
+  transition: filter 0.2s;
+}
+
+.input-wrapper .search-icon:hover {
+  filter: invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%);
+}
+
+[type="date"] {
+  height: 43px;
+  padding: 14px 0 14px 12px !important;
+}
+
+
+[type="date"].invalid::-webkit-calendar-picker-indicator {
+  border-left: 1px solid var(--error);
+}
+
+[type="date"].valid::-webkit-calendar-picker-indicator {
+  border-left: 1px solid var(--success);
+}
+
+.input-date-disabled {
+  background: url("/assets/images/svg/icon-date-border.svg") no-repeat right 12px center;
+  background-size: 30px;
+  border: none;
+  border-radius: 8px;
+  background-color: var(--input-background);
+  padding: 12px 40px 12px 16px;
+  width: 100%;
+  color: var(--input-text);
+}
+
+.input-date-disabled::placeholder {
+  color: var(--input-text);
+}
+
+.input-secondary {
+  width: 100%;
+  border: 1px solid var(--data-bg) !important;
+  background-color: var(--white) !important;
+}
+
+.input-secondary.invalid {
+  border: 1px solid var(--error) !important;
+}
+
+.input-secondary.valid {
+  border: 1px solid var(--success) !important;
+}
+
+.input-wrapper .invalid {
+  border: 1px solid var(--error);
+}
+
+.input-wrapper .valid {
+  border: 1px solid var(--success);
+}
+
+.input-border-primary {
+  border: 1px solid var(--primary) !important;
+  background-color: var(--white) !important;
+}
+
+.input-border-primary.invalid {
+  border: 1px solid var(--error) !important;
+}
+
+.input-border-primary.valid {
+  border: 1px solid var(--success) !important;
+}
+
+/* stylelint-disable selector-pseudo-element-no-unknown */
+::ng-deep .custom-arrow-tooltip {
+  background-color: var(--color-tooltip);
+  color: var(--white);
+  padding: 0 4px;
+  border-radius: 6px;
+  font-size: 12px;
+  position: relative;
+  text-align: center;
+  max-width: 260px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
+}
+
+::ng-deep .input-component .cdk-overlay-pane .custom-arrow-tooltip::after {
+  content: "";
+  position: absolute;
+  top: -6px;
+  rotate: 180deg;
+  right: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid var(--color-tooltip);
+}
+/* stylelint-enable selector-pseudo-element-no-unknown */

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

@@ -0,0 +1,43 @@
+<div class="form-field input-component" [class.search-mode]="searchMode">
+  <div class="input-wrapper" [class.has-leading-icon]="_leadingIcon" [class.has-trailing-icon]="_trailingIcon"
+    [class.focused]="isFocused">
+    @if (_leadingIcon) { @if (isLucideIcon) {
+    <div class="icon">
+      <svg [lucideIcon]="_leadingIcon" [style.color]="iconColor"></svg>
+    </div>
+    } @else {
+    <div class="icon">
+      <img alt="ícone de início" [src]="_leadingIcon"/>
+    </div>
+    } } @switch (type) { 
+      @case ('textarea') {
+    <textarea matTooltip="{{ tooltip }}" matTooltipPosition="above" matTooltipClass="custom-arrow-tooltip" [attr.data-cy]="dataCy"
+      [placeholder]="placeholder" [disabled]="isDisabled" [ngClass]="[
+          inputClass,
+          control?.touched && control?.invalid ? 'invalid' : '',
+          control?.touched && control?.valid && control?.value ? 'valid' : ''
+        ]" [attr.maxlength]="maxLength"
+      [rows]="textareaRows" [mask]="mask" [allowNegativeNumbers]="allowNegativeNumbers" [thousandSeparator]="thousandSeparator" [decimalMarker]="decimalMarker" [separatorLimit]="separatorLimit"
+      [(ngModel)]="value" (input)="onInput($event)"
+      (focus)="onFocus()" (blur)="onBlur()"></textarea>
+    } 
+    @default {
+    <input matTooltip="{{ tooltip }}" matTooltipPosition="below" matTooltipClass="custom-arrow-tooltip" [attr.data-cy]="dataCy" [type]="type"
+      [placeholder]="placeholder" [disabled]="isDisabled" [ngClass]="[
+          inputClass,
+          control?.touched && control?.invalid ? 'invalid' : '',
+          control?.touched && control?.valid && control?.value ? 'valid' : ''
+        ]" [attr.maxlength]="maxLength"
+      [mask]="mask" [allowNegativeNumbers]="allowNegativeNumbers" [thousandSeparator]="thousandSeparator" [decimalMarker]="decimalMarker" [separatorLimit]="separatorLimit" [(ngModel)]="value" (input)="onInput($event)"
+      (change)="onInputChange($event)" (focus)="onFocus()" (blur)="onBlur()" />
+    } } @if (_trailingIcon) { @if (isLucideIcon) {
+    <div class="icon">
+      <svg [lucideIcon]="_trailingIcon" [style.color]="iconColor"></svg>
+    </div>
+    } @else {
+    <div class="icon">
+      <img alt="ícone de fim" [src]="_trailingIcon" />
+    </div>
+    } } 
+  </div>
+</div>

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.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();
+  });
+});