ngx-opalbytes-components 1.18.0 → 1.20.0

package/src/lib/shared/components/drop-down/drop-down.spec.ts

@@ -0,0 +1,335 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { CaoDropDownComponent } from "./drop-down";
+import { By } from "@angular/platform-browser";
+import { AbstractControl } from "@angular/forms";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+
+describe("CaoDropDownComponent", () => {
+  let component: CaoDropDownComponent;
+  let fixture: ComponentFixture<CaoDropDownComponent>;
+
+  const mockOptions = [{ nome: "Item 1", icon: "home" }, { nome: "Item 2" }];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoDropDownComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoDropDownComponent);
+    component = fixture.componentInstance;
+    component.options = mockOptions;
+    component.textHeader = "Selecione";
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it("deve criar o componente", () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it("deve exibir o texto do cabeçalho quando nenhum item estiver selecionado", () => {
+    fixture.detectChanges();
+    const header = fixture.debugElement.query(By.css(".dropdown-header span")).nativeElement;
+    expect(header.textContent.trim()).toBe("Selecione");
+  });
+
+  it("deve alternar o dropdown ao clicar no cabeçalho", () => {
+    fixture.detectChanges();
+    const header = fixture.debugElement.query(By.css(".dropdown-header"));
+    
+    // Primeiro clique para abrir
+    header.triggerEventHandler("click", new Event('click'));
+    fixture.detectChanges();
+    
+    expect(component.isOpen).toBeTruthy();
+    
+    // Verificar se a lista está visível
+    const list = fixture.debugElement.query(By.css(".dropdown-list"));
+    expect(list).toBeTruthy();
+    
+    // Segundo clique para fechar
+    header.triggerEventHandler("click", new Event('click'));
+    fixture.detectChanges();
+    
+    expect(component.isOpen).toBeFalsy();
+  });
+
+  it("deve exibir os itens da lista quando o dropdown estiver aberto", () => {
+    // Abrir dropdown ANTES do primeiro detectChanges
+    component.isOpen = true;
+    component["checkAvailableSpace"]();
+    
+    fixture.detectChanges();
+
+    const items = fixture.debugElement.queryAll(By.css(".dropdown-item"));
+    expect(items.length).toBe(mockOptions.length);
+    expect(items[0].nativeElement.textContent).toContain("Item 1");
+    expect(items[1].nativeElement.textContent).toContain("Item 2");
+  });
+
+  it("deve exibir o ícone quando o item possuir um", () => {
+    // Abrir dropdown ANTES do primeiro detectChanges
+    component.isOpen = true;
+    component["checkAvailableSpace"]();
+    
+    fixture.detectChanges();
+
+    const icons = fixture.debugElement.queryAll(By.css(".dropdown-icon"));
+    // Apenas o primeiro item tem ícone
+    expect(icons.length).toBe(1);
+    expect(icons[0].nativeElement.textContent.trim()).toBe("home");
+  });
+
+  it("deve selecionar um item e fechar o dropdown", () => {
+    const emitSpy = vi.spyOn(component.itemSelected, "emit");
+    const markAsTouchedSpy = vi.spyOn(component as any, "markAsTouched");
+    
+    // Abrir dropdown ANTES do primeiro detectChanges
+    component.isOpen = true;
+    component["checkAvailableSpace"]();
+    
+    fixture.detectChanges();
+
+    const items = fixture.debugElement.queryAll(By.css(".dropdown-item"));
+    items[0].triggerEventHandler("click", new Event('click'));
+    fixture.detectChanges();
+
+    expect(component.selectedItem).toEqual(mockOptions[0]);
+    expect(component.isOpen).toBeFalsy();
+    expect(emitSpy).toHaveBeenCalledWith(mockOptions[0]);
+    expect(markAsTouchedSpy).toHaveBeenCalled();
+  });
+
+  it("deve exibir o texto do item selecionado no cabeçalho", () => {
+    // Configurar o estado ANTES da primeira detecção
+    component.selectedItem = mockOptions[1];
+    
+    // Agora detectar mudanças
+    fixture.detectChanges();
+
+    const header = fixture.debugElement.query(By.css(".dropdown-header span")).nativeElement;
+    expect(header.textContent.trim()).toBe("Item 2");
+  });
+
+  it("deve fechar o dropdown ao clicar fora do componente", () => {
+    // Abrir dropdown ANTES do primeiro detectChanges
+    component.isOpen = true;
+    component["checkAvailableSpace"]();
+    
+    fixture.detectChanges();
+    
+    // Simular clique fora
+    const clickEvent = new MouseEvent('click');
+    document.dispatchEvent(clickEvent);
+    
+    // Angular precisa processar o evento assíncrono
+    fixture.detectChanges();
+
+    expect(component.isOpen).toBeFalsy();
+  });
+
+  it("não deve fechar o dropdown se o clique for dentro do componente", () => {
+    // Abrir dropdown ANTES do primeiro detectChanges
+    component.isOpen = true;
+    component["checkAvailableSpace"]();
+    
+    fixture.detectChanges();
+
+    // Simular clique no container do dropdown
+    const container = fixture.debugElement.query(By.css(".dropdown-container"));
+    container.triggerEventHandler("click", new Event('click', { bubbles: true }));
+    fixture.detectChanges();
+
+    expect(component.isOpen).toBeTruthy();
+  });
+
+  it("deve setar o valor corretamente com writeValue para item existente", () => {
+    fixture.detectChanges();
+    
+    component.writeValue("Item 2");
+    fixture.detectChanges();
+
+    expect(component.selectedItem).toEqual(mockOptions[1]);
+  });
+
+  it("não deve alterar selectedItem com writeValue para item inexistente", () => {
+    fixture.detectChanges();
+    
+    component.selectedItem = mockOptions[0];
+    component.writeValue("Item inexistente");
+    fixture.detectChanges();
+    
+    expect(component.selectedItem).toEqual(mockOptions[0]);
+  });
+
+  it("deve chamar onChange ao selecionar um item", () => {
+    fixture.detectChanges();
+    
+    const onChangeSpy = vi.fn();
+    component.registerOnChange(onChangeSpy);
+    
+    component.selectItem(mockOptions[0]);
+    
+    // O componente está passando o objeto completo, não apenas o nome
+    expect(onChangeSpy).toHaveBeenCalledWith(mockOptions[0]);
+  });
+
+  it("deve chamar onTouched ao marcar como touched", () => {
+    fixture.detectChanges();
+    
+    const onTouchedSpy = vi.fn();
+    component.registerOnTouched(onTouchedSpy);
+    
+    // Chamar toggleDropdown para disparar touched
+    component.toggleDropdown();
+    
+    expect(onTouchedSpy).toHaveBeenCalled();
+  });
+
+  it("deve retornar o nome do controle através do getter", () => {
+    fixture.detectChanges();
+    
+    component.controlName = "dropdown";
+    expect(component.controlNameValue).toBe("dropdown");
+  });
+
+  it("deve retornar erro de campo obrigatório se control estiver touched e vazio", () => {
+    fixture.detectChanges();
+    
+    const fakeControl = {
+      touched: true,
+      dirty: false,
+      hasError: (err: string) => err === "required",
+      get: () => null,
+    } as unknown as AbstractControl;
+
+    component.control = fakeControl;
+    component.selectedItem = undefined;
+    fixture.detectChanges();
+
+    expect(component.errorText).toBe("*Campo obrigatório");
+  });
+
+  it("deve retornar null no errorText se não houver erro", () => {
+    // Configurar ANTES de detectChanges
+    component.selectedItem = mockOptions[0];
+    
+    const fakeControl = {
+      touched: false,
+      hasError: () => false,
+      get: () => null,
+    } as unknown as AbstractControl;
+
+    component.control = fakeControl;
+    
+    fixture.detectChanges();
+
+    expect(component.errorText).toBeNull();
+  });
+
+  it("markAsTouched deve chamar onTouched e marcar controle como touched", () => {
+    fixture.detectChanges();
+    
+    component.isTouched = false;
+    
+    // Criar um spy para markAsTouched
+    const markAsTouchedSpy = vi.fn();
+    component.control = {
+      markAsTouched: markAsTouchedSpy,
+    } as any;
+    
+    const onTouchedSpy = vi.fn();
+    component.registerOnTouched(onTouchedSpy);
+
+    component["markAsTouched"]();
+
+    expect(onTouchedSpy).toHaveBeenCalled();
+    expect(markAsTouchedSpy).toHaveBeenCalled();
+    expect(component.isTouched).toBeTruthy();
+  });
+
+  it("markAsTouched não deve chamar onTouched se já estiver tocado", () => {
+    fixture.detectChanges();
+    
+    component.isTouched = true;
+    const onTouchedSpy = vi.fn();
+    component.registerOnTouched(onTouchedSpy);
+
+    component["markAsTouched"]();
+
+    expect(onTouchedSpy).not.toHaveBeenCalled();
+  });
+
+  describe("checkAvailableSpace", () => {
+    it('deve definir dropDirection como "up" se dropDirectionInput for "up"', () => {
+      fixture.detectChanges();
+      
+      component.dropDirectionInput = "up";
+      component["checkAvailableSpace"]();
+      expect(component.dropDirection).toBe("up");
+    });
+
+    it('deve definir dropDirection como "up" se não houver espaço suficiente abaixo', () => {
+      fixture.detectChanges();
+      
+      component.dropDirectionInput = "down";
+      
+      // Mock do getBoundingClientRect
+      const mockRect = {
+        bottom: window.innerHeight - 100,
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 50,
+        width: 200,
+        x: 0,
+        y: 0,
+        toJSON: () => ({})
+      };
+      
+      // Mock do elemento
+      const mockElement = {
+        getBoundingClientRect: vi.fn(() => mockRect)
+      };
+      
+      // Substituir o elemento nativo
+      component["_eref"].nativeElement = mockElement;
+
+      component["checkAvailableSpace"]();
+      expect(component.dropDirection).toBe("up");
+    });
+
+    it('deve definir dropDirection como "down" se houver espaço suficiente abaixo', () => {
+      fixture.detectChanges();
+      
+      component.dropDirectionInput = "down";
+      
+      // Mock do getBoundingClientRect
+      const mockRect = {
+        bottom: 100,
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 50,
+        width: 200,
+        x: 0,
+        y: 0,
+        toJSON: () => ({})
+      };
+      
+      // Mock do elemento
+      const mockElement = {
+        getBoundingClientRect: vi.fn(() => mockRect)
+      };
+      
+      // Substituir o elemento nativo
+      component["_eref"].nativeElement = mockElement;
+
+      component["checkAvailableSpace"]();
+      expect(component.dropDirection).toBe("down");
+    });
+  });
+});

package/src/lib/shared/components/drop-down/drop-down.ts

@@ -0,0 +1,335 @@
+import { CommonModule } from "@angular/common";
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+  forwardRef,
+  OnInit,
+  OnDestroy,
+  ChangeDetectorRef,
+} from "@angular/core";
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+  FormControl,
+} from "@angular/forms";
+import { MatIconModule } from "@angular/material/icon";
+import { MatTooltipModule } from "@angular/material/tooltip";
+
+export interface ICaoDropDownOption {
+  id?: string | number;
+  nome: string;
+  icon?: string;
+  iconPosition?: string;
+  dataCy?: string;
+}
+
+@Component({
+  selector: "cao-drop-down",
+  templateUrl: "./drop-down.html",
+  styleUrl: "./drop-down.css",
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    MatIconModule,
+    CommonModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CaoDropDownComponent),
+      multi: true,
+    },
+  ],
+})
+export class CaoDropDownComponent implements ControlValueAccessor, OnInit, OnDestroy {
+  @Input() textHeader = "SELECIONE UM ITEM";
+  @Input() options: ICaoDropDownOption[] = [];
+  @Input() dropDownClass = "";
+  @Input() styleDropDown: { [klass: string]: unknown } = {};
+  @Input() control?: AbstractControl | null;
+  @Input() controlName = "";
+  @Input() isDisabled = false;
+  @Input() tooltip = "";
+  @Input() dropDirectionInput: "up" | "down" = "down";
+  @Input() dataCy?: string = "";
+
+  @Input() trackByFn?: (index: number, item: ICaoDropDownOption) => unknown;
+  @Input() compareWith?: (option: unknown, value: unknown) => boolean;
+  @Input() ariaLabel?: string;
+  @Input() ariaLabelledBy?: string;
+  @Input() listAriaLabel?: string;
+
+  @Output() readonly itemSelected = new EventEmitter<ICaoDropDownOption>();
+
+  isOpen = false;
+  selectedItem?: ICaoDropDownOption;
+  filteredOptions: ICaoDropDownOption[] = [];
+  searchControl = new FormControl("");
+  isTouched = false;
+  isFocused = false;
+  dropDirection: string | undefined;
+  removeValidBorder = false;
+
+
+  focusedIndex = -1;
+
+  private _handleClickOutside = this.onClickOutside.bind(this);
+
+  constructor(
+    private _eref: ElementRef,
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    document.addEventListener("click", this._handleClickOutside, true);
+    this.filteredOptions = [...this.options];
+
+    this.searchControl.valueChanges.subscribe((value) => {
+      this.filterOptions(value || "");
+      this.focusedIndex = -1
+    });
+  }
+
+  ngOnDestroy(): void {
+    document.removeEventListener("click", this._handleClickOutside, true);
+  }
+
+  get activeDescendant(): string | null {
+    if (this.isOpen && this.focusedIndex >= 0 && this.filteredOptions[this.focusedIndex]) {
+      return `option-${this.dataCy}-${this.focusedIndex}`;
+    }
+    return null;
+  }
+
+  toggleDropdown(): void {
+    if (this.isDisabled) { return };
+
+    this.checkAvailableSpace();
+    this.isOpen = !this.isOpen;
+    this.isFocused = this.isOpen;
+    this.markAsTouched();
+
+    if (this.isOpen) {
+      this.searchControl.setValue("");
+      this.filteredOptions = [...this.options];
+      this.removeValidBorder = false;
+      this.focusedIndex = -1;
+
+
+      setTimeout(() => {
+        if (this.isOpen) {
+          const searchInput = this._eref.nativeElement.querySelector('.dropdown-search input');
+          if (searchInput) {
+            searchInput.focus();
+          }
+        }
+      });
+    } else {
+      this.focusedIndex = -1;
+    }
+
+    this.cdr.detectChanges();
+  }
+
+  selectItem(option: ICaoDropDownOption): void {
+    if (this.isDisabled) { return };
+
+    this.selectedItem = option;
+    this.isOpen = false;
+    this.focusedIndex = -1;
+    this.itemSelected.emit(option);
+    this.onChange(option);
+    this.markAsTouched();
+    this.cdr.detectChanges();
+  }
+
+  clear(): void {
+    this.selectedItem = undefined;
+    this.onChange(null);
+    this.cdr.detectChanges();
+  }
+
+  filterOptions(searchTerm: string) {
+    if (!searchTerm) {
+      this.filteredOptions = [...this.options];
+      return;
+    }
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    this.filteredOptions = this.options.filter(
+      (option) =>
+        option.nome.toLowerCase().includes(lowerCaseSearchTerm) ||
+        option.id?.toString().toLowerCase().includes(lowerCaseSearchTerm)
+    );
+  }
+
+  trackBy(index: number, item: ICaoDropDownOption): unknown {
+    return this.trackByFn ? this.trackByFn(index, item) : item.id;
+  }
+
+  private onClickOutside(event: MouseEvent): void {
+    if (!this._eref.nativeElement.contains(event.target)) {
+      if (this.isOpen) {
+        this.isOpen = false;
+      }
+      if (this.isFocused) {
+        this.isFocused = false;
+      }
+      this.focusedIndex = -1;
+      this.markAsTouched();
+      this.removeValidBorder = true;
+      this.cdr.detectChanges();
+    }
+  }
+
+  onArrowDown(event: Event): void {
+    if (this.isDisabled) { return };
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.filteredOptions.length === 0) { return };
+
+    if (this.focusedIndex === -1) {
+
+      this.focusedIndex = 0;
+    } else {
+
+      this.focusedIndex = (this.focusedIndex + 1) % this.filteredOptions.length;
+    }
+
+    this.scrollIntoView();
+    this.cdr.detectChanges();
+  }
+
+  onArrowUp(event: Event): void {
+    if (this.isDisabled) { return };
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.filteredOptions.length === 0) { return };
+
+    if (this.focusedIndex === -1) {
+
+      this.focusedIndex = this.filteredOptions.length - 1;
+    } else {
+
+      this.focusedIndex = this.focusedIndex <= 0
+        ? this.filteredOptions.length - 1
+        : this.focusedIndex - 1;
+    }
+
+    this.scrollIntoView();
+    this.cdr.detectChanges();
+  }
+
+  onSearchEnter(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.focusedIndex >= 0 && this.focusedIndex < this.filteredOptions.length) {
+      this.selectItem(this.filteredOptions[this.focusedIndex]);
+    } else if (this.filteredOptions.length > 0) {
+
+      this.selectItem(this.filteredOptions[0]);
+    }
+  }
+
+  closeDropdown(): void {
+    if (this.isDisabled) { return };
+
+    this.isOpen = false;
+    this.focusedIndex = -1;
+    this.isFocused = false;
+    this.cdr.detectChanges();
+  }
+
+  private scrollIntoView(): void {
+    if (!this.isOpen || this.focusedIndex === -1) { return };
+
+    setTimeout(() => {
+      const element = document.getElementById(`option-${this.dataCy}-${this.focusedIndex}`);
+      if (element) {
+        element.scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth'
+        });
+      }
+    }, 0);
+  }
+
+  checkAvailableSpace(): void {
+    if (this.dropDirectionInput === "up") {
+      this.dropDirection = "up";
+      return;
+    }
+
+    const rect = this._eref.nativeElement.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const dropdownHeight = 200
+
+    const spaceBelow = windowHeight - rect.bottom;
+    this.dropDirection = spaceBelow < dropdownHeight ? "up" : "down";
+  }
+
+
+  writeValue(value: unknown): void {
+    if (value !== null && value !== undefined) {
+      const match = this.options.find((opt) =>
+        this.compareWith
+          ? this.compareWith(opt, value)
+          : opt.id === (typeof value === "object" && value ? (value as any).id : value)
+      );
+
+      if (match) {
+        this.selectedItem = match;
+      } else {
+        const matchByName = this.options.find((opt) => opt.nome === value);
+        if (matchByName) {
+          this.selectedItem = matchByName;
+        }
+      }
+    } else {
+      this.selectedItem = undefined;
+    }
+    this.cdr.detectChanges();
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  onChange: (value: unknown) => void = () => { };
+  onTouched = () => { };
+
+  get errorText(): string | null {
+    if (!this.control) { return null; }
+    if (this.control.hasError("required")) {
+      return "*Campo obrigatório";
+    }
+    return null;
+  }
+
+  private markAsTouched() {
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+      this.control?.markAsTouched();
+    }
+  }
+
+  get controlNameValue(): string {
+    return this.controlName;
+  }
+}

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

@@ -0,0 +1,29 @@
+* {
+  list-style: none;
+  text-decoration: none;
+}
+
+.footer-component{
+  display: flex;
+  align-items: end;
+  justify-content: end;
+  height: 35px;
+  padding: 0 50px 10px 0;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.footer-component .flex{
+  display: flex;
+
+}
+.footer-component.isFixed{
+  position: fixed;
+}
+
+.footer-component.col{
+  flex-direction: column;
+}

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

@@ -0,0 +1,10 @@
+<footer class="footer-element" [class.fixed]="isFixed">
+  <div class="flex col">
+    <ng-content />
+    @if(footerText){
+      <ul class="footer-end">
+        <li>{{ footerText }} © {{ currentYear }}</li>
+      </ul>
+    }
+  </div>
+</footer>