ngx-opalbytes-components 1.18.0 → 1.20.0

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

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

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

@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "cao-footer",
+  templateUrl: "./footer.html",
+  styleUrl: "./footer.css",
+  imports: [ CommonModule ]
+})
+export class Footer {
+  currentYear: number = new Date().getFullYear();
+  @Input() currentRoute?:string;
+  @Input() footerText?:string;
+  @Input() isFixed = true;
+}

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

@@ -0,0 +1,19 @@
+export * from './base-button/base-button.component'
+export * from './base-input/base-input'
+export * from './base-time-range/base-time-range'
+
+export * from './autocomplete/autocomplete.component'
+export * from './drop-down/drop-down'
+export * from './links-button/links-button'
+export * from './footer/footer'
+export * from './paginator/paginator'
+export * from './time-picker/time-picker'
+
+export * from './stepper/stepper'
+export * from './stepper/step/step'
+
+export * from "./tab-group/tab-group"
+export * from "./tab-panel/tab-panel"
+
+export * from "./base-icon/base-icon"
+export * from "./kpi/kpi"

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

@@ -0,0 +1,11 @@
+<div
+  class="flex flex-col py-2 pt-2.25 px-3.75 rounded-card border-b w-46.25 bg-(--color-white)"
+  [style.border-color]="kpiData().borderColor">
+  <div class="flex w-full justify-end">
+    <img class="w-6 h-6 mr-2" [src]="kpiData().icon.src" [alt]="kpiData().icon.alt" />
+  </div>
+  <div class="flex flex-col pl-1.5">
+    <p class="text-2xl" [style.color]="kpiData().textColor">{{ kpiData().value }}</p>
+    <h3 class="text-base" [style.color]="kpiData().textColor">{{ kpiData().title }}</h3>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { CaoKpi, ICaoKPI } from "./kpi";
+
+const mockKpiData: ICaoKPI = {
+  title: "Test",
+  value: "42",
+  textColor: "#000000",
+  borderColor: "#ffffff",
+  icon: { src: "icon.png", alt: "icon" },
+};
+
+describe("CaoKpi", () => {
+  let component: CaoKpi;
+  let fixture: ComponentFixture<CaoKpi>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoKpi],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoKpi);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput("kpiData", mockKpiData);
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should render the kpi data", () => {
+    const el: HTMLElement = fixture.nativeElement;
+    expect(el.textContent).toContain("42");
+    expect(el.textContent).toContain("Test");
+  });
+});

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

@@ -0,0 +1,25 @@
+import { CommonModule } from "@angular/common";
+import { Component, input } from "@angular/core";
+
+export interface ICaoImage {
+  src: string;
+  alt: string;
+}
+export interface ICaoKPI {
+  title: string;
+  value: string;
+  textColor: string;
+  borderColor: string;
+  icon: ICaoImage;
+}
+
+@Component({
+  selector: "cao-kpi",
+  imports: [CommonModule],
+  templateUrl: "./kpi.html",
+  styleUrl: "./kpi.css",
+  standalone: true,
+})
+export class CaoKpi {
+  readonly kpiData = input.required<ICaoKPI>();
+}

package/src/lib/shared/components/links-button/links-button.css

@@ -0,0 +1,70 @@
+* {
+  text-decoration: none;
+}
+
+.links-info {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+}
+
+.links-info h2 {
+  font-size: 24px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  color: var(--title-info);
+  margin-bottom: 12%;
+  text-wrap: wrap;
+  height: 64px;
+}
+
+.links-info .links {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 46px;
+}
+
+.links-info .links .link {
+  width: 250px;
+  height: 100px;
+  text-transform: uppercase;
+  background-color: var(--primary);
+  color: var(--white);
+  font-weight: 700;
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 16px;
+  border-radius: 20px;
+  box-shadow: 0 4px 4px 0 var(--shadow-black);
+  cursor: pointer;
+}
+
+.links-info .links .link.disabled {
+  background-color: var(--input-disabled-bg);
+  color: var(--black);
+  pointer-events: none;
+  cursor: default;
+}
+
+.links-info .links .link:active {
+  background-color: var(--active-success-btn);
+}
+
+.links-info .links .link:hover {
+  background: linear-gradient(125.78deg, var(--primary) 7.03%, var(--confirm-color) 96.73%);
+}
+
+@media (max-width: 768px) {
+  .links-info h2 {
+    height: 0;
+  }
+  
+  .links-info .links {
+    padding-bottom: 20px;
+  }
+}

package/src/lib/shared/components/links-button/links-button.html

@@ -0,0 +1,23 @@
+<div class="links-info">
+  @if (navContent()) {
+  <h2>{{ navContent().title }}</h2>
+  <div class="links">
+    @for (link of navContent().links; track $index) {
+    <div
+      class="link"
+      role="button"
+      tabindex="0"
+      [tabIndex]="link.disabled ? -1 : 0"
+      [class.disabled]="link.disabled"
+      [attr.data-cy]="link.dataCy"
+      [attr.aria-disabled]="link.disabled"
+      (click)="isValidationRequired(link)"
+      (keydown.enter)="isValidationRequired(link)"
+      (keydown.space)="isValidationRequired(link); $event.preventDefault()"
+      >
+      {{ link.text }}
+    </div>
+    }
+  </div>
+  }
+</div>

package/src/lib/shared/components/links-button/links-button.spec.ts

@@ -0,0 +1,139 @@
+import { ComponentFixture, ComponentFixtureAutoDetect, TestBed } from "@angular/core/testing";
+import { INavContent, INavLink, LinksButton } from "./links-button";
+import { provideRouter, Routes } from "@angular/router";
+import { Component, signal } from "@angular/core";
+import { provideHttpClientTesting } from "@angular/common/http/testing";
+import { provideHttpClient } from "@angular/common/http";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+@Component({ template: '', standalone: true })
+class EmptyComponent {}
+
+const testRoutes: Routes = [
+  { path: '', component: EmptyComponent },
+  { path: 'reception', component: EmptyComponent },
+  { path: 'receptio', component: EmptyComponent },
+];
+
+describe("LinksButton", () => {
+  let component: LinksButton;
+  let fixture: ComponentFixture<LinksButton>;
+
+  let modalServiceSpy: {
+    showModal: ReturnType<typeof vi.fn>;
+    closeAllModals: ReturnType<typeof vi.fn>;
+  };
+  let storageServiceSpy: {
+    setItem: ReturnType<typeof vi.fn>;
+    getItem: ReturnType<typeof vi.fn>;
+  };
+  let alertServiceSpy: {
+    show: ReturnType<typeof vi.fn>;
+  };
+
+  const mockLink: INavLink = {
+    text: "INICIAR ATENDIMENTO",
+    url: "reception",
+  };
+
+  const mockDisabledLink: INavLink = {
+    text: "ATENDIMENTO",
+    url: "receptio",
+    disabled: true,
+  };
+
+  const mockDirectRoute: INavLink = {
+    text: "ATENDIMENTO",
+    url: "receptio",
+    disabled: false,
+    directRoute: true,
+  };
+
+  beforeEach(async () => {
+    storageServiceSpy = {
+      setItem: vi.fn(),
+      getItem: vi.fn(),
+    };
+    
+    modalServiceSpy = {
+      showModal: vi.fn(),
+      closeAllModals: vi.fn(),
+    };
+    
+    alertServiceSpy = {
+      show: vi.fn(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [LinksButton],
+      providers: [
+        provideRouter(testRoutes),
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        {provide: ComponentFixtureAutoDetect, useValue: true}
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LinksButton);
+    component = fixture.componentInstance;
+
+    const defaultData: INavContent = {
+      title: "Default",
+      links: [{ text: "Default", url: "/" }],
+    };
+    component.navContent = signal(defaultData);
+
+    fixture.detectChanges();
+  });
+
+  it("deveria criar", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("deveria ter informações", () => {
+    const expectedData: INavContent = {
+      title: "Atendimento",
+      links: [{ text: "cuidado", url: "route" }],
+    };
+    component.navContent = signal(expectedData);
+    expect(component.navContent().title).toBe(expectedData.title);
+  });
+
+  it("deve navegar para a rota", () => {
+    const expectedURL = "/";
+    component["navigateTo"](expectedURL);
+    expect(component.router.url).toBe(expectedURL);
+  });
+
+  describe("validação para navegação", () => {
+    it("deve navegar caso o link esteja disponivel", () => {
+      const navigateToSpy = vi.spyOn(component as any, "navigateTo");
+      component.isValidationRequired(mockLink);
+
+      expect(navigateToSpy).toHaveBeenCalledWith(mockLink.url);
+    });
+
+    it("não deve navegar caso o link esteja desabilitado", () => {
+      const navigateToSpy = vi.spyOn(component as any, "navigateTo");
+      component.isValidationRequired(mockDisabledLink);
+
+      expect(navigateToSpy).not.toHaveBeenCalled();
+    });
+
+    it("deve navegar considerando a raiz do projeto", () => {
+      const directRouteSpy = vi.spyOn(component as any, "directRoute");
+      component.isValidationRequired(mockDirectRoute);
+
+      expect(directRouteSpy).toHaveBeenCalledWith(mockDirectRoute.url);
+    });
+  });
+
+  describe("directRoute", () => {
+    it("deve navegar a url raiz do projeto", () => {
+      vi.spyOn(component.router, "navigate");
+      component["directRoute"](mockLink.url);
+
+      expect(component.router.navigate).toHaveBeenCalledWith([mockLink.url]);
+    });
+  });
+});

package/src/lib/shared/components/links-button/links-button.ts

@@ -0,0 +1,45 @@
+import { Component, inject, Input, Signal } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+export interface INavContent {
+  title: string;
+  links: INavLink[];
+  permissions?: string[];
+  directRoute?: boolean;
+}
+export interface INavLink {
+  text: string;
+  url: string;
+  disabled?: boolean;
+  isValidationRequired?: boolean;
+  dataCy?: string;
+  directRoute?: boolean;
+}
+
+@Component({
+  standalone: true,
+  selector: "cao-links-button",
+  templateUrl: "./links-button.html",
+  styleUrl: "./links-button.css",
+})
+export class LinksButton {
+  @Input({ required: true }) navContent!: Signal<INavContent>;
+  router = inject(Router);
+  route = inject(ActivatedRoute);
+
+  isValidationRequired(link: INavLink) {
+    if (link.disabled) {
+      return;
+    }
+    link.directRoute ? this.directRoute(link.url) : this.navigateTo(link.url);
+  }
+
+  private navigateTo(url: string) {
+    this.router.navigate([url], { relativeTo: this.route });
+  }
+
+  private directRoute(url: string) {
+    this.router.navigate([url]);
+  }
+
+}

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

@@ -0,0 +1,10 @@
+<mat-paginator
+  #paginator
+  aria-label="Select page"
+  [length]="totalItems"
+  [pageSize]="pageSize"
+  [pageSizeOptions]="pageSizeOptions"
+  [pageIndex]="currentPage - 1"
+  [hidePageSize]="false"
+  [showFirstLastButtons]="showFirstLastButtons"
+  (page)="onPageEvent($event)" />

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

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

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

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'cao-paginator',
+  imports: [MaterialModule],
+  templateUrl: './paginator.html',
+  styleUrl: './paginator.css',
+})
+export class Paginator {
+  @Input() totalItems = 0;
+  @Input() pageSize = 10;
+  @Input() currentPage = 1;
+  @Input() pageSizeOptions: number[] = [5, 10, 20, 50];
+  @Input() customClass = "";
+  @Input() showFirstLastButtons = true;
+
+  @Output() readonly pageEvent = new EventEmitter<PageEvent>();
+
+  onPageEvent(event: PageEvent): void {
+    this.pageEvent.emit(event)
+  }
+}

package/src/lib/shared/components/stepper/step/step.css

@@ -0,0 +1,8 @@
+.step {
+  width: 44px;
+  height: 44px;
+  border-radius: 100%;
+  font-size: 18px;
+  font-weight: 700;
+}
+

package/src/lib/shared/components/stepper/step/step.html

@@ -0,0 +1 @@
+<div class="step d-flex aic jcc" [ngClass]="{'active': isActive}"> {{ title }} </div>

package/src/lib/shared/components/stepper/step/step.spec.ts

@@ -0,0 +1,131 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { StepComponent } from "./step";
+import { By } from "@angular/platform-browser";
+
+describe("StepComponent", () => {
+  let component: StepComponent;
+  let fixture: ComponentFixture<StepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StepComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StepComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("deve criar o componente", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("deve exibir o título corretamente", async() => {
+    const testTitle = "Passo 1";
+    component.title = testTitle;
+    await fixture.whenStable() // Primeira detecção de mudanças
+
+    const element = fixture.debugElement.query(By.css(".step"));
+    expect(element.nativeElement.textContent.trim()).toBe(testTitle);
+  });
+
+  it("deve aplicar a classe active quando isActive for true", async() => {
+    component.isActive = true;
+    await fixture.whenStable() // Primeira detecção de mudanças
+
+    const element = fixture.debugElement.query(By.css(".step"));
+    expect(element.nativeElement.classList.contains("active")).toBe(true);
+  });
+
+  it("não deve aplicar a classe active quando isActive for false", async () => {
+    component.isActive = false;
+    await fixture.whenStable() // Primeira detecção de mudanças
+
+    const element = fixture.debugElement.query(By.css(".step"));
+    expect(element.nativeElement.classList.contains("active")).toBe(false);
+  });
+
+  it("deve atualizar o estado ativo quando a propriedade isActive mudar", async() => {
+    // Configuração inicial
+    component.isActive = false;
+    
+    let element = fixture.debugElement.query(By.css(".step"));
+
+    expect(element.nativeElement.classList.contains("active")).toBe(false);
+
+    // Mudança e nova detecção
+    component.isActive = true;
+    await fixture.whenStable()
+    element = fixture.debugElement.query(By.css(".step"));
+
+    expect(element.nativeElement.classList.contains("active")).toBe(true);
+  });
+
+  // Testes adicionais que podem ser úteis
+  describe("Propriedades adicionais", () => {
+    it("deve ter title como string vazia por padrão", () => {
+      // Não chame fixture.detectChanges() aqui para evitar o erro
+      expect(component.title).toBe("");
+    });
+
+    it("deve ter isActive como false por padrão", () => {
+      // Não chame fixture.detectChanges() aqui para evitar o erro
+      expect(component.isActive).toBe(false);
+    });
+
+    it("deve manter o template renderizado corretamente", async() => {
+      await fixture.whenStable() // Apenas uma detecção
+      const element = fixture.debugElement.query(By.css(".step"));
+      expect(element).toBeTruthy();
+      expect(element.nativeElement).toBeInstanceOf(HTMLElement);
+    });
+  });
+
+  describe("Comportamento de DOM", () => {
+    it("deve lidar com título vazio corretamente", async() => {
+      component.title = "";
+      await fixture.whenStable() // Apenas uma detecção
+
+      const element = fixture.debugElement.query(By.css(".step"));
+      expect(element.nativeElement.textContent.trim()).toBe("");
+    });
+
+    it("deve renderizar corretamente com título longo", async() => {
+      const longTitle = "Este é um título muito longo para o passo do stepper";
+      component.title = longTitle;
+      await fixture.whenStable() // Apenas uma detecção
+
+      const element = fixture.debugElement.query(By.css(".step"));
+      expect(element.nativeElement.textContent.trim()).toBe(longTitle);
+    });
+  });
+
+  // Alternativa: Usar fixture.changeDetectorRef.detectChanges() com cuidado
+  describe("Solução alternativa para detecção de mudanças", () => {
+    it("deve evitar ExpressionChangedAfterItHasBeenCheckedError", () => {
+      // Solução 1: Usar async e await
+      const longTitle = "Este é um título muito longo para o passo do stepper";
+      component.title = longTitle;
+      
+      // Detecção de mudanças com tratamento de erro
+      fixture.detectChanges(false); // Passar false para evitar throwOnError
+      
+      const element = fixture.debugElement.query(By.css(".step"));
+      expect(element.nativeElement.textContent.trim()).toBe(longTitle);
+    });
+
+    it("deve usar tick e fakeAsync para testes assíncronos", async () => {
+      // Solução 2: Usar fakeAsync (requer importação)
+      const longTitle = "Este é um título muito longo para o passo do stepper";
+      component.title = longTitle;
+      
+      // Aguardar ciclo de detecção
+      await fixture.whenStable();
+      await fixture.whenStable()
+      
+      const element = fixture.debugElement.query(By.css(".step"));
+      expect(element.nativeElement.textContent.trim()).toBe(longTitle);
+    });
+  });
+});

package/src/lib/shared/components/stepper/step/step.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "cao-step",
+  standalone: true,
+  templateUrl: "./step.html",
+  styleUrl: "./step.css",
+  imports: [CommonModule],
+})
+export class StepComponent {
+  @Input() title = "";
+  @Input() isActive = false;
+}

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

@@ -0,0 +1,17 @@
+.step-container {
+  position: relative;
+}
+
+.steps {
+  z-index: 2;
+  gap: 24px;
+}
+
+.line {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  height: 1.5px;
+  background-color: var(--return-color);
+  z-index: 1;
+}

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

@@ -0,0 +1,11 @@
+@if(title){
+<h3 class="stepper-title">{{ title }}</h3>
+}
+<div class="d-flex step-container aic jcsb">
+  @if (showLine) {
+  <div class="line"></div>
+  }
+  <div class="steps d-flex aic jcsb">
+    <ng-content />
+  </div>
+</div>