ngx-opalbytes-components 1.18.0 → 1.20.0

package/src/lib/shared/components/base-time-range/base-time-range.ts

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDatepickerModule, MatDateRangeInput } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'cao-base-time-range',
+  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
+  templateUrl: './base-time-range.html',
+  styleUrl: './base-time-range.css',
+})
+export class BaseTimeRange implements OnInit{
+  @Input() label = "";
+  @Input() max: Date | undefined;
+  @Input() minDate: Date | undefined;
+  @Input() maxDate: Date | undefined;
+  @Input() startDate: Date | undefined;
+  @Input() finalDate: Date | undefined;
+  @Input() dataCy?: string
+  @Input() controlName = "";
+
+  @Output() readonly rangeSelected = new EventEmitter<Date[]>();
+
+  @ViewChild(MatDateRangeInput) dateRangeInput!: MatDateRangeInput<Date>;
+
+  ngOnInit(): void {
+    if(!this.dataCy){
+      this.dataCy = `time-range-${this.label}`
+    }
+  }
+
+  onSelectStartDate(event: any) {
+    const date = event.target.value as Date;
+    this.startDate = date;
+    this.finalDate = undefined;
+
+    const maxDate = new Date(date);
+    maxDate.setDate(maxDate.getDate() + 30);
+
+    this.maxDate = maxDate;
+  }
+
+  onInputMaxDate(event: any) {
+    const finalDate = event.target.value as Date;
+    if (this.startDate && finalDate) {
+      const data = [this.startDate, finalDate];
+      this.rangeSelected.emit(data);
+    }
+  }
+
+  clearInputs() {
+    this.max = undefined;
+    this.minDate = undefined;
+    this.maxDate = undefined;
+    this.startDate = undefined;
+    this.finalDate = undefined;
+
+    this.dateRangeInput._startInput.value = "";
+    this.dateRangeInput._endInput.value = "";
+  }
+}

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

@@ -0,0 +1,28 @@
+<div class="d-flex col aic jcc base-toggle">
+  <input #checkbox type="checkbox" class="checkbox" [checked]="isChecked" [disabled]="isDisabled" />
+  <div
+    class="d-flex checkbox-element aic jcsb"
+    tabindex="0"
+    role="button"
+    [class.activated-toggle]="isChecked"
+    (click)="onToggleCheckbox()"
+    (keydown.enter)="onToggleCheckbox()"
+    (keydown.space)="onToggleCheckbox(); $event.preventDefault()">
+    @if (isChecked) {
+    <mat-icon class="eye-icon" />
+    <div class="check-text"> Ativada </div>
+    <div class="line"></div>
+    <p class="unchecked">Desativar</p>
+    }@else {
+    <mat-icon class="fa-circle" />
+    <div class="check-text"> Não ativada </div>
+    <div class="line"></div>
+    <p>Ativar</p>
+    }
+  </div>
+  @if(isChecked){
+  <span>{{ checkedTextPlaceholder }} ativada com sucesso</span>
+  } @else{
+  <span>Clique para ativar {{ uncheckedTextPlaceholder }}</span>
+  }
+</div>

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

@@ -0,0 +1,45 @@
+.base-toggle {
+  input {
+    display: none;
+    visibility: hidden;
+  }
+
+  .checkbox-element {
+    border-radius: 24px;
+    cursor: pointer;
+    gap: 10px;
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--border-toggle);
+    background-color: transparent;
+
+    .check-text {
+      font-weight: 700;
+    }
+
+    .line {
+      height: 24px;
+      width: 1px;
+      background-color: var(--data-bg);
+    }
+
+    &.activated-toggle {
+      border: 2px solid var(--border-toggle-checked);
+      background-color: var(--bg-toggle-checked);
+
+      .check-text {
+        color: var(--text-toggle-checked);
+      }
+
+      .unchecked {
+        color: var(--text-unselected-toggle-checked);
+      }
+    }
+
+    p {
+      margin: 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/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>
+  }
+}