ngx-opalbytes-components 1.25.1 → 1.27.0

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

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

@@ -0,0 +1,233 @@
+import { CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  inject,
+  Input,
+  Output,
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+import { LucideDynamicIcon } from "@lucide/angular";
+
+export interface ICaoSlideToggleChangeEvent {
+  checked: boolean;
+  source: CaoSlideToggleComponent;
+}
+
+@Component({
+  selector: "cao-slide-toggle",
+  standalone: true,
+  imports: [CommonModule, LucideDynamicIcon],
+  templateUrl: "./slide-toggle.component.html",
+  styleUrl: "./slide-toggle.component.css",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CaoSlideToggleComponent),
+      multi: true,
+    },
+  ],
+})
+export class CaoSlideToggleComponent implements ControlValueAccessor {
+  @Input() checked = false;
+  @Input() isDisabled = false;
+  @Input() label = "";
+  @Input() labelPosition: "before" | "after" = "after";
+  @Input() name = "";
+  @Input() id = "";
+  @Input() ariaLabel = "";
+  @Input() dataCy = "";
+  @Input() required = false;
+
+  @Input() trackColor?: string;
+  @Input() trackCheckedColor?: string;
+  @Input() thumbColor?: string;
+  @Input() thumbCheckedColor?: string;
+  @Input() disabledTrackColor?: string;
+  @Input() disabledThumbColor?: string;
+  @Input() labelColor?: string;
+  @Input() disabledLabelColor?: string;
+  @Input() focusRingColor?: string;
+  @Input() trackWidth?: string;
+  @Input() trackHeight?: string;
+  @Input() thumbSize?: string;
+  @Input() animationDuration?: string;
+
+  @Input() thumbIcon = "";
+  @Input() thumbCheckedIcon = "";
+  @Input() isLucideThumbIcon = false;
+  @Input() thumbIconColor = "";
+  @Input() thumbCheckedIconColor = "";
+  @Input() thumbIconSize: string | number = 12;
+  @Input() thumbIconStrokeWidth: string | number = 2;
+
+  @Input() set disabled(value: boolean) {
+    this.isDisabled = value;
+    this.cdr.markForCheck();
+  }
+
+  get disabled(): boolean {
+    return this.isDisabled;
+  }
+
+  @Output() readonly checkedChange = new EventEmitter<boolean>();
+  @Output() readonly toggleChange = new EventEmitter<ICaoSlideToggleChangeEvent>();
+
+  private readonly cdr = inject(ChangeDetectorRef);
+  private onChange: (value: boolean) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  get resolvedThumbIcon(): string {
+    return this.checked && this.thumbCheckedIcon
+      ? this.thumbCheckedIcon
+      : this.thumbIcon;
+  }
+
+  get resolvedThumbIconColor(): string {
+    return this.checked
+      ? this.thumbCheckedIconColor || this.thumbIconColor
+      : this.thumbIconColor;
+  }
+
+  @HostBinding("style")
+  get hostStyles(): Record<string, string> {
+    const styles: Record<string, string> = {};
+
+    if (this.trackColor) {
+      styles["--cao-slide-toggle-track"] = this.trackColor;
+    }
+    if (this.trackCheckedColor) {
+      styles["--cao-slide-toggle-track-checked"] = this.trackCheckedColor;
+    }
+    if (this.thumbColor) {
+      styles["--cao-slide-toggle-thumb"] = this.thumbColor;
+    }
+    if (this.thumbCheckedColor) {
+      styles["--cao-slide-toggle-thumb-checked"] = this.thumbCheckedColor;
+    }
+    if (this.disabledTrackColor) {
+      styles["--cao-slide-toggle-track-disabled"] = this.disabledTrackColor;
+    }
+    if (this.disabledThumbColor) {
+      styles["--cao-slide-toggle-thumb-disabled"] = this.disabledThumbColor;
+    }
+    if (this.labelColor) {
+      styles["--cao-slide-toggle-label"] = this.labelColor;
+    }
+    if (this.disabledLabelColor) {
+      styles["--cao-slide-toggle-label-disabled"] = this.disabledLabelColor;
+    }
+    if (this.focusRingColor) {
+      styles["--cao-slide-toggle-focus-ring"] = this.focusRingColor;
+    }
+    if (this.trackWidth) {
+      styles["--cao-slide-toggle-track-width"] = this.trackWidth;
+    }
+    if (this.trackHeight) {
+      styles["--cao-slide-toggle-track-height"] = this.trackHeight;
+    }
+    if (this.thumbSize) {
+      styles["--cao-slide-toggle-thumb-size"] = this.thumbSize;
+    }
+    if (this.animationDuration) {
+      styles["--cao-slide-toggle-duration"] = this.animationDuration;
+    }
+    if (this.resolvedThumbIconColor) {
+      styles["--cao-slide-toggle-thumb-icon-color"] = this.resolvedThumbIconColor;
+    }
+
+    styles["--cao-slide-toggle-thumb-icon-size"] = this.toCssLength(
+      this.thumbIconSize,
+    );
+
+    return styles;
+  }
+
+  toggle(): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.updateChecked(!this.checked, true);
+  }
+
+  setChecked(value: boolean): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.updateChecked(value, true);
+  }
+
+  enable(): void {
+    this.isDisabled = false;
+    this.cdr.markForCheck();
+  }
+
+  disable(): void {
+    this.isDisabled = true;
+    this.cdr.markForCheck();
+  }
+
+  onInputChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.updateChecked(target.checked, true);
+  }
+
+  onEnter(event: Event): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    event.preventDefault();
+    this.toggle();
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: boolean | null): void {
+    this.checked = !!value;
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  private toCssLength(value: string | number): string {
+    return typeof value === "number" ? `${value}px` : value;
+  }
+
+  private updateChecked(value: boolean, emit: boolean): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.checked = value;
+    this.onChange(value);
+
+    if (emit) {
+      this.checkedChange.emit(value);
+      this.toggleChange.emit({ checked: value, source: this });
+    }
+
+    this.cdr.markForCheck();
+  }
+}