ngx-opalbytes-components 1.25.0 → 1.26.0

package/src/lib/shared/components/radio/radio.component.spec.ts

@@ -0,0 +1,128 @@
+import { Component, Input } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+
+import { CaoRadioButtonComponent } from "./radio-button.component";
+import { CaoRadioGroupComponent } from "./radio-group.component";
+
+@Component({
+  standalone: true,
+  imports: [FormsModule, CaoRadioGroupComponent, CaoRadioButtonComponent],
+  template: `
+    <cao-radio-group
+      [(ngModel)]="value"
+      [isDisabled]="isDisabled"
+      ariaLabel="Opções">
+      <cao-radio-button value="option-1" label="Opção 1" />
+      <cao-radio-button value="option-2" label="Opção 2" />
+      <cao-radio-button
+        value="option-3"
+        label="Opção 3"
+        [isDisabled]="isOptionDisabled" />
+    </cao-radio-group>
+  `,
+})
+class RadioHostComponent {
+  @Input() value = "option-1";
+  @Input() isDisabled = false;
+  @Input() isOptionDisabled = false;
+}
+
+describe("CaoRadioGroupComponent", () => {
+  let fixture: ComponentFixture<RadioHostComponent>;
+  let host: RadioHostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RadioHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RadioHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.changeDetectorRef.detectChanges();
+  });
+
+  function getInputs(): HTMLInputElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll("input"));
+  }
+
+  function select(input: HTMLInputElement): void {
+    input.checked = true;
+    input.dispatchEvent(new Event("change"));
+    fixture.detectChanges();
+  }
+
+  it("should create the group and radio buttons", () => {
+    expect(fixture.nativeElement.querySelector("cao-radio-group")).toBeTruthy();
+    expect(fixture.nativeElement.querySelectorAll("cao-radio-button").length).toBe(3);
+  });
+
+  it("should reflect the initial value", () => {
+    const inputs = getInputs();
+
+    expect(inputs[0].checked).toBe(true);
+    expect(inputs[1].checked).toBe(false);
+  });
+
+  it("should select an option and emit the value", () => {
+    const group = fixture.debugElement.query(
+      (element) => element.componentInstance instanceof CaoRadioGroupComponent,
+    ).componentInstance as CaoRadioGroupComponent;
+    const valueChange = vi.fn();
+    const selectionChange = vi.fn();
+
+    group.valueChange.subscribe(valueChange);
+    group.selectionChange.subscribe(selectionChange);
+
+    select(getInputs()[1]);
+
+    expect(host.value).toBe("option-2");
+    expect(valueChange).toHaveBeenCalledWith("option-2");
+    expect(selectionChange).toHaveBeenCalledWith(
+      expect.objectContaining({ value: "option-2" }),
+    );
+  });
+
+  it("should disable every option when the group is disabled", () => {
+    fixture.componentRef.setInput("isDisabled", true);
+    fixture.detectChanges();
+
+    const inputs = getInputs();
+    expect(inputs.every((input) => input.disabled)).toBe(true);
+
+    select(inputs[1]);
+    expect(host.value).toBe("option-1");
+  });
+
+  it("should not select an individually disabled option", () => {
+    fixture.componentRef.setInput("isOptionDisabled", true);
+    fixture.detectChanges();
+
+    const inputs = getInputs();
+    expect(inputs[2].disabled).toBe(true);
+
+    select(inputs[2]);
+    expect(host.value).toBe("option-1");
+  });
+
+  it("should expose radiogroup accessibility attributes", () => {
+    const group: HTMLElement =
+      fixture.nativeElement.querySelector("cao-radio-group");
+
+    expect(group.getAttribute("role")).toBe("radiogroup");
+    expect(group.getAttribute("aria-label")).toBe("Opções");
+  });
+
+  it("should support ControlValueAccessor on the group", () => {
+    const group = fixture.debugElement.query(
+      (element) => element.componentInstance instanceof CaoRadioGroupComponent,
+    ).componentInstance as CaoRadioGroupComponent;
+
+    group.writeValue("option-2");
+    fixture.detectChanges();
+
+    expect(getInputs()[1].checked).toBe(true);
+  });
+});

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

@@ -0,0 +1,128 @@
+import { FormsModule } from '@angular/forms';
+
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoRadioButtonComponent } from './radio-button.component';
+import { CaoRadioGroupComponent } from './radio-group.component';
+
+const meta: Meta<CaoRadioGroupComponent> = {
+  title: 'Componentes/Radio',
+  component: CaoRadioGroupComponent,
+  tags: ['autodocs'],
+  decorators: [
+    (story) => ({
+      ...story,
+      moduleMetadata: {
+        imports: [FormsModule, CaoRadioGroupComponent, CaoRadioButtonComponent],
+      },
+    }),
+  ],
+  argTypes: {
+    orientation: { control: 'select', options: ['vertical', 'horizontal'] },
+    labelPosition: { control: 'select', options: ['before', 'after'] },
+    isDisabled: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    color: { control: 'color' },
+    unselectedColor: { control: 'color' },
+    disabledColor: { control: 'color' },
+    labelColor: { control: 'color' },
+    disabledLabelColor: { control: 'color' },
+    focusRingColor: { control: 'color' },
+    size: { control: 'text' },
+    animationDuration: { control: 'text' },
+    gap: { control: 'text' },
+  },
+  args: {
+    value: 'option-1',
+    orientation: 'vertical',
+    labelPosition: 'after',
+    isDisabled: false,
+    required: false,
+    valueChange: fn(),
+    selectionChange: fn(),
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <cao-radio-group
+        [(ngModel)]="value"
+        [orientation]="orientation"
+        [labelPosition]="labelPosition"
+        [isDisabled]="isDisabled"
+        [required]="required"
+        [color]="color"
+        [unselectedColor]="unselectedColor"
+        [disabledColor]="disabledColor"
+        [labelColor]="labelColor"
+        [disabledLabelColor]="disabledLabelColor"
+        [focusRingColor]="focusRingColor"
+        [size]="size"
+        [animationDuration]="animationDuration"
+        [gap]="gap"
+        (valueChange)="valueChange($event)"
+        (selectionChange)="selectionChange($event)">
+        <cao-radio-button value="option-1" label="Opção 1"></cao-radio-button>
+        <cao-radio-button value="option-2" label="Opção 2"></cao-radio-button>
+        <cao-radio-button value="option-3" label="Opção 3"></cao-radio-button>
+      </cao-radio-group>
+    `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<CaoRadioGroupComponent>;
+
+export const Padrao: Story = {};
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+    gap: '16px',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    isDisabled: true,
+  },
+};
+
+export const OpcaoDesabilitada: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <cao-radio-group
+        [(ngModel)]="value"
+        [orientation]="orientation"
+        [labelPosition]="labelPosition"
+        [isDisabled]="isDisabled"
+        [color]="color"
+        [unselectedColor]="unselectedColor"
+        [disabledColor]="disabledColor"
+        (valueChange)="valueChange($event)"
+        (selectionChange)="selectionChange($event)">
+        <cao-radio-button value="option-1" label="Disponível"></cao-radio-button>
+        <cao-radio-button value="option-2" label="Indisponível" [isDisabled]="true"></cao-radio-button>
+        <cao-radio-button value="option-3" label="Disponível"></cao-radio-button>
+      </cao-radio-group>
+    `,
+  }),
+};
+
+export const CoresCustomizadas: Story = {
+  args: {
+    color: '#16a34a',
+    unselectedColor: '#94a3b8',
+    labelColor: '#166534',
+    size: '24px',
+    gap: '12px',
+  },
+};
+
+export const LabelAntes: Story = {
+  args: {
+    labelPosition: 'before',
+  },
+};

package/src/lib/shared/components/slide-toggle/slide-toggle.component.css

@@ -0,0 +1,135 @@
+:host {
+  --cao-slide-toggle-track: #d1d5db;
+  --cao-slide-toggle-track-checked: #4f46e5;
+  --cao-slide-toggle-thumb: #ffffff;
+  --cao-slide-toggle-thumb-checked: #ffffff;
+  --cao-slide-toggle-track-disabled: #e5e7eb;
+  --cao-slide-toggle-thumb-disabled: #f3f4f6;
+  --cao-slide-toggle-label: #111827;
+  --cao-slide-toggle-label-disabled: #9ca3af;
+  --cao-slide-toggle-focus-ring: rgba(79, 70, 229, 0.35);
+  --cao-slide-toggle-track-width: 36px;
+  --cao-slide-toggle-track-height: 20px;
+  --cao-slide-toggle-thumb-size: 16px;
+  --cao-slide-toggle-thumb-icon-size: 12px;
+  --cao-slide-toggle-thumb-icon-color: currentColor;
+  --cao-slide-toggle-duration: 200ms;
+
+  display: inline-flex;
+}
+
+.cao-slide-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cao-slide-toggle--disabled {
+  cursor: not-allowed;
+}
+
+.cao-slide-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.cao-slide-toggle__track {
+  position: relative;
+  flex: none;
+  width: var(--cao-slide-toggle-track-width);
+  height: var(--cao-slide-toggle-track-height);
+  border-radius: 999px;
+  background-color: var(--cao-slide-toggle-track);
+  transition: background-color var(--cao-slide-toggle-duration) ease;
+}
+
+.cao-slide-toggle__thumb {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cao-slide-toggle-thumb-size);
+  height: var(--cao-slide-toggle-thumb-size);
+  overflow: hidden;
+  border-radius: 50%;
+  background-color: var(--cao-slide-toggle-thumb);
+  transform: translateY(-50%);
+  transition:
+    transform var(--cao-slide-toggle-duration) ease,
+    background-color var(--cao-slide-toggle-duration) ease;
+}
+
+.cao-slide-toggle__thumb-icon {
+  flex: none;
+  width: var(--cao-slide-toggle-thumb-icon-size);
+  height: var(--cao-slide-toggle-thumb-icon-size);
+  color: var(--cao-slide-toggle-thumb-icon-color);
+  pointer-events: none;
+  object-fit: contain;
+}
+
+.cao-slide-toggle__label {
+  color: var(--cao-slide-toggle-label);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.cao-slide-toggle__label:empty {
+  display: none;
+}
+
+.cao-slide-toggle--checked .cao-slide-toggle__track {
+  background-color: var(--cao-slide-toggle-track-checked);
+}
+
+.cao-slide-toggle--checked .cao-slide-toggle__thumb {
+  background-color: var(--cao-slide-toggle-thumb-checked);
+  transform: translate(
+      calc(
+        var(--cao-slide-toggle-track-width) -
+          var(--cao-slide-toggle-thumb-size) -
+          4px
+      ),
+      -50%
+    );
+}
+
+.cao-slide-toggle--disabled .cao-slide-toggle__track {
+  background-color: var(--cao-slide-toggle-track-disabled);
+}
+
+.cao-slide-toggle--disabled .cao-slide-toggle__thumb {
+  background-color: var(--cao-slide-toggle-thumb-disabled);
+}
+
+.cao-slide-toggle--disabled .cao-slide-toggle__thumb-icon {
+  opacity: 0.65;
+}
+
+.cao-slide-toggle--disabled .cao-slide-toggle__label {
+  color: var(--cao-slide-toggle-label-disabled);
+}
+
+.cao-slide-toggle__input:focus-visible + .cao-slide-toggle__track {
+  box-shadow: 0 0 0 3px var(--cao-slide-toggle-focus-ring);
+}
+
+.cao-slide-toggle--label-before .cao-slide-toggle__track {
+  order: 2;
+}
+
+.cao-slide-toggle--label-before .cao-slide-toggle__label {
+  order: 1;
+}

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

@@ -0,0 +1,48 @@
+<label
+  class="cao-slide-toggle"
+  [class.cao-slide-toggle--checked]="checked"
+  [class.cao-slide-toggle--disabled]="isDisabled"
+  [class.cao-slide-toggle--label-before]="labelPosition === 'before'">
+  <input
+    #input
+    class="cao-slide-toggle__input"
+    type="checkbox"
+    role="switch"
+    [checked]="checked"
+    [disabled]="isDisabled"
+    [required]="required"
+    [attr.name]="name || null"
+    [attr.id]="id || null"
+    [attr.aria-label]="ariaLabel || null"
+    [attr.data-cy]="dataCy || null"
+    (change)="onInputChange($event)"
+    (blur)="onBlur()"
+    (keydown.enter)="onEnter($event)" />
+
+  <span class="cao-slide-toggle__track" aria-hidden="true">
+    <span class="cao-slide-toggle__thumb">
+      @if (resolvedThumbIcon) {
+        @if (isLucideThumbIcon) {
+          <svg
+            class="cao-slide-toggle__thumb-icon"
+            [lucideIcon]="resolvedThumbIcon"
+            [size]="thumbIconSize"
+            [strokeWidth]="thumbIconStrokeWidth"></svg>
+        } @else {
+          <img
+            class="cao-slide-toggle__thumb-icon"
+            alt=""
+            [src]="resolvedThumbIcon" />
+        }
+      }
+    </span>
+  </span>
+
+  <span class="cao-slide-toggle__label">
+    @if (label) {
+      {{ label }}
+    } @else {
+      <ng-content />
+    }
+  </span>
+</label>

package/src/lib/shared/components/slide-toggle/slide-toggle.component.spec.ts

@@ -0,0 +1,155 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { LucideCheck, LucideX, provideLucideIcons } from "@lucide/angular";
+
+import { CaoSlideToggleComponent } from "./slide-toggle.component";
+
+describe("CaoSlideToggleComponent", () => {
+  let component: CaoSlideToggleComponent;
+  let fixture: ComponentFixture<CaoSlideToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoSlideToggleComponent],
+      providers: [provideLucideIcons(LucideCheck, LucideX)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoSlideToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should toggle and emit changes", () => {
+    const checkedChange = vi.fn();
+    const toggleChange = vi.fn();
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector("input");
+
+    component.checkedChange.subscribe(checkedChange);
+    component.toggleChange.subscribe(toggleChange);
+
+    input.checked = true;
+    input.dispatchEvent(new Event("change"));
+    fixture.detectChanges();
+
+    expect(component.checked).toBe(true);
+    expect(checkedChange).toHaveBeenCalledWith(true);
+    expect(toggleChange).toHaveBeenCalledWith({
+      checked: true,
+      source: component,
+    });
+  });
+
+  it("should not toggle when disabled", () => {
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector("input");
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    input.checked = true;
+    input.dispatchEvent(new Event("change"));
+    fixture.detectChanges();
+
+    expect(component.checked).toBe(false);
+    expect(input.disabled).toBe(true);
+  });
+
+  it("should support ControlValueAccessor", () => {
+    const onChange = vi.fn();
+    const onTouched = vi.fn();
+
+    component.registerOnChange(onChange);
+    component.registerOnTouched(onTouched);
+    component.writeValue(true);
+    component.onBlur();
+
+    expect(component.checked).toBe(true);
+    expect(onTouched).toHaveBeenCalled();
+
+    component.toggle();
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it("should enable and disable programmatically", () => {
+    component.disable();
+    expect(component.isDisabled).toBe(true);
+
+    component.enable();
+    expect(component.isDisabled).toBe(false);
+  });
+
+  it("should disable through setDisabledState", () => {
+    component.setDisabledState(true);
+    expect(component.isDisabled).toBe(true);
+  });
+
+  it("should render Lucide icons for both states", () => {
+    fixture.componentRef.setInput("thumbIcon", "x");
+    fixture.componentRef.setInput("thumbCheckedIcon", "check");
+    fixture.componentRef.setInput("isLucideThumbIcon", true);
+    fixture.componentRef.setInput("thumbIconColor", "#6b7280");
+    fixture.componentRef.setInput("thumbCheckedIconColor", "#16a34a");
+    fixture.componentRef.setInput("checked", true);
+    fixture.detectChanges();
+
+    const icon = fixture.nativeElement.querySelector(
+      ".cao-slide-toggle__thumb svg",
+    );
+
+    expect(
+      fixture.nativeElement.querySelector(".cao-slide-toggle__thumb img"),
+    ).toBeNull();
+    expect(icon).toBeTruthy();
+    expect(component.resolvedThumbIcon).toBe("check");
+    expect(component.resolvedThumbIconColor).toBe("#16a34a");
+
+    fixture.componentRef.setInput("checked", false);
+    fixture.detectChanges();
+
+    expect(component.resolvedThumbIcon).toBe("x");
+    expect(component.resolvedThumbIconColor).toBe("#6b7280");
+    expect(
+      fixture.nativeElement.querySelector(".cao-slide-toggle__thumb svg"),
+    ).toBeTruthy();
+  });
+
+  it("should fall back to thumbIcon when thumbCheckedIcon is empty", () => {
+    fixture.componentRef.setInput("thumbIcon", "check");
+    fixture.componentRef.setInput("isLucideThumbIcon", true);
+    fixture.componentRef.setInput("checked", true);
+    fixture.detectChanges();
+
+    expect(component.resolvedThumbIcon).toBe("check");
+    expect(
+      fixture.nativeElement.querySelector(".cao-slide-toggle__thumb svg"),
+    ).toBeTruthy();
+  });
+
+  it("should render an image when isLucideThumbIcon is false", () => {
+    fixture.componentRef.setInput("thumbIcon", "icon.svg");
+    fixture.detectChanges();
+
+    const image: HTMLImageElement = fixture.nativeElement.querySelector(
+      ".cao-slide-toggle__thumb img",
+    );
+
+    expect(image).toBeTruthy();
+    expect(image.getAttribute("src")).toBe("icon.svg");
+    expect(
+      fixture.nativeElement.querySelector(".cao-slide-toggle__thumb svg"),
+    ).toBeNull();
+  });
+
+  it("should not render an icon when no thumb icon is provided", () => {
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector(
+        ".cao-slide-toggle__thumb svg, .cao-slide-toggle__thumb img",
+      ),
+    ).toBeNull();
+  });
+});