ngx-opalbytes-components 1.19.0 → 1.21.0

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoCardComponent, ICaoCardBadge, ICaoCardMeta } from './card.component';
+
+const cardMeta: ICaoCardMeta[] = [
+  { icon: 'https://lucide.dev/icons/eye.svg', label: 'Visualizações' },
+  { icon: 'https://lucide.dev/icons/clock.svg', label: 'Última atualização' },
+];
+
+const cardBadge: ICaoCardBadge = {
+  label: 'Novo',
+  color: 'text-white',
+  borderColor: 'border-green-600',
+  bg: '#22c55e',
+};
+
+const meta: Meta<CaoCardComponent> = {
+  title: 'Componentes/Card',
+  component: CaoCardComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['horizontal', 'square'] },
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    detail: { control: 'text' },
+    detailColor: { control: 'text' },
+    icon: { control: 'text' },
+    bgColor: { control: 'text' },
+    borderColor: { control: 'text' },
+    selected: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    cardClick: { action: 'cardClicked' },
+  },
+  args: {
+    cardClick: fn(),
+    title: 'Projeto Renova',
+    subtitle: 'Monitoramento de qualidade',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoCardComponent>;
+
+export const Horizontal: Story = {
+  args: {
+    variant: 'horizontal',
+  },
+};
+
+export const HorizontalComIcone: Story = {
+  args: {
+    variant: 'horizontal',
+    icon: 'https://lucide.dev/icons/image.svg',
+  },
+};
+
+export const HorizontalComAvatar: Story = {
+  args: {
+    variant: 'horizontal',
+    avatar: { initials: 'OP', color: 'bg-indigo-500' },
+  },
+};
+
+export const HorizontalComDetalhe: Story = {
+  args: {
+    variant: 'horizontal',
+    detail: 'Detalhe adicional do card',
+    detailColor: 'text-amber-600',
+  },
+};
+
+export const ComBadge: Story = {
+  args: {
+    variant: 'horizontal',
+    badge: cardBadge,
+  },
+};
+
+export const ComMeta: Story = {
+  args: {
+    variant: 'horizontal',
+    meta: cardMeta,
+  },
+};
+
+export const Clicavel: Story = {
+  args: {
+    variant: 'horizontal',
+    clickable: true,
+  },
+};
+
+export const Selecionado: Story = {
+  args: {
+    variant: 'horizontal',
+    selected: true,
+  },
+};
+
+export const Quadrado: Story = {
+  args: {
+    variant: 'square',
+    title: 'KPIs',
+  },
+};
+
+export const QuadradoComIcone: Story = {
+  args: {
+    variant: 'square',
+    title: 'Análises',
+    icon: 'https://lucide.dev/icons/image.svg',
+  },
+};

package/src/lib/shared/components/date-picker/date-picker.html

@@ -0,0 +1,82 @@
+<div class="form-field input-component" [class.search-mode]="searchMode">
+  <mat-form-field class="datepicker-form-field">
+    <div
+      class="input-wrapper"
+      [class.has-leading-icon]="_leadingIcon"
+      [class.has-trailing-icon]="_trailingIcon"
+      [class.focused]="isFocused">
+
+      @if (_leadingIcon) {
+        @if (isLucideIcon) {
+          <div class="icon" 
+          tabindex="0"
+          (click)="onLeadingIconClick($event)"             
+          (keydown.enter)="onLeadingIconClick($event)"
+>
+            <svg [lucideIcon]="_leadingIcon" [style.color]="iconColor"></svg>
+          </div>
+        } @else {
+          <div class="icon" 
+          tabindex="0"
+          (click)="onLeadingIconClick($event)"           
+          (keydown.enter)="onLeadingIconClick($event)">
+            <img alt="ícone de início" [src]="_leadingIcon" />
+          </div>
+        }
+      }
+
+      <input
+        matTooltip="{{ tooltip }}"
+        matTooltipPosition="below"
+        matTooltipClass="custom-arrow-tooltip"
+        matInput
+        [disabled]="isDisabled"
+        [matDatepicker]="pickerCao"
+        [attr.data-cy]="dataCy"
+        [placeholder]="placeholder"
+        [ngClass]="[
+          inputClass,
+          control?.touched && control?.invalid ? 'invalid' : '',
+          control?.touched && control?.valid && control?.value ? 'valid' : ''
+        ]"
+        [min]="minDate"
+        [max]="maxDate"
+        [(ngModel)]="value"
+        (input)="onInput($event)"
+        (change)="onInputChange($event)"
+        (focus)="onFocus()"
+        (blur)="onBlur()" />
+
+      @if (dateHint) {
+        <mat-hint>{{ dateHint }}</mat-hint>
+      }
+
+      <mat-datepicker-toggle matIconSuffix [for]="pickerCao" />
+
+      <mat-datepicker
+        #pickerCao
+        [startAt]="value || null" />
+
+      @if (_trailingIcon) {
+        @if (isLucideIcon) {
+          <div class="icon trailing-icon" 
+          tabindex="0"
+          (click)="onTrailingIconClick($event)"
+          (keydown.enter)="onTrailingIconClick($event)"
+          >
+            <svg [lucideIcon]="_trailingIcon" [style.color]="iconColor"></svg>
+          </div>
+        } @else {
+          <div class="icon trailing-icon" 
+          tabindex="0"
+          (click)="onTrailingIconClick($event)"
+          (keydown.enter)="onTrailingIconClick($event)"
+          >
+            <img alt="ícone de fim" [src]="_trailingIcon" />
+          </div>
+        }
+      }
+
+    </div>
+  </mat-form-field>
+</div>

package/src/lib/shared/components/date-picker/date-picker.scss

@@ -0,0 +1,8 @@
+@use '@angular/material' as mat;
+
+
+::ng-deep .datepicker-form-field {
+  --mat-form-field-outlined-outline-color: transparent;
+  --mat-form-field-outlined-hover-outline-color: transparent;
+  --mat-form-field-outlined-focus-outline-color: transparent;
+}

package/src/lib/shared/components/date-picker/date-picker.spec.ts

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

package/src/lib/shared/components/date-picker/date-picker.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoDatePicker } from './date-picker';
+
+const meta: Meta<CaoDatePicker> = {
+  title: 'Componentes/Date Picker',
+  component: CaoDatePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: { control: 'text' },
+    inputClass: { control: 'text' },
+    errorMessage: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+    searchMode: { control: 'boolean' },
+    showBorder: { control: 'boolean' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    tooltip: { control: 'text' },
+    dataCy: { control: 'text' },
+    dateHint: { control: 'text' },
+    controlName: { control: 'text' },
+    openOnFocus: { control: 'boolean' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
+  },
+  args: {
+    valueChange: fn(),
+    searchClick: fn(),
+    inputChange: fn(),
+    leadingIconClick: fn(),
+    trailingIconClick: fn(),
+    placeholder: 'Data de nascimento',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoDatePicker>;
+
+export const Padrao: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+  },
+};
+
+export const ComLeadingIcon: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    leadingIcon: 'Calendar',
+    isLucideIcon: true,
+    iconColor: '#3b82f6',
+  },
+};
+
+export const ComTrailingIcon: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    trailingIcon: 'X',
+    isLucideIcon: true,
+  },
+};
+
+export const ComDataMinimaEMaxima: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    minDate: new Date(2026, 0, 1),
+    maxDate: new Date(2026, 11, 31),
+  },
+};
+
+export const ComDica: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    dateHint: 'DD/MM/AAAA',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    isDisabled: true,
+    value: new Date(2026, 0, 15),
+  },
+};
+
+export const ComErro: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    errorMessage: 'Data obrigatória',
+  },
+};

package/src/lib/shared/components/date-picker/date-picker.ts

@@ -0,0 +1,165 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatDatepicker } from '@angular/material/datepicker';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+import { LucideDynamicIcon } from '@lucide/angular';
+
+import { MaterialModule } from "../../../material.module";
+
+@Component({
+  selector: 'cao-date-picker',
+  imports: [CommonModule, FormsModule, MatTooltipModule, LucideDynamicIcon, MaterialModule],
+  templateUrl: './date-picker.html',
+  styleUrl: './date-picker.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CaoDatePicker,
+      multi: true,
+    },
+  ],
+})
+export class CaoDatePicker implements ControlValueAccessor {
+  @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() control?: AbstractControl | null;
+  @Input() tooltip = "";
+  @Input() dataCy?: string = "";
+  @Input() dateHint?: string;
+  @Input() controlName = "";
+
+  @Input() openOnFocus = true;
+
+  @Input() minDate: Date | null = null;
+  @Input() maxDate: Date | null = null;
+
+  @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>();
+  @Output() readonly leadingIconClick = new EventEmitter<MouseEvent | Event>();
+  @Output() readonly trailingIconClick = new EventEmitter<MouseEvent | Event>();
+
+  @ViewChild('pickerCao') picker!: MatDatepicker<Date>;
+
+  isFocused = false;
+  icon = false;
+  _leadingIcon?: string;
+  _trailingIcon?: string;
+
+  onChange: (value: any) => void = () => {};
+  onTouched: () => void = () => {};
+
+  get hasError(): boolean {
+    return !!this.errorMessage;
+  }
+
+  get controlNameValue(): string {
+    return this.controlName;
+  }
+
+  onInput(event: Event): void {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.onChange(newValue);
+    this.valueChange.emit(newValue);
+  }
+
+  onInputChange(event: Event): void {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value = newValue;
+    this.inputChange.emit(newValue);
+  }
+
+  onFocus(): void {
+    this.isFocused = true;
+
+    if (this.openOnFocus && this.picker && !this.picker.opened) {
+      this.picker.open();
+    }
+
+    this.onTouched();
+  }
+
+  onBlur(): void {
+    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(): void {
+    this.searchClick.emit();
+  }
+
+  onLeadingIconClick(event: MouseEvent | Event): void {
+    event.stopPropagation();
+    this.leadingIconClick.emit(event);
+  }
+  onTrailingIconClick(event: MouseEvent | Event): void {
+    event.stopPropagation();
+    this.trailingIconClick.emit(event);
+  }
+
+  openPicker(): void {
+    if (this.picker && !this.picker.opened) {
+      this.picker.open();
+    }
+  }
+
+  closePicker(): void {
+    if (this.picker?.opened) {
+      this.picker.close();
+    }
+  }
+
+  clearValue(): void {
+    this.value = "";
+    this.onChange(null);
+    this.onTouched();
+    this.valueChange.emit("");
+  }
+
+  writeValue(value: string | null | undefined): void {
+    this.value = value || "";
+  }
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+}

package/src/lib/shared/components/drop-down/drop-down.css

@@ -0,0 +1,61 @@
+/* Add these focus states to your existing CSS */
+
+.dropdown-header:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.dropdown-header:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.dropdown-search input:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.dropdown-item:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
+/* Enhanced focused state */
+.dropdown-item.focused {
+  background-color: var(--hover-drop-down);
+  font-weight: bold;
+}
+
+/* Ensure proper contrast for disabled state */
+.dropdown-container.disabled {
+  opacity: 0.6;
+}
+
+/* Scrollbar improvements for better UX */
+.dropdown-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.dropdown-list::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.dropdown-list::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+.dropdown-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Ensure dropdown doesn't go off-screen on mobile */
+@media screen and (max-width: 768px) {
+  .dropdown-list {
+    max-height: 180px;
+  }
+  
+  .dropdown-list.drop-up {
+    bottom: 45px;
+  }
+}

package/src/lib/shared/components/drop-down/drop-down.html

@@ -0,0 +1,96 @@
+<div
+  class="dropdown-container"
+  role="combobox"
+  [ngClass]="[
+    dropDownClass,
+    isDisabled ? 'disabled' : '',
+    control?.touched && control?.invalid ? 'invalid' : '',
+    (control?.touched && control?.valid && selectedItem && isFocused && !removeValidBorder) ? 'valid' : ''
+  ]"
+  [ngStyle]="styleDropDown"
+  [attr.aria-expanded]="isOpen"
+  [attr.aria-haspopup]="'listbox'"
+  [attr.aria-controls]="isOpen ? ('dropdown-list-' + dataCy) : null"
+  [attr.aria-labelledby]="ariaLabelledBy || null"
+  [attr.aria-label]="ariaLabel || null"
+  [attr.aria-disabled]="isDisabled"
+  [attr.aria-activedescendant]="activeDescendant"
+  [attr.data-cy]="dataCy">
+  
+  <div
+    class="dropdown-header"
+    matTooltipPosition="below"
+    matTooltipClass="custom-arrow-tooltip"
+    tabindex="0"
+    role="button"
+    [matTooltip]="tooltip"
+    [attr.aria-disabled]="isDisabled"
+    (click)="!isDisabled && toggleDropdown()"
+    (keydown.enter)="!isDisabled && toggleDropdown()"
+    (keydown.space)="!isDisabled && toggleDropdown(); $event.preventDefault()"
+    (keydown.arrowdown)="!isDisabled && onArrowDown($event)"
+    (keydown.arrowup)="!isDisabled && onArrowUp($event)"
+    (keydown.escape)="!isDisabled && closeDropdown()">
+    <span id="dropdown-label-{{dataCy}}">{{ selectedItem?.nome ?? textHeader }}</span>
+    <mat-icon aria-hidden="true">{{ isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>
+  </div>
+
+  @if (isOpen) {
+  <ul 
+    class="dropdown-list" 
+    role="listbox"
+    [id]="'dropdown-list-' + dataCy"
+    [ngClass]="{ 'drop-up': dropDirection === 'up', 'dropdown-secundary': dropDownClass === 'dropdown-secundary' }"
+    [attr.aria-label]="listAriaLabel || 'Opções'"
+    [attr.aria-labelledby]="'dropdown-label-' + dataCy">
+    
+
+    <li class="dropdown-search" role="none">
+      <input 
+        type="text" 
+        placeholder="Buscar por código ou nome..." 
+        role="searchbox"
+        aria-label="Buscar opções"
+        [formControl]="searchControl"
+        (keydown.arrowdown)="onArrowDown($event)"
+        (keydown.arrowup)="onArrowUp($event)"
+        (keydown.enter)="onSearchEnter($event)"
+        (keydown.escape)="closeDropdown()" />
+    </li>
+    
+
+    @for (item of filteredOptions; track $index) { 
+      @if(item && item.nome) {
+      <li
+        class="dropdown-item"
+        role="option"
+        [ngClass]="{
+          'icon-right': item.iconPosition === 'right',
+          'selected': item === selectedItem,
+          'focused': $index === focusedIndex
+        }"
+        [attr.id]="'option-' + dataCy + '-' + $index"
+        [attr.aria-selected]="item === selectedItem"
+        [attr.tabindex]="$index === focusedIndex ? 0 : -1"
+        [attr.data-cy]="item.dataCy"
+        (click)="selectItem(item)"
+        (keydown.enter)="selectItem(item)"
+        (keydown.space)="selectItem(item); $event.preventDefault()"
+        (mouseenter)="focusedIndex = $index">
+        @if (item.icon && item.iconPosition !== 'right') {
+        <mat-icon class="dropdown-icon" aria-hidden="true">{{ item.icon }}</mat-icon>
+        } 
+        <span>{{ item.nome }}</span>
+        @if (item.icon && item.iconPosition === 'right') {
+        <mat-icon class="dropdown-icon" aria-hidden="true">{{ item.icon }}</mat-icon>
+        }
+      </li>
+      } 
+    }
+  </ul>
+  }
+  
+  @if (control?.touched && control?.invalid && errorText) {
+    <div class="message-error">{{ errorText }}</div>
+  }
+</div>