ngx-opalbytes-components 1.26.0 → 1.28.0

package/src/lib/shared/components/accordion-item/accordion-item.component.ts

@@ -0,0 +1,157 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  HostBinding,
+  inject,
+  input,
+  model,
+  output,
+  untracked,
+} from '@angular/core';
+
+import { CAO_ACCORDION, CaoAccordionAlign, CaoAccordionTogglePosition, ICaoAccordionItemRef } from '../accordion/accordion.token';
+
+
+let nextId = 0;
+
+/**
+ * Item do accordion. Pode ser usado dentro de `<cao-accordion>` ou isolado (como um cartão expansível).
+ * Os inputs de cor/posição, quando informados, sobrescrevem os valores definidos no accordion.
+ */
+@Component({
+  selector: 'cao-accordion-item',
+  templateUrl: './accordion-item.component.html',
+  styleUrl: './accordion-item.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoAccordionItemComponent implements ICaoAccordionItemRef {
+  private readonly accordion = inject(CAO_ACCORDION, { optional: true });
+  private readonly destroyRef = inject(DestroyRef);
+  private previousExpanded: boolean | null = null;
+
+  protected readonly headerId = `cao-accordion-header-${nextId}`;
+  protected readonly panelId = `cao-accordion-panel-${nextId++}`;
+
+  // ----- Conteúdo -----
+  readonly label = input<string>('');
+  readonly description = input<string>('');
+  /** Nível do heading (aria-level) do cabeçalho. */
+  readonly headingLevel = input<number>(3);
+
+  // ----- Estado -----
+  /** Estado de expansão. Suporta two-way binding: `[(expanded)]`. */
+  readonly expanded = model<boolean>(false);
+  readonly isDisabled = input<boolean>(false);
+  /** Exibe ou oculta o item. */
+  readonly isVisible = input<boolean>(true);
+  readonly dataCy = input<string>('');
+
+  // ----- Posição (sobrescreve o accordion quando informado) -----
+  readonly hideToggle = input<boolean | undefined>(undefined);
+  readonly togglePosition = input<CaoAccordionTogglePosition | undefined>(undefined);
+  readonly headerAlign = input<CaoAccordionAlign | undefined>(undefined);
+
+  // ----- Cores (sobrescrevem o accordion quando informadas) -----
+  readonly headerBgColor = input<string>('');
+  readonly headerTextColor = input<string>('');
+  readonly headerActiveBgColor = input<string>('');
+  readonly activeColor = input<string>('');
+  readonly contentBgColor = input<string>('');
+  readonly contentTextColor = input<string>('');
+  readonly borderColor = input<string>('');
+  readonly iconColor = input<string>('');
+
+  // ----- Eventos -----
+  readonly opened = output<void>();
+  readonly closed = output<void>();
+
+  protected readonly toggleHidden = computed(
+    () => this.hideToggle() ?? this.accordion?.hideToggle() ?? false,
+  );
+  protected readonly togglePos = computed(
+    () => this.togglePosition() ?? this.accordion?.togglePosition() ?? 'after',
+  );
+  private readonly align = computed(() => this.headerAlign() ?? this.accordion?.headerAlign() ?? 'start');
+  private readonly isCard = computed(() => (this.accordion?.displayMode() ?? 'separated') === 'separated');
+
+  protected readonly headerDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-header` : null));
+  protected readonly panelDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-content` : null));
+
+  private readonly hostStyle = computed(() => ({
+    '--cao-accordion-header-bg': this.headerBgColor() || null,
+    '--cao-accordion-header-text': this.headerTextColor() || null,
+    '--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
+    '--cao-accordion-active-color': this.activeColor() || null,
+    '--cao-accordion-content-bg': this.contentBgColor() || null,
+    '--cao-accordion-content-text': this.contentTextColor() || null,
+    '--cao-accordion-border-color': this.borderColor() || null,
+    '--cao-accordion-icon-color': this.iconColor() || null,
+    '--cao-accordion-header-align': this.align(),
+  }));
+
+  @HostBinding('style')
+  get styleBinding(): Record<string, string | null> {
+    return this.hostStyle();
+  }
+
+  @HostBinding('attr.data-cy')
+  get dataCyAttr(): string | null {
+    return this.dataCy() || null;
+  }
+
+  @HostBinding('class.cao-accordion-item--hidden')
+  get hiddenClass(): boolean {
+    return !this.isVisible();
+  }
+
+  @HostBinding('class.cao-accordion-item--expanded')
+  get expandedClass(): boolean {
+    return this.expanded();
+  }
+
+  @HostBinding('class.cao-accordion-item--card')
+  get cardClass(): boolean {
+    return this.isCard();
+  }
+
+  constructor() {
+    this.accordion?.register(this);
+    this.destroyRef.onDestroy(() => this.accordion?.unregister(this));
+
+    effect(() => {
+      const isExpanded = this.expanded();
+      untracked(() => this.handleExpandedChange(isExpanded));
+    });
+  }
+
+  /** Alterna o estado (ignorado quando o item está desabilitado). */
+  toggle(): void {
+    if (this.isDisabled()) {
+      return;
+    }
+    this.expanded.update((value) => !value);
+  }
+
+  open(): void {
+    this.expanded.set(true);
+  }
+
+  close(): void {
+    this.expanded.set(false);
+  }
+
+  private handleExpandedChange(isExpanded: boolean): void {
+    if (isExpanded) {
+      this.accordion?.notifyOpened(this);
+    }
+
+    if (this.previousExpanded !== null && this.previousExpanded !== isExpanded) {
+      const event = isExpanded ? this.opened : this.closed;
+      event.emit();
+    }
+    this.previousExpanded = isExpanded;
+  }
+}

package/src/lib/shared/components/accordion-item/accordion-item.spec.ts

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

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>