ngx-opalbytes-components 1.25.1 → 1.27.0

package/src/lib/shared/components/radio/radio-button.component.ts

@@ -0,0 +1,133 @@
+import { CommonModule } from "@angular/common";
+import {
+  Component,
+  forwardRef,
+  HostBinding,
+  Inject,
+  Input,
+  Optional,
+} from "@angular/core";
+
+import { CaoRadioGroupComponent } from "./radio-group.component";
+
+let nextRadioId = 0;
+
+@Component({
+  selector: "cao-radio-button",
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: "./radio-button.component.html",
+  styleUrl: "./radio-button.component.css",
+})
+export class CaoRadioButtonComponent {
+  @Input() value: unknown = undefined;
+  @Input() label = "";
+  @Input() isDisabled = false;
+  @Input() labelPosition?: "before" | "after";
+  @Input() id = "";
+  @Input() name = "";
+  @Input() ariaLabel = "";
+  @Input() ariaLabelledBy = "";
+  @Input() dataCy = "";
+
+  @Input() color?: string;
+  @Input() unselectedColor?: string;
+  @Input() disabledColor?: string;
+  @Input() labelColor?: string;
+  @Input() disabledLabelColor?: string;
+  @Input() focusRingColor?: string;
+  @Input() size?: string;
+  @Input() animationDuration?: string;
+
+  @Input() set disabled(value: boolean) {
+    this.isDisabled = value;
+  }
+
+  get disabled(): boolean {
+    return this.isDisabled;
+  }
+
+  private readonly uid = `cao-radio-${nextRadioId++}`;
+
+  constructor(
+    @Optional()
+    @Inject(forwardRef(() => CaoRadioGroupComponent))
+    readonly group: CaoRadioGroupComponent | null,
+  ) {}
+
+  get effectiveDisabled(): boolean {
+    return this.isDisabled || !!this.group?.isEffectivelyDisabled;
+  }
+
+  get effectiveLabelPosition(): "before" | "after" {
+    return this.labelPosition ?? this.group?.labelPosition ?? "after";
+  }
+
+  get effectiveName(): string {
+    return this.name || this.group?.groupName || this.uid;
+  }
+
+  get inputId(): string {
+    return this.id || this.uid;
+  }
+
+  get isSelected(): boolean {
+    return this.group?.isValueSelected(this.value) ?? false;
+  }
+
+  get isRequired(): boolean {
+    return this.group?.required ?? false;
+  }
+
+  @HostBinding("style")
+  get hostStyles(): Record<string, string> {
+    const styles: Record<string, string> = {};
+
+    if (this.color) {
+      styles["--cao-radio-color"] = this.color;
+    }
+    if (this.unselectedColor) {
+      styles["--cao-radio-unselected"] = this.unselectedColor;
+    }
+    if (this.disabledColor) {
+      styles["--cao-radio-disabled"] = this.disabledColor;
+    }
+    if (this.labelColor) {
+      styles["--cao-radio-label"] = this.labelColor;
+    }
+    if (this.disabledLabelColor) {
+      styles["--cao-radio-label-disabled"] = this.disabledLabelColor;
+    }
+    if (this.focusRingColor) {
+      styles["--cao-radio-focus-ring"] = this.focusRingColor;
+    }
+    if (this.size) {
+      styles["--cao-radio-size"] = this.size;
+    }
+    if (this.animationDuration) {
+      styles["--cao-radio-duration"] = this.animationDuration;
+    }
+
+    return styles;
+  }
+
+  select(): void {
+    if (this.effectiveDisabled) {
+      return;
+    }
+
+    this.group?.select(this);
+  }
+
+  onBlur(): void {
+    this.group?.markAsTouched();
+  }
+
+  enable(): void {
+    this.isDisabled = false;
+  }
+
+  disable(): void {
+    this.isDisabled = true;
+  }
+}

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

@@ -0,0 +1,94 @@
+import { FormsModule } from '@angular/forms';
+
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoRadioButtonComponent } from './radio-button.component';
+import { CaoRadioGroupComponent } from './radio-group.component';
+
+const meta: Meta<CaoRadioButtonComponent> = {
+  title: 'Componentes/Radio Button',
+  component: CaoRadioButtonComponent,
+  tags: ['autodocs'],
+  decorators: [
+    (story) => ({
+      ...story,
+      moduleMetadata: {
+        imports: [FormsModule, CaoRadioGroupComponent, CaoRadioButtonComponent],
+      },
+    }),
+  ],
+  argTypes: {
+    labelPosition: { control: 'select', options: ['before', 'after'] },
+    isDisabled: { control: 'boolean' },
+    disabled: { 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' },
+  },
+  args: {
+    value: 'option-1',
+    label: 'Opção selecionada',
+    labelPosition: 'after',
+    isDisabled: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      selectedValue: 'option-1',
+    },
+    template: `
+    <cao-radio-group
+      [(ngModel)]="selectedValue"
+      [labelPosition]="labelPosition">
+      <cao-radio-button
+        value="option-1"
+        [label]="label"
+        [isDisabled]="isDisabled"
+        [labelPosition]="labelPosition"
+        [color]="color"
+        [unselectedColor]="unselectedColor"
+        [disabledColor]="disabledColor"
+        [labelColor]="labelColor"
+        [disabledLabelColor]="disabledLabelColor"
+        [focusRingColor]="focusRingColor"
+        [size]="size"
+        [animationDuration]="animationDuration" />
+      <cao-radio-button value="option-2" label="Outra opção" />
+    </cao-radio-group>
+    <p>Selecionado: {{ selectedValue }}</p>
+  `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<CaoRadioButtonComponent>;
+
+export const Padrao: Story = {};
+
+export const Desabilitado: Story = {
+  args: {
+    isDisabled: true,
+    label: 'Opção desabilitada',
+  },
+};
+
+export const CoresCustomizadas: Story = {
+  args: {
+    color: '#16a34a',
+    unselectedColor: '#94a3b8',
+    labelColor: '#166534',
+    size: '24px',
+  },
+};
+
+export const LabelAntes: Story = {
+  args: {
+    labelPosition: 'before',
+    label: 'Label antes',
+  },
+};

package/src/lib/shared/components/radio/radio-group.component.css

@@ -0,0 +1,21 @@
+:host {
+  --cao-radio-color: #4f46e5;
+  --cao-radio-unselected: #6b7280;
+  --cao-radio-disabled: #d1d5db;
+  --cao-radio-label: #111827;
+  --cao-radio-label-disabled: #9ca3af;
+  --cao-radio-focus-ring: rgba(79, 70, 229, 0.35);
+  --cao-radio-size: 20px;
+  --cao-radio-duration: 200ms;
+  --cao-radio-gap: 8px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--cao-radio-gap);
+}
+
+:host(.cao-radio-group--horizontal) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}

package/src/lib/shared/components/radio/radio-group.component.ts

@@ -0,0 +1,216 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  inject,
+  Input,
+  Output,
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+import type { CaoRadioButtonComponent } from "./radio-button.component";
+
+let nextRadioGroupId = 0;
+
+export interface ICaoRadioChangeEvent {
+  value: unknown;
+  source: CaoRadioButtonComponent;
+}
+
+@Component({
+  selector: "cao-radio-group",
+  standalone: true,
+  template: "<ng-content />",
+  styleUrl: "./radio-group.component.css",
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CaoRadioGroupComponent),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoRadioGroupComponent implements ControlValueAccessor {
+  @Input() value: unknown = undefined;
+  @Input() name = "";
+  @Input() isDisabled = false;
+  @Input() required = false;
+  @Input() orientation: "vertical" | "horizontal" = "vertical";
+  @Input() labelPosition: "before" | "after" = "after";
+  @Input() compareWith: (option: unknown, value: unknown) => boolean = (
+    option,
+    value,
+  ) => option === value;
+
+  @Input() color?: string;
+  @Input() unselectedColor?: string;
+  @Input() disabledColor?: string;
+  @Input() labelColor?: string;
+  @Input() disabledLabelColor?: string;
+  @Input() focusRingColor?: string;
+  @Input() size?: string;
+  @Input() animationDuration?: string;
+  @Input() gap?: string;
+
+  @Input() ariaLabel = "";
+  @Input() ariaLabelledBy = "";
+  @Input() dataCy = "";
+
+  @Input() set disabled(value: boolean) {
+    this.isDisabled = value;
+    this.cdr.markForCheck();
+  }
+
+  get disabled(): boolean {
+    return this.isDisabled;
+  }
+
+  @Output() readonly valueChange = new EventEmitter<unknown>();
+  @Output() readonly selectionChange = new EventEmitter<ICaoRadioChangeEvent>();
+
+  readonly resolvedName = `cao-radio-group-${nextRadioGroupId++}`;
+
+  private readonly cdr = inject(ChangeDetectorRef);
+  private formDisabled = false;
+  private onChange: (value: unknown) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  get isEffectivelyDisabled(): boolean {
+    return this.isDisabled || this.formDisabled;
+  }
+
+  @HostBinding("attr.role")
+  readonly role = "radiogroup";
+
+  @HostBinding("class.cao-radio-group--horizontal")
+  get isHorizontal(): boolean {
+    return this.orientation === "horizontal";
+  }
+
+  @HostBinding("class.cao-radio-group--disabled")
+  get isDisabledClass(): boolean {
+    return this.isEffectivelyDisabled;
+  }
+
+  @HostBinding("attr.aria-label")
+  get ariaLabelAttr(): string | null {
+    return this.ariaLabel || null;
+  }
+
+  @HostBinding("attr.aria-labelledby")
+  get ariaLabelledByAttr(): string | null {
+    return this.ariaLabelledBy || null;
+  }
+
+  @HostBinding("attr.aria-disabled")
+  get ariaDisabledAttr(): boolean | null {
+    return this.isEffectivelyDisabled || null;
+  }
+
+  @HostBinding("attr.aria-required")
+  get ariaRequiredAttr(): boolean | null {
+    return this.required || null;
+  }
+
+  @HostBinding("attr.data-cy")
+  get dataCyAttr(): string | null {
+    return this.dataCy || null;
+  }
+
+  @HostBinding("style")
+  get hostStyles(): Record<string, string> {
+    const styles: Record<string, string> = {};
+
+    if (this.color) {
+      styles["--cao-radio-color"] = this.color;
+    }
+    if (this.unselectedColor) {
+      styles["--cao-radio-unselected"] = this.unselectedColor;
+    }
+    if (this.disabledColor) {
+      styles["--cao-radio-disabled"] = this.disabledColor;
+    }
+    if (this.labelColor) {
+      styles["--cao-radio-label"] = this.labelColor;
+    }
+    if (this.disabledLabelColor) {
+      styles["--cao-radio-label-disabled"] = this.disabledLabelColor;
+    }
+    if (this.focusRingColor) {
+      styles["--cao-radio-focus-ring"] = this.focusRingColor;
+    }
+    if (this.size) {
+      styles["--cao-radio-size"] = this.size;
+    }
+    if (this.animationDuration) {
+      styles["--cao-radio-duration"] = this.animationDuration;
+    }
+    if (this.gap) {
+      styles["--cao-radio-gap"] = this.gap;
+    }
+
+    return styles;
+  }
+
+  get groupName(): string {
+    return this.name || this.resolvedName;
+  }
+
+  isValueSelected(value: unknown): boolean {
+    return this.compareWith(this.value, value);
+  }
+
+  select(button: CaoRadioButtonComponent): void {
+    if (this.isEffectivelyDisabled || button.effectiveDisabled) {
+      return;
+    }
+
+    if (this.compareWith(this.value, button.value)) {
+      this.markAsTouched();
+      return;
+    }
+
+    this.value = button.value;
+    this.onChange(this.value);
+    this.valueChange.emit(this.value);
+    this.selectionChange.emit({ value: this.value, source: button });
+    this.markAsTouched();
+    this.cdr.markForCheck();
+  }
+
+  markAsTouched(): void {
+    this.onTouched();
+  }
+
+  enable(): void {
+    this.isDisabled = false;
+    this.cdr.markForCheck();
+  }
+
+  disable(): void {
+    this.isDisabled = true;
+    this.cdr.markForCheck();
+  }
+
+  writeValue(value: unknown): void {
+    this.value = value;
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+}

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);
+  });
+});