ngx-opalbytes-components 1.19.0 → 1.21.0

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

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

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

@@ -0,0 +1,138 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
+import { AbstractControl } from "@angular/forms";
+
+import { MaterialModule } from "../../../material.module";
+
+@Component({
+  selector: "cao-base-toggle",
+  standalone: true,
+  templateUrl: "./base-toggle.component.html",
+  styleUrl: "./base-toggle.component.scss",
+  imports: [CommonModule, MaterialModule],
+})
+export class CaoBaseToggleComponent {
+  @Input() type = "text";
+  @Input() placeholder = "";
+  @Input() inputClass = "";
+  @Input() value: string | number | boolean | Date = "";
+  @Input() errorMessage = "";
+  @Input() isDisabled = false;
+  @Input() maxLength?: number;
+  @Input() searchMode = false;
+  @Input() showBorder = false;
+  @Input() isLucideIcon = false;
+  @Input() iconColor = "";
+  @Input() mask?: string;
+  @Input() control?: AbstractControl | null;
+  @Input() tooltip = "";
+  @Input() dataCy?: string = "";
+  @Input() textareaRows?: string = "";
+
+  @Input() decimalMarker: "." | "," | [".", ","] = ",";
+  @Input() thousandSeparator = ".";
+  @Input() allowNegativeNumbers = false;
+  @Input() separatorLimit = "";
+
+  @Input() set leadingIcon(value: string) {
+    this._leadingIcon = value;
+    this.icon = true;
+  }
+
+  @Input() set trailingIcon(value: string) {
+    this._trailingIcon = value;
+    this.icon = true;
+  }
+
+  @Output() readonly valueChange = new EventEmitter<string>();
+  @Output() readonly searchClick = new EventEmitter<void>();
+  @Output() readonly inputChange = new EventEmitter<string>();
+
+  isFocused = false;
+  icon = false;
+  _leadingIcon?: string;
+  _trailingIcon?: string;
+
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  get hasError() {
+    return !!this.errorMessage;
+  }
+
+  @Input() controlName = "";
+
+  get controlNameValue(): string {
+    return this.controlName;
+  }
+
+  onInput(event: Event) {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.onChange(newValue);
+    this.valueChange.emit(newValue);
+  }
+
+  onInputChange(event: Event) {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.inputChange.emit(newValue);
+  }
+
+  onFocus() {
+    this.isFocused = true;
+    this.onTouched();
+  }
+
+  onBlur() {
+    this.isFocused = false;
+    this.onTouched();
+
+    if (this.control?.touched && this.control?.valid && this.control?.value) {
+      setTimeout(() => {
+        const active = document.activeElement as HTMLElement;
+        const current = document.querySelector(`[formcontrolname="${this.controlNameValue}"]`);
+        if (!current || !active || !current.contains(active)) {
+          this.control?.markAsUntouched();
+        }
+      });
+    }
+  }
+
+  onSearchClick() {
+    this.searchClick.emit();
+  }
+
+  writeValue(value: string | null | undefined): void {
+    this.value = value || "";
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+  @Input() isChecked = false;
+  @Input() checkedTextPlaceholder = "";
+  @Input() uncheckedTextPlaceholder = "";
+
+  @Output() readonly statusChanged = new EventEmitter<CaoBaseToggleComponent>();
+
+  @ViewChild("checkbox") checkboxInput!: HTMLInputElement;
+
+  onToggleCheckbox() {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.isChecked = !this.isChecked;
+
+    this.statusChanged.emit(this);
+  }
+}

package/src/lib/shared/components/base-toggle/base-toggle.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoBaseToggleComponent } from './base-toggle.component';
+
+const meta: Meta<CaoBaseToggleComponent> = {
+  title: 'Componentes/Base Toggle',
+  component: CaoBaseToggleComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    isChecked: { control: 'boolean' },
+    checkedTextPlaceholder: { control: 'text' },
+    uncheckedTextPlaceholder: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    errorMessage: { control: 'text' },
+  },
+  args: {
+    statusChanged: fn(),
+    valueChange: fn(),
+    searchClick: fn(),
+    inputChange: fn(),
+    checkedTextPlaceholder: 'Ligado',
+    uncheckedTextPlaceholder: 'Desligado',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseToggleComponent>;
+
+export const Padrao: Story = {
+  args: {
+    isChecked: false,
+  },
+};
+
+export const Ativado: Story = {
+  args: {
+    isChecked: true,
+    checkedTextPlaceholder: 'Módulo',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    isChecked: true,
+    isDisabled: true,
+  },
+};
+
+export const DesabilitadoSemChecagem: Story = {
+  args: {
+    isChecked: false,
+    isDisabled: true,
+  },
+};
+
+export const ComPlaceholderPersonalizado: Story = {
+  args: {
+    isChecked: false,
+    uncheckedTextPlaceholder: 'Notificações push',
+  },
+};

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

@@ -0,0 +1,264 @@
+:host {
+  --radius-card: 0.5rem;
+  --color-bg-main: #ffffff;
+  --color-bg-gray: #f3f4f6;
+  --color-border-gray: #d1d5db;
+  --color-border-orange: #fb923c;
+  --color-text-gray-400: #9ca3af;
+  --color-text-gray-500: #6b7280;
+  --color-text-gray-600: #4b5563;
+  --color-text-gray-700: #374151;
+  --color-text-gray-900: #111827;
+  --color-white: #ffffff;
+}
+
+.card {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card-horizontal {
+  border: 1px solid var(--color-border-gray);
+  border-radius: var(--radius-card);
+  padding: 1rem 1.25rem;
+  align-items: center;
+  gap: 1rem;
+}
+
+.card-square {
+  background-color: var(--color-bg-main);
+  border-radius: var(--radius-card);
+  padding: 1rem 5rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-clickable {
+  cursor: pointer;
+}
+
+.card-hover-shadow:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
+              0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.card-hover-bg:hover {
+  background-color: var(--color-bg-gray);
+}
+
+.card-hover-bold:hover {
+  font-weight: 700;
+}
+
+.card-selected {
+  border-color: var(--color-border-orange);
+}
+
+.card-selected-border-2 {
+  border-width: 2px;
+}
+
+/* ---------- AVATAR / ICON CONTAINER ---------- */
+.card-avatar-container {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-white);
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.card-avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+.card-icon-container {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+  background-color: #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.card-icon-img {
+  width: 1.5rem;
+  height: 1.5rem;
+  opacity: 0.6;
+}
+
+/* ---------- CONTENT AREA ---------- */
+.card-content {
+  flex: 1 1 0%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  height: 100%;
+}
+
+.card-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-gray-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-subtitle {
+  font-size: 0.875rem;
+  color: var(--color-text-gray-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-detail {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-gray-700);
+}
+
+/* ---------- BADGE ---------- */
+.card-badge-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2rem;
+  flex-shrink: 0;
+}
+
+.card-badge {
+  padding: 0.5rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--color-border-gray);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-gray-600);
+}
+
+/* ---------- META ---------- */
+.card-meta-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.card-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--color-text-gray-400);
+}
+
+.card-meta-icon {
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.6;
+}
+
+/* ---------- SQUARE CARD SPECIFIC ---------- */
+.card-square-content {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-square-title {
+  font-size: 1rem;
+  color: var(--color-text-gray-900);
+  text-align: center;
+}
+
+.card-square-icon {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* ---------- UTILITY HELPERS ---------- */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-center {
+  text-align: center;
+}
+
+/* ---------- RESPONSIVE ADJUSTMENTS ---------- */
+@media (max-width: 640px) {
+  .card-horizontal {
+    padding: 0.75rem 1rem;
+    gap: 0.75rem;
+  }
+  
+  .card-square {
+    padding: 1rem 2rem;
+  }
+  
+  .card-square-content {
+    width: 80%;
+  }
+  
+  .card-badge-wrapper {
+    gap: 1rem;
+  }
+  
+  .card-meta-list {
+    gap: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .card-horizontal {
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+  }
+  
+  .card-content {
+    width: 100%;
+    align-items: center;
+  }
+  
+  .card-badge-wrapper {
+    width: 100%;
+    align-items: center;
+  }
+  
+  .card-meta-list {
+    justify-content: center;
+  }
+  
+  .card-square {
+    padding: 1rem;
+  }
+  
+  .card-square-content {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,103 @@
+@switch (variant) {
+  @case ('horizontal') {
+    <div
+      class="card card-horizontal"
+      [class.card-clickable]="clickable"
+      [class.card-hover-shadow]="clickable"
+      [class.card-selected]="selected"
+      [ngClass]="[bgColor, borderColor]"
+      [attr.role]="clickable ? 'button' : null"
+      [attr.tabindex]="clickable ? 0 : null"
+      (click)="handleClick()"
+      (keydown)="handleKeydown($event)">
+      
+      @if (avatar) {
+        <div class="card-avatar-container" [ngClass]="avatarBg">
+          @if (avatar.src) {
+            <img 
+              class="card-avatar-img" 
+              [src]="avatar.src" 
+              [alt]="title" />
+          } @else { 
+            {{ avatar.initials }} 
+          }
+        </div>
+      } @else if (icon) {
+        <div class="card-icon-container">
+          <img 
+            class="card-icon-img" 
+            [src]="icon" 
+            [alt]="title" />
+        </div>
+      }
+
+      <div class="card-content">
+        @if (title) {
+          <span class="card-title">{{ title }}</span>
+        }
+        @if (subtitle) {
+          <span class="card-subtitle">{{ subtitle }}</span>
+        }
+        @if (detail) {
+          <span class="card-detail" [ngClass]="detailColor ?? ''">
+            {{ detail }}
+          </span>
+        }
+        <ng-content />
+      </div>
+
+      @if (badge || (meta && meta.length)) {
+        <div class="card-badge-wrapper">
+          @if (badge) {
+            <div 
+              class="card-badge"
+              [ngClass]="[badge.color ?? '', badge.borderColor ?? '']"
+              [style.background-color]="badge.bg">
+              {{ badge.label }}
+            </div>
+          }
+          @if (meta && meta.length) {
+            <div class="card-meta-list">
+              @for (m of meta; track m.label) {
+                <div class="card-meta-item">
+                  <img 
+                    class="card-meta-icon" 
+                    [src]="m.icon" 
+                    [alt]="m.label" />
+                  <span>{{ m.label }}</span>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  }
+
+  @case ('square') {
+    <div
+      class="card card-square"
+      [class.card-clickable]="clickable"
+      [class.card-hover-bg]="clickable"
+      [class.card-hover-bold]="clickable"
+      [class.card-selected]="selected"
+      [class.card-selected-border-2]="selected"
+      [attr.role]="clickable ? 'button' : null"
+      [attr.tabindex]="clickable ? 0 : null"
+      [matTooltip]="title"
+      (click)="handleClick()"
+      (keydown)="handleKeydown($event)">
+      
+      <div class="card-square-content">
+        <span class="card-square-title">{{ title }}</span>
+        
+        @if (icon) {
+          <img 
+            class="card-square-icon" 
+            [src]="icon" 
+            [alt]="title" />
+        }
+      </div>
+    </div>
+  }
+}

package/src/lib/shared/components/card/card.component.ts

@@ -0,0 +1,63 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { MatTooltip } from "@angular/material/tooltip";
+
+export type CaoCardVariant = "horizontal" | "square";
+
+export interface ICaoCardBadge {
+  label: string;
+  color?: string;
+  borderColor?: string;
+  bg?: string;
+}
+
+export interface ICaoCardMeta {
+  icon: string;
+  label: string;
+}
+
+export interface ICaoCardAvatar {
+  initials?: string;
+  src?: string;
+  color?: string;
+}
+
+
+@Component({
+  selector: "cao-card",
+  templateUrl: "./card.component.html",
+  styleUrl: "./card.component.css",
+  imports: [CommonModule, MatTooltip],
+})
+export class CaoCardComponent {
+  @Input() variant: CaoCardVariant = "horizontal";
+  @Input() title?: string;
+  @Input() subtitle?: string;
+  @Input() detail?: string;
+  @Input() detailColor?: string;
+  @Input() icon?: string;
+  @Input() avatar?: ICaoCardAvatar;
+  @Input() meta?: ICaoCardMeta[];
+  @Input() badge?: ICaoCardBadge;
+  @Input() selected = false;
+  @Input() clickable = false;
+  @Input() bgColor="bg-white"
+  @Input() borderColor="border-gray-200"
+
+  @Output() readonly cardClick = new EventEmitter<void>();
+
+  get avatarBg(): string {
+    return this.avatar?.color ?? "bg-orange-400";
+  }
+
+  handleClick(): void {
+    if (this.clickable) {this.cardClick.emit();}
+  }
+
+  handleKeydown(event: KeyboardEvent): void {
+    if (this.clickable && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      this.cardClick.emit();
+    }
+  }
+}