ngx-opalbytes-components 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/src/lib/shared/components/checkbox/checkbox.component.css

@@ -0,0 +1,131 @@
+:host {
+  --cao-checkbox-color: #4f46e5;
+  --cao-checkbox-unselected: #6b7280;
+  --cao-checkbox-disabled: #d1d5db;
+  --cao-checkbox-label: #111827;
+  --cao-checkbox-label-disabled: #9ca3af;
+  --cao-checkbox-focus-ring: rgba(79, 70, 229, 0.35);
+  --cao-checkbox-size: 20px;
+  --cao-checkbox-radius: 4px;
+  --cao-checkbox-duration: 200ms;
+  --cao-checkbox-icon-size: 14px;
+  --cao-checkbox-icon-color: #ffffff;
+
+  display: inline-flex;
+}
+
+.cao-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cao-checkbox--disabled {
+  cursor: not-allowed;
+}
+
+.cao-checkbox__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-checkbox__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--cao-checkbox-size);
+  height: var(--cao-checkbox-size);
+  border: 2px solid var(--cao-checkbox-unselected);
+  border-radius: var(--cao-checkbox-radius);
+  background-color: transparent;
+  transition:
+    background-color var(--cao-checkbox-duration) ease,
+    border-color var(--cao-checkbox-duration) ease;
+}
+
+.cao-checkbox__icon {
+  flex: none;
+  width: var(--cao-checkbox-icon-size);
+  height: var(--cao-checkbox-icon-size);
+  color: var(--cao-checkbox-icon-color);
+  pointer-events: none;
+  object-fit: contain;
+}
+
+.cao-checkbox__icon--default {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.cao-checkbox__label {
+  color: var(--cao-checkbox-label);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.cao-checkbox__label:empty {
+  display: none;
+}
+
+.cao-checkbox:not(.cao-checkbox--disabled):hover .cao-checkbox__control {
+  border-color: var(--cao-checkbox-color);
+}
+
+.cao-checkbox--checked .cao-checkbox__control,
+.cao-checkbox--indeterminate .cao-checkbox__control {
+  border-color: var(--cao-checkbox-color);
+  background-color: var(--cao-checkbox-color);
+}
+
+.cao-checkbox--invalid .cao-checkbox__control {
+  border-color: var(--error, #dc2626);
+}
+
+.cao-checkbox--valid .cao-checkbox__control {
+  border-color: var(--success, #16a34a);
+}
+
+.cao-checkbox--disabled .cao-checkbox__control {
+  border-color: var(--cao-checkbox-disabled);
+  background-color: transparent;
+}
+
+.cao-checkbox--disabled.cao-checkbox--checked .cao-checkbox__control,
+.cao-checkbox--disabled.cao-checkbox--indeterminate .cao-checkbox__control {
+  background-color: var(--cao-checkbox-disabled);
+}
+
+.cao-checkbox--disabled .cao-checkbox__icon {
+  opacity: 0.65;
+}
+
+.cao-checkbox--disabled .cao-checkbox__label {
+  color: var(--cao-checkbox-label-disabled);
+}
+
+.cao-checkbox__input:focus-visible + .cao-checkbox__control {
+  box-shadow: 0 0 0 3px var(--cao-checkbox-focus-ring);
+}
+
+.cao-checkbox--label-before .cao-checkbox__control {
+  order: 2;
+}
+
+.cao-checkbox--label-before .cao-checkbox__label {
+  order: 1;
+}

package/src/lib/shared/components/checkbox/checkbox.component.html

@@ -0,0 +1,84 @@
+<label
+  class="cao-checkbox"
+  [class.cao-checkbox--checked]="checked && !indeterminate"
+  [class.cao-checkbox--indeterminate]="indeterminate"
+  [class.cao-checkbox--disabled]="isDisabled"
+  [class.cao-checkbox--label-before]="labelPosition === 'before'"
+  [class.cao-checkbox--invalid]="hasInvalidState"
+  [class.cao-checkbox--valid]="hasValidState">
+  <input
+    #input
+    class="cao-checkbox__input"
+    type="checkbox"
+    [checked]="checked"
+    [indeterminate]="indeterminate"
+    [disabled]="isDisabled"
+    [required]="required"
+    [attr.name]="name || null"
+    [attr.id]="inputId"
+    [attr.aria-label]="ariaLabel || null"
+    [attr.aria-labelledby]="ariaLabelledBy || null"
+    [attr.data-cy]="dataCy || null"
+    (change)="onInputChange($event)"
+    (blur)="onBlur()" />
+
+  <span class="cao-checkbox__control" aria-hidden="true">
+    @if (indeterminate) {
+      @if (indeterminateIcon) {
+        @if (isLucideIcon) {
+          <svg
+            class="cao-checkbox__icon"
+            [lucideIcon]="indeterminateIcon"
+            [size]="iconSize"
+            [strokeWidth]="iconStrokeWidth"></svg>
+        } @else {
+          <img class="cao-checkbox__icon" alt="" [src]="indeterminateIcon" />
+        }
+      } @else {
+        <svg
+          class="cao-checkbox__icon cao-checkbox__icon--default"
+          viewBox="0 0 24 24"
+          aria-hidden="true">
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+      }
+    } @else if (checked) {
+      @if (checkedIcon) {
+        @if (isLucideIcon) {
+          <svg
+            class="cao-checkbox__icon"
+            [lucideIcon]="checkedIcon"
+            [size]="iconSize"
+            [strokeWidth]="iconStrokeWidth"></svg>
+        } @else {
+          <img class="cao-checkbox__icon" alt="" [src]="checkedIcon" />
+        }
+      } @else {
+        <svg
+          class="cao-checkbox__icon cao-checkbox__icon--default"
+          viewBox="0 0 24 24"
+          aria-hidden="true">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    } @else if (uncheckedIcon) {
+      @if (isLucideIcon) {
+        <svg
+          class="cao-checkbox__icon"
+          [lucideIcon]="uncheckedIcon"
+          [size]="iconSize"
+          [strokeWidth]="iconStrokeWidth"></svg>
+      } @else {
+        <img class="cao-checkbox__icon" alt="" [src]="uncheckedIcon" />
+      }
+    }
+  </span>
+
+  <span class="cao-checkbox__label">
+    @if (label) {
+      {{ label }}
+    } @else {
+      <ng-content />
+    }
+  </span>
+</label>

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

@@ -0,0 +1,344 @@
+import { Component, Input } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormControl, FormsModule, Validators } from "@angular/forms";
+import { LucideCheck, LucideMinus, LucideX, provideLucideIcons } from "@lucide/angular";
+
+import { CaoCheckboxComponent } from "./checkbox.component";
+
+@Component({
+  standalone: true,
+  imports: [FormsModule, CaoCheckboxComponent],
+  template: `
+    <cao-checkbox
+      [(ngModel)]="checked"
+      [isDisabled]="isDisabled"
+      label="Aceito os termos"
+      name="terms"
+      dataCy="checkbox-terms"></cao-checkbox>
+  `,
+})
+class CheckboxHostComponent {
+  @Input() checked = false;
+  @Input() isDisabled = false;
+}
+
+describe("CaoCheckboxComponent", () => {
+  let component: CaoCheckboxComponent;
+  let fixture: ComponentFixture<CaoCheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoCheckboxComponent],
+      providers: [provideLucideIcons(LucideCheck, LucideMinus, LucideX)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoCheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  function getInput(): HTMLInputElement {
+    return fixture.nativeElement.querySelector("input");
+  }
+
+  function toggleInput(checked = true): void {
+    const input = getInput();
+    input.checked = checked;
+    input.dispatchEvent(new Event("change"));
+    fixture.detectChanges();
+  }
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should toggle and emit changes", () => {
+    const checkedChange = vi.fn();
+    const change = vi.fn();
+
+    component.checkedChange.subscribe(checkedChange);
+    component.checkboxChange.subscribe(change);
+
+    toggleInput(true);
+
+    expect(component.checked).toBe(true);
+    expect(checkedChange).toHaveBeenCalledWith(true);
+    expect(change).toHaveBeenCalledWith({
+      checked: true,
+      source: component,
+    });
+  });
+
+  it("should not toggle when disabled", () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    toggleInput(true);
+
+    expect(component.checked).toBe(false);
+    expect(getInput().disabled).toBe(true);
+  });
+
+  it("should support ControlValueAccessor", () => {
+    const onChange = vi.fn();
+    const onTouched = vi.fn();
+
+    component.registerOnChange(onChange);
+    component.registerOnTouched(onTouched);
+    component.writeValue(true);
+
+    expect(component.checked).toBe(true);
+
+    component.onBlur();
+    expect(onTouched).toHaveBeenCalled();
+
+    component.toggle();
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it("should write null values as unchecked", () => {
+    component.writeValue(null);
+
+    expect(component.checked).toBe(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);
+
+    component.setDisabledState(false);
+    expect(component.isDisabled).toBe(false);
+  });
+
+  it("should clear indeterminate and check when clicked", () => {
+    const indeterminateChange = vi.fn();
+
+    component.indeterminate = true;
+    component.indeterminateChange.subscribe(indeterminateChange);
+    fixture.detectChanges();
+
+    toggleInput(true);
+
+    expect(component.checked).toBe(true);
+    expect(component.indeterminate).toBe(false);
+    expect(indeterminateChange).toHaveBeenCalledWith(false);
+  });
+
+  it("should set indeterminate programmatically", () => {
+    const indeterminateChange = vi.fn();
+
+    component.indeterminateChange.subscribe(indeterminateChange);
+    component.setIndeterminate(true);
+
+    expect(component.indeterminate).toBe(true);
+    expect(indeterminateChange).toHaveBeenCalledWith(true);
+  });
+
+  it("should render the default checked icon", () => {
+    fixture.componentRef.setInput("checked", true);
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector(".cao-checkbox__icon--default"),
+    ).toBeTruthy();
+  });
+
+  it("should render the default indeterminate icon", () => {
+    fixture.componentRef.setInput("indeterminate", true);
+    fixture.detectChanges();
+
+    const icon = fixture.nativeElement.querySelector(
+      ".cao-checkbox__icon--default line",
+    );
+
+    expect(icon).toBeTruthy();
+  });
+
+  it("should render Lucide icons for every state", () => {
+    fixture.componentRef.setInput("checkedIcon", "check");
+    fixture.componentRef.setInput("uncheckedIcon", "x");
+    fixture.componentRef.setInput("indeterminateIcon", "minus");
+    fixture.componentRef.setInput("isLucideIcon", true);
+
+    fixture.componentRef.setInput("checked", true);
+    fixture.detectChanges();
+
+    expect(component.checkedIcon).toBe("check");
+    expect(
+      fixture.nativeElement.querySelector("svg.cao-checkbox__icon"),
+    ).toBeTruthy();
+    expect(
+      fixture.nativeElement.querySelector(".cao-checkbox__icon--default"),
+    ).toBeNull();
+
+    fixture.componentRef.setInput("checked", false);
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector("svg.cao-checkbox__icon"),
+    ).toBeTruthy();
+
+    fixture.componentRef.setInput("indeterminate", true);
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector("svg.cao-checkbox__icon"),
+    ).toBeTruthy();
+  });
+
+  it("should render an image when isLucideIcon is false", () => {
+    fixture.componentRef.setInput("checkedIcon", "icon.svg");
+    fixture.componentRef.setInput("checked", true);
+    fixture.detectChanges();
+
+    const image: HTMLImageElement = fixture.nativeElement.querySelector(
+      "img.cao-checkbox__icon",
+    );
+
+    expect(image).toBeTruthy();
+    expect(image.getAttribute("src")).toBe("icon.svg");
+    expect(
+      fixture.nativeElement.querySelector("svg.cao-checkbox__icon"),
+    ).toBeNull();
+  });
+
+  it("should not render an icon when unchecked and no icon is provided", () => {
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector(
+        ".cao-checkbox__control svg, .cao-checkbox__control img",
+      ),
+    ).toBeNull();
+  });
+
+  it("should render the label and respect labelPosition", () => {
+    fixture.componentRef.setInput("label", "Aceito os termos");
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement
+        .querySelector(".cao-checkbox__label")
+        .textContent.trim(),
+    ).toBe("Aceito os termos");
+
+    fixture.componentRef.setInput("labelPosition", "before");
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement
+        .querySelector(".cao-checkbox")
+        .classList.contains("cao-checkbox--label-before"),
+    ).toBe(true);
+  });
+
+  it("should expose accessibility attributes", () => {
+    fixture.componentRef.setInput("ariaLabel", "Aceitar termos");
+    fixture.componentRef.setInput("required", true);
+    fixture.componentRef.setInput("name", "terms");
+    fixture.componentRef.setInput("dataCy", "checkbox-terms");
+    fixture.detectChanges();
+
+    const input = getInput();
+
+    expect(input.getAttribute("aria-label")).toBe("Aceitar termos");
+    expect(input.required).toBe(true);
+    expect(input.getAttribute("name")).toBe("terms");
+    expect(input.getAttribute("data-cy")).toBe("checkbox-terms");
+  });
+
+  it("should apply validation classes based on the form control", () => {
+    const control = new FormControl(false, Validators.requiredTrue);
+
+    fixture.componentRef.setInput("control", control);
+    control.markAsTouched();
+    fixture.detectChanges();
+
+    const label = fixture.nativeElement.querySelector(".cao-checkbox");
+
+    expect(label.classList.contains("cao-checkbox--invalid")).toBe(true);
+
+    control.setValue(true);
+    fixture.componentRef.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+
+    expect(label.classList.contains("cao-checkbox--valid")).toBe(true);
+  });
+
+  it("should expose custom colors, sizes and icon colors as CSS variables", () => {
+    fixture.componentRef.setInput("color", "#16a34a");
+    fixture.componentRef.setInput("uncheckedColor", "#94a3b8");
+    fixture.componentRef.setInput("labelColor", "#166534");
+    fixture.componentRef.setInput("focusRingColor", "rgba(22, 163, 74, 0.35)");
+    fixture.componentRef.setInput("size", "24px");
+    fixture.componentRef.setInput("borderRadius", "6px");
+    fixture.componentRef.setInput("animationDuration", "300ms");
+    fixture.componentRef.setInput("checkedIconColor", "#ffffff");
+    fixture.componentRef.setInput("iconSize", 16);
+    fixture.componentRef.setInput("checked", true);
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement as HTMLElement;
+    const styles = host.style;
+
+    expect(styles.getPropertyValue("--cao-checkbox-color")).toBe("#16a34a");
+    expect(styles.getPropertyValue("--cao-checkbox-unselected")).toBe("#94a3b8");
+    expect(styles.getPropertyValue("--cao-checkbox-label")).toBe("#166534");
+    expect(styles.getPropertyValue("--cao-checkbox-size")).toBe("24px");
+    expect(styles.getPropertyValue("--cao-checkbox-radius")).toBe("6px");
+    expect(styles.getPropertyValue("--cao-checkbox-duration")).toBe("300ms");
+    expect(styles.getPropertyValue("--cao-checkbox-icon-size")).toBe("16px");
+    expect(styles.getPropertyValue("--cao-checkbox-icon-color")).toBe("#ffffff");
+  });
+});
+
+describe("CaoCheckboxComponent with ngModel", () => {
+  let fixture: ComponentFixture<CheckboxHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CheckboxHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CheckboxHostComponent);
+    fixture.detectChanges();
+  });
+
+  function getInput(): HTMLInputElement {
+    return fixture.nativeElement.querySelector("input");
+  }
+
+  it("should render the initial form value", async () => {
+    fixture.componentRef.setInput("checked", true);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(getInput().checked).toBe(true);
+  });
+
+  it("should update the model when the input changes", () => {
+    const input = getInput();
+    input.checked = true;
+    input.dispatchEvent(new Event("change"));
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.checked).toBe(true);
+  });
+
+  it("should respect the disabled state", () => {
+    fixture.componentRef.setInput("isDisabled", true);
+    fixture.detectChanges();
+
+    expect(getInput().disabled).toBe(true);
+  });
+});
+