ngx-opalbytes-components 1.19.0 → 1.21.0

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

@@ -0,0 +1,238 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { StepperComponent } from "./stepper";
+import { StepComponent } from "./step/step";
+import { Component, QueryList, EventEmitter } from "@angular/core";
+import { By } from "@angular/platform-browser";
+
+describe("StepperComponent", () => {
+  let component: StepperComponent;
+  let fixture: ComponentFixture<StepperComponent>;
+
+  @Component({
+    selector: "cao-step",
+    template: "<div></div>",
+    standalone: true,
+  })
+  class MockStepComponent {
+    isActive = false;
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StepperComponent, MockStepComponent],
+    })
+      .overrideComponent(StepperComponent, {
+        remove: { imports: [StepComponent] },
+        add: { imports: [MockStepComponent] },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(StepperComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("deve criar o componente", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("ngAfterContentInit", () => {
+    it("deve ativar o primeiro passo e definir lengthStep quando há passos", () => {
+      const step1 = new MockStepComponent();
+      const step2 = new MockStepComponent();
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset([step1 as StepComponent, step2 as StepComponent]);
+
+      component.ngAfterContentInit();
+
+      expect(component.steps.toArray()[0].isActive).toBe(true);
+      expect(component.lengthStep).toBe(2);
+    });
+
+    it("não deve fazer nada quando não há passos", () => {
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset([]);
+      const originalLength = component.lengthStep;
+
+      component.ngAfterContentInit();
+
+      expect(component.lengthStep).toBe(originalLength);
+    });
+  });
+
+  describe("nextStep", () => {
+    it("deve avançar para o próximo passo quando não estiver no último", () => {
+      const steps = [
+        { isActive: true } as StepComponent,
+        { isActive: false } as StepComponent,
+        { isActive: false } as StepComponent,
+      ];
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset(steps);
+      component.activeStepIndex = 0;
+      
+      const emitSpy = vi.spyOn(component.maxReachedEvent as EventEmitter<null>, 'emit');
+
+      component.nextStep();
+
+      expect(component.activeStepIndex).toBe(1);
+      expect(steps[1].isActive).toBe(true);
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it("deve emitir maxReachedEvent quando estiver no último passo", () => {
+      const steps = [
+        { isActive: true } as StepComponent, 
+        { isActive: true } as StepComponent
+      ];
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset(steps);
+      component.activeStepIndex = 1;
+      
+      const emitSpy = vi.spyOn(component.maxReachedEvent as EventEmitter<null>, 'emit');
+
+      component.nextStep();
+
+      expect(emitSpy).toHaveBeenCalledWith(null);
+      expect(component.activeStepIndex).toBe(1);
+    });
+
+    it("não deve fazer nada quando não há passos", () => {
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset([]);
+      const originalIndex = component.activeStepIndex;
+      
+      const emitSpy = vi.spyOn(component.maxReachedEvent as EventEmitter<null>, 'emit');
+
+      component.nextStep();
+
+      expect(component.activeStepIndex).toBe(originalIndex);
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("prevStep", () => {
+    it("deve voltar para o passo anterior quando não estiver no primeiro", () => {
+      const steps = [
+        { isActive: true } as StepComponent,
+        { isActive: true } as StepComponent,
+        { isActive: false } as StepComponent,
+      ];
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset(steps);
+      component.activeStepIndex = 1;
+
+      component.prevStep();
+
+      expect(component.activeStepIndex).toBe(0);
+      expect(steps[1].isActive).toBe(false);
+      expect(steps[0].isActive).toBe(true);
+    });
+
+    it("não deve fazer nada quando estiver no primeiro passo", () => {
+      const steps = [
+        { isActive: true } as StepComponent, 
+        { isActive: false } as StepComponent
+      ];
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset(steps);
+      component.activeStepIndex = 0;
+
+      component.prevStep();
+
+      expect(component.activeStepIndex).toBe(0);
+      expect(steps[0].isActive).toBe(true);
+    });
+
+    it("não deve fazer nada quando não há passos", () => {
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset([]);
+      const originalIndex = component.activeStepIndex;
+
+      component.prevStep();
+
+      expect(component.activeStepIndex).toBe(originalIndex);
+    });
+  });
+
+  describe("resetStepper", () => {
+    it("deve redefinir para o primeiro passo e desativar todos os outros", () => {
+      const steps = [
+        { isActive: false } as StepComponent,
+        { isActive: true } as StepComponent,
+        { isActive: true } as StepComponent,
+      ];
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset(steps);
+      component.activeStepIndex = 2;
+
+      const forEachSpy = vi.spyOn(component.steps, "forEach");
+
+      component.resetStepper();
+
+      expect(component.activeStepIndex).toBe(0);
+      expect(forEachSpy).toHaveBeenCalled();
+      expect(steps[0].isActive).toBe(true);
+      expect(steps[1].isActive).toBe(false);
+      expect(steps[2].isActive).toBe(false);
+    });
+
+    it("não deve ativar nenhum passo quando não há passos", () => {
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset([]);
+      component.activeStepIndex = 2;
+
+      const forEachSpy = vi.spyOn(component.steps, "forEach");
+
+      component.resetStepper();
+
+      expect(component.activeStepIndex).toBe(0);
+      expect(forEachSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("Testes com Template", () => {
+    it("deve exibir o título do stepper quando fornecido", () => {
+      component.title = "Meu Stepper";
+      fixture.detectChanges();
+
+      const titleElement = fixture.debugElement.query(By.css(".stepper-title"));
+      expect(titleElement).toBeTruthy();
+      expect(titleElement.nativeElement.textContent).toContain("Meu Stepper");
+    });
+  });
+
+  // Testes adicionais para melhor cobertura
+  describe("Outros comportamentos", () => {
+    it("deve permitir navegação entre múltiplos passos", async() => {
+      const steps = [
+        { isActive: false } as StepComponent,
+        { isActive: false } as StepComponent,
+        { isActive: false } as StepComponent,
+      ];
+      component.steps = new QueryList<StepComponent>();
+      component.steps.reset(steps);
+
+      component.ngAfterContentInit();
+      expect(component.activeStepIndex).toBe(0);
+      expect(steps[0].isActive).toBe(true);
+
+      component.nextStep();
+
+      expect(component.activeStepIndex).toBe(1);
+      expect(component.steps.get(0)?.isActive).toBe(true);
+
+      component.nextStep();
+      expect(component.activeStepIndex).toBe(2);
+      expect(component.steps.get(2)?.isActive).toBe(true);
+
+      component.prevStep();
+      expect(component.activeStepIndex).toBe(1);
+      expect(component.steps.get(1)?.isActive).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { StepperComponent } from './stepper';
+
+const meta: Meta<StepperComponent> = {
+  title: 'Componentes/Stepper',
+  component: StepperComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+  },
+  args: {
+    maxReachedEvent: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<StepperComponent>;
+
+const renderStepper = (steps: string) => ({
+  template: `
+    <cao-stepper title="Etapas do cadastro" (maxReachedEvent)="maxReachedEvent()">
+      ${steps}
+    </cao-stepper>
+  `,
+  props: { maxReachedEvent: fn() },
+});
+
+export const Padrao: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Dados pessoais" />
+      <cao-step title="Endereço" />
+      <cao-step title="Confirmação" />
+    `),
+};
+
+export const ComTitulo: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Etapa 1" />
+      <cao-step title="Etapa 2" />
+      <cao-step title="Etapa 3" />
+    `),
+};
+
+export const MultiplastEtapas: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Cadastro" />
+      <cao-step title="Documentos" />
+      <cao-step title="Bancário" />
+      <cao-step title="Revisão" />
+      <cao-step title="Conclusão" />
+    `),
+};
+
+export const SomenteStep: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex;gap:16px">
+        <cao-step title="Ativa" isActive="true" />
+        <cao-step title="Inativa" />
+      </div>
+    `,
+  }),
+};
+
+export const StepComStepComponent: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Primeira" />
+      <cao-step title="Segunda" />
+      <cao-step title="Terceira" isActive="true" />
+    `),
+};

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

@@ -0,0 +1,57 @@
+import { AfterContentInit, EventEmitter, Output , ContentChildren, Input, QueryList , Component } from "@angular/core";
+
+
+import { StepComponent } from "./step/step";
+
+@Component({
+  selector: "cao-stepper",
+  standalone: true,
+  templateUrl: "./stepper.html",
+  styleUrl: "./stepper.css",
+})
+export class StepperComponent implements AfterContentInit {
+  constructor() {}
+  @ContentChildren(StepComponent) steps!: QueryList<StepComponent>;
+  @Input() title!: string;
+  activeStepIndex = 0;
+  lengthStep = 0;
+  showLine = true;
+
+  @Output() readonly maxReachedEvent: EventEmitter<null> = new EventEmitter<null>();
+
+  ngAfterContentInit(): void {
+    if (this.steps.length > 0) {
+      this.steps.toArray()[0].isActive = true;
+      this.lengthStep = this.steps.length;
+    }
+  }
+
+  nextStep() {
+    if (this.steps.length > 0) {
+      if (this.activeStepIndex < this.steps.length - 1) {
+        this.activeStepIndex++;
+        this.steps.toArray()[this.activeStepIndex].isActive = true;
+      } else {
+        this.maxReachedEvent.emit(null);
+      }
+    }
+  }
+
+  prevStep() {
+    if (this.steps.length > 0) {
+      if (this.activeStepIndex > 0) {
+        this.steps.toArray()[this.activeStepIndex].isActive = false;
+        this.activeStepIndex--;
+        this.steps.toArray()[this.activeStepIndex].isActive = true;
+      }
+    }
+  }
+
+  resetStepper() {
+    this.activeStepIndex = 0;
+    this.steps.forEach((step) => (step.isActive = false));
+    if (this.steps.length > 0) {
+      this.steps.toArray()[0].isActive = true;
+    }
+  }
+}

package/src/lib/shared/components/tab-group/tab-group.component.html

@@ -0,0 +1,84 @@
+<div
+  #header
+  [class]="'cao-tab-header cao-tab-header--align-' + labelAlign"
+>
+  <div class="cao-tab-label-list" role="tablist">
+    @for (tab of tabList; track $index; let i = $index) {
+      <button
+        #tabBtn
+        role="tab"
+        type="button"
+        class="cao-tab-label"
+        [class.cao-tab-label--active]="isActive(i)"
+        [class.cao-tab-label--disabled]="tab.isDisabled"
+        [attr.aria-selected]="isActive(i)"
+        [attr.aria-disabled]="tab.isDisabled || null"
+        [attr.tabindex]="isActive(i) ? 0 : -1"
+        [attr.id]="'cao-tab-label-' + i"
+        [attr.aria-controls]="'cao-tab-content-' + i"
+        (click)="onTabClick(i)"
+        (keydown)="onKeydown($event, i)"
+        (focus)="onFocus(i)"
+      >
+        @if (tab.leadingIcon) {
+        <span class="leading-icon">
+            @if (tab.isLucideIcon) {
+            <svg [lucideIcon]="tab.leadingIcon" [style.color]="isActive(i) ? iconColorActive : iconColorInactive" [strokeWidth]="strokeWidthIcon"></svg>
+            } @else {
+            <img alt="icon" [src]="tab.leadingIcon" />
+            }
+        </span>
+        }
+
+        @if (tab.labelTemplate) {
+          <ng-container [ngTemplateOutlet]="tab.labelTemplate" />
+        } @else {
+          <span class="cao-tab-labeltext">{{ tab.label }}</span>
+        }
+
+        @if (tab.trailingIcon) {
+        <span class="trailing-icon">
+            @if (tab.isLucideIcon) {
+            <svg [lucideIcon]="tab.trailingIcon" [style.color]="isActive(i) ? iconColorActive : iconColorInactive" [strokeWidth]="strokeWidthIcon"></svg>
+            } @else {
+            <img alt="icon" [src]="tab.trailingIcon" />
+            }
+        </span>
+        }
+      </button>
+    }
+  </div>
+
+  <!-- Ink bar animado -->
+  <div class="cao-tab-ink-bar-track">
+    <div #inkBar class="cao-tab-ink-bar"></div>
+  </div>
+</div>
+
+<!-- ═══ Tab Bodies ════════════════════════════════════════════════════════ -->
+<div
+  class="cao-tab-body-wrapper"
+  [class.cao-tab-body-wrapper--dynamic]="dynamicHeight"
+>
+  @for (tab of tabList; track $index; let i = $index) {
+    <div
+      role="tabpanel"
+      class="cao-tab-body"
+      [class.cao-tab-body--active]="isActive(i)"
+      [attr.id]="'cao-tab-content-' + i"
+      [attr.aria-labelledby]="'cao-tab-label-' + i"
+      [attr.aria-hidden]="!isActive(i)"
+      [style.--cao-tab-anim-duration]="animationDuration"
+    >
+      <div class="cao-tab-bodycontent">
+        @if (tab.lazyContent) {
+          @if (isActive(i) || wasActivated(i)) {
+            <ng-container [ngTemplateOutlet]="tab.lazyContent" />
+          }
+        } @else {
+          <ng-container [ngTemplateOutlet]="tab.content" />
+        }
+      </div>
+    </div>
+  }
+</div>

package/src/lib/shared/components/tab-group/tab-group.component.scss

@@ -0,0 +1,151 @@
+:host {
+  --cao-tab-font-family:     inherit;
+  --cao-tab-font-size:       0.875rem;   
+  --cao-tab-font-weight:     500;
+  --cao-tab-label-height:    48px;
+  --cao-tab-Label-px:        16px;
+  --cao-tab-Label-gap:       6px;
+
+  --cao-tab-color-text:        #6b7280;  
+  --cao-tab-color-active:      #4f46e5;  
+  --cao-tab-color-hover-bg:    #f3f4f6;  
+  --cao-tab-color-disabled:    #d1d5db;  
+  --cao-tab-color-ink-bar:     #4f46e5;
+  --cao-tab-color-header-border: #e5e7eb;
+
+  --cao-tab-color-header-border: #e5e7eb;
+
+  --cao-tab-ink-bar-height:  2px;
+  --cao-tab-content-pt:      20px;
+  --cao-tab-radius:          4px;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cao-tab-header {
+  position: relative;
+  border-bottom: 1px solid var(--cao-tab-color-header-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.cao-tab-header::-webkit-scrollbar { display: none; }
+
+.cao-tab-label-list {
+  display: flex;
+  align-items: center;
+  min-width: max-content;
+}
+
+.cao-tab-header--align-center .cao-tab-label-list { justify-content: center; }
+.cao-tab-header--align-end    .cao-tab-label-list { justify-content: flex-end; }
+.cao-tab-header--align-start  .cao-tab-label-list { justify-content: flex-start; }
+
+.cao-tab-label {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-items: center;
+  gap: var(--cao-tab-label-gap);
+  height: var(--cao-tab-label-height);
+  padding: 0 var(--cao-tab-label-px);
+
+  font-family: var(--cao-tab-font-family);
+  font-size:   var(--cao-tab-font-size);
+  font-weight: var(--cao-tab-font-weight);
+  color: var(--cao-tab-color-text);
+  white-space: nowrap;
+
+  background: transparent;
+  border: none;
+  border-radius: var(--cao-tab-radius) var(--cao-tab-radius) 0 0;
+  cursor: pointer;
+  user-select: none;
+  transition: color 180ms ease, background-color 180ms ease;
+
+  outline: none;
+}
+
+.cao-tab-label:focus-visible {
+  outline: 2px solid var(--cao-tab-color-active);
+  outline-offset: -2px;
+}
+
+.cao-tab-label:hover:not(.cao-tab-label--disabled) {
+  background-color: var(--cao-tab-color-hover-bg);
+  color: var(--cao-tab-color-active);
+}
+
+.cao-tab-label--active {
+  color: var(--cao-tab-color-active);
+}
+
+.cao-tab-label--disabled {
+  color: var(--cao-tab-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.cao-tab-label__icon {
+  flex-shrink: 0;
+  color: inherit;
+  transition: color 180ms ease;
+}
+
+.cao-tab-ink-bar-track {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--cao-tab-ink-bar-height);
+  pointer-events: none;
+}
+
+.cao-tab-ink-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  background-color: var(--cao-tab-color-ink-bar);
+  border-radius: 2px 2px 0 0;
+  transition-property: transform, width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms; /* sobrescrito por JS */
+}
+
+.cao-tab-body-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.cao-tab-body-wrapper--dynamic {
+  height: auto;
+}
+
+.cao-tab-body {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(24px);
+  transition:
+    opacity   var(--cao-tab-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1),
+    transform var(--cao-tab-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cao-tab-body--active {
+  position: relative; 
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+.cao-tab-body__content {
+  padding-top: var(--cao-tab-content-pt);
+}

package/src/lib/shared/components/tab-group/tab-group.spec.ts

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