ngx-opalbytes-components 1.19.0 → 1.21.0

package/src/lib/shared/components/tab-group/tab-group.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoTabGroup } from './tab-group';
+import { CaoTabPanel } from '../tab-panel/tab-panel';
+
+const renderTabs = (panels: string) => ({
+  template: `<cao-tab-group>${panels}</cao-tab-group>`,
+  moduleMetadata: { imports: [CaoTabGroup, CaoTabPanel] },
+});
+
+const defaultPanels = `
+  <cao-tab-panel label="Aba 1"><p>Conteúdo da primeira aba.</p></cao-tab-panel>
+  <cao-tab-panel label="Aba 2"><p>Conteúdo da segunda aba.</p></cao-tab-panel>
+  <cao-tab-panel label="Aba 3"><p>Conteúdo da terceira aba.</p></cao-tab-panel>
+`;
+
+const panelsWithIcons = `
+  <cao-tab-panel label="Início" leadingIcon="Home"><p>Conteúdo de início.</p></cao-tab-panel>
+  <cao-tab-panel label="Buscar" leadingIcon="Search"><p>Conteúdo de busca.</p></cao-tab-panel>
+  <cao-tab-panel label="Configurações" leadingIcon="Settings"><p>Conteúdo de configurações.</p></cao-tab-panel>
+`;
+
+const meta: Meta<CaoTabGroup> = {
+  title: 'Componentes/Tab Group',
+  component: CaoTabGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    selectedIndex: { control: { type: 'number', min: 0 } },
+    labelHeight: { control: 'text' },
+    labelPaddingX: { control: 'text' },
+    labelGap: { control: 'text' },
+    colorText: { control: 'color' },
+    colorActive: { control: 'color' },
+    colorHoverBg: { control: 'color' },
+    colorDisabled: { control: 'color' },
+    colorInkBar: { control: 'color' },
+    colorHeaderBorder: { control: 'color' },
+    inkBarHeight: { control: 'text' },
+    contentPaddingTop: { control: 'text' },
+    labelRadius: { control: 'text' },
+    animationDuration: { control: 'text' },
+    dynamicHeight: { control: 'boolean' },
+    labelAlign: { control: 'select', options: ['start', 'center', 'end'] },
+    iconColorActive: { control: 'color' },
+    iconColorInactive: { control: 'color' },
+    strokeWidthIcon: { control: { type: 'number', min: 0.5, max: 3, step: 0.1 } },
+  },
+  args: {
+    selectedTabChange: fn(),
+    focusChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoTabGroup>;
+
+export const Padrao: Story = {
+  render: () => renderTabs(defaultPanels),
+};
+
+export const ComIcones: Story = {
+  render: () => renderTabs(panelsWithIcons),
+};
+
+export const ComAbaDesabilitada: Story = {
+  args: {
+    selectedIndex: 0,
+  },
+  render: () =>
+    renderTabs(`
+      <cao-tab-panel label="Aba 1"><p>Conteúdo da primeira aba.</p></cao-tab-panel>
+      <cao-tab-panel label="Bloqueada" isDisabled="true"><p>Não acessível.</p></cao-tab-panel>
+      <cao-tab-panel label="Aba 3"><p>Conteúdo da terceira aba.</p></cao-tab-panel>
+    `),
+};
+
+export const CoresPersonalizadas: Story = {
+  args: {
+    colorText: '#374151',
+    colorActive: '#dc2626',
+    colorHoverBg: '#fee2e2',
+    colorInkBar: '#dc2626',
+    colorHeaderBorder: '#f3f4f6',
+  },
+  render: () => renderTabs(defaultPanels),
+};
+
+export const LabelsCentralizados: Story = {
+  args: {
+    labelAlign: 'center',
+  },
+  render: () => renderTabs(defaultPanels),
+};
+
+export const TrailingIcons: Story = {
+  render: () =>
+    renderTabs(`
+      <cao-tab-panel label="Notificações" trailingIcon="Bell"><p>Conteúdo com sino.</p></cao-tab-panel>
+      <cao-tab-panel label="Perfil" trailingIcon="User"><p>Conteúdo de perfil.</p></cao-tab-panel>
+    `),
+};

package/src/lib/shared/components/tab-group/tab-group.ts

@@ -0,0 +1,218 @@
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  OnDestroy,
+  Input,
+  Output,
+  EventEmitter,
+  signal,
+  WritableSignal,
+  inject,
+  PLATFORM_ID,
+  ElementRef,
+  ViewChildren,
+  ViewChild,
+  HostBinding,
+} from '@angular/core';
+
+import { LucideDynamicIcon } from '@lucide/angular';
+import { Subscription } from 'rxjs';
+
+import { CaoTabPanel } from '../tab-panel/tab-panel';
+
+
+export interface ICaoTabChangeEvent {
+  previousIndex: number;
+  index: number;
+  tab: CaoTabPanel;
+}
+
+@Component({
+  selector: 'cao-tab-group',
+  standalone: true,
+  imports: [NgTemplateOutlet, LucideDynamicIcon],
+  templateUrl: './tab-group.component.html',
+  styleUrl: './tab-group.component.scss',
+  host: { class: 'cao-tab-group' },
+})
+export class CaoTabGroup implements AfterContentInit, OnDestroy {
+  @HostBinding('style')
+  get _hostStyles(): Record<string, string> {
+    return {
+      '--cao-tab-label-height': this.labelHeight,
+      '--cao-tab-label-px': this.labelPaddingX,
+      '--cao-tab-label-gap': this.labelGap,
+      '--cao-tab-color-text': this.colorText,
+      '--cao-tab-color-active': this.colorActive,
+      '--cao-tab-color-hover-bg': this.colorHoverBg,
+      '--cao-tab-color-disabled': this.colorDisabled,
+      '--cao-tab-color-ink-bar': this.colorInkBar,
+      '--cao-tab-color-header-border': this.colorHeaderBorder,
+      '--cao-tab-ink-bar-height': this.inkBarHeight,
+      '--cao-tab-content-pt': this.contentPaddingTop,
+      '--cao-tab-radius': this.labelRadius,
+    };
+  }
+  @Input()
+  set selectedIndex(val: number) {
+    this.selectIndex(val, false);
+  }
+  get selectedIndex(): number {
+    return this.activeIndex();
+  }
+
+  @Input() labelHeight = '48px';
+  @Input() labelPaddingX = '16px';
+  @Input() labelGap = '6px';
+  @Input() colorText = '#6b7280';
+  @Input() colorActive = '#4f46e5';
+  @Input() colorHoverBg = '#f3f4f6';
+  @Input() colorDisabled = '#d1d5db';
+  @Input() colorInkBar = '#4f46e5';
+  @Input() colorHeaderBorder = '#e5e7eb';
+  @Input() inkBarHeight = '2px';
+  @Input() contentPaddingTop = '20px';
+  @Input() labelRadius = '4px';
+  @Input() animationDuration = '300ms';
+  @Input() dynamicHeight = false;
+
+  @Input() labelAlign: 'start' | 'center' | 'end' = 'start';
+  @Input() iconColorActive = ''
+  @Input() iconColorInactive = ''
+  @Input() strokeWidthIcon = 1
+
+  @Output() readonly selectedTabChange = new EventEmitter<ICaoTabChangeEvent>();
+
+  @Output() readonly focusChange = new EventEmitter<number>();
+
+  @ContentChildren(CaoTabPanel) tabs!: QueryList<CaoTabPanel>;
+  @ViewChildren('tabBtn') tabBtns!: QueryList<ElementRef<HTMLButtonElement>>;
+  @ViewChild('inkBar') inkBar!: ElementRef<HTMLElement>;
+
+  readonly activeIndex: WritableSignal<number> = signal(0);
+
+  private activatedSet = new Set<number>();
+
+  tabList: CaoTabPanel[] = [];
+
+  private subs = new Subscription();
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+  ngAfterContentInit(): void {
+    this.tabList = this.tabs.toArray();
+    this.activatedSet.add(this.activeIndex());
+
+    this.subs.add(
+      this.tabs.changes.subscribe(() => {
+        this.tabList = this.tabs.toArray();
+        const safe = Math.min(this.activeIndex(), this.tabList.length - 1);
+        this.activeIndex.set(Math.max(0, safe));
+        this.scheduleInkBar();
+      })
+    );
+
+    this.scheduleInkBar();
+  }
+
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+
+  selectTab(index: number): void {
+    this.selectIndex(index, true);
+  }
+
+  get activeTab(): CaoTabPanel | null {
+    return this.tabList[this.activeIndex()] ?? null;
+  }
+
+  isActive(index: number): boolean {
+    return this.activeIndex() === index;
+  }
+  wasActivated(index: number): boolean {
+    return this.activatedSet.has(index);
+  }
+
+  onTabClick(index: number): void {
+    if (this.tabList[index]?.isDisabled) {return;}
+    this.selectIndex(index, true);
+  }
+
+  onKeydown(event: KeyboardEvent, currentIndex: number): void {
+    let next = currentIndex;
+
+    switch (event.key) {
+      case 'ArrowRight': next = this.nextEnabled(currentIndex, 1); break;
+      case 'ArrowLeft': next = this.nextEnabled(currentIndex, -1); break;
+      case 'Home': next = this.nextEnabled(-1, 1); break;
+      case 'End': next = this.nextEnabled(this.tabList.length, -1); break;
+      default: return;
+    }
+
+    event.preventDefault();
+    this.selectIndex(next, true);
+    this.focusTab(next);
+  }
+
+  onFocus(index: number): void {
+    this.focusChange.emit(index);
+  }
+
+  private nextEnabled(from: number, dir: 1 | -1): number {
+    const tabs = this.tabList;
+    let idx = from + dir;
+    while (idx >= 0 && idx < tabs.length) {
+      if (!tabs[idx].isDisabled) {return idx;}
+      idx += dir;
+    }
+    return from;
+  }
+
+  private selectIndex(index: number, emit: boolean): void {
+    if (!this.tabList) {
+      this.activeIndex.set(Math.max(0, index));
+      return;
+    }
+    const clamped = Math.max(0, Math.min(index, this.tabList.length - 1));
+    const previous = this.activeIndex();
+    if (clamped === previous && emit) {return;}
+
+    this.activeIndex.set(clamped);
+    this.activatedSet.add(clamped);
+
+    if (emit) {
+      this.selectedTabChange.emit({
+        previousIndex: previous,
+        index: clamped,
+        tab: this.tabList[clamped],
+      });
+    }
+
+    this.scheduleInkBar();
+  }
+
+  private focusTab(index: number): void {
+    this.tabBtns?.toArray()[index]?.nativeElement?.focus();
+  }
+
+  scheduleInkBar(): void {
+    if (!this.isBrowser) {return;}
+    requestAnimationFrame(() => this.updateInkBar());
+  }
+
+  private updateInkBar(): void {
+    const btns = this.tabBtns?.toArray();
+    const bar = this.inkBar?.nativeElement;
+    if (!btns || !bar) {return;}
+
+    const btn = btns[this.activeIndex()]?.nativeElement;
+    if (!btn) {return;}
+
+    bar.style.width = `${btn.offsetWidth}px`;
+    bar.style.transform = `translateX(${btn.offsetLeft}px)`;
+    bar.style.transitionDuration = this.animationDuration;
+  }
+}

package/src/lib/shared/components/tab-panel/tab-content.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[caoTabContent]',
+  standalone: true,
+})
+export class CaoTabContentDirective {}

package/src/lib/shared/components/tab-panel/tab-label.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[caoTabLabel]',
+  standalone: true,
+})
+export class CaoTabLabelDirective {}

package/src/lib/shared/components/tab-panel/tab-panel.spec.ts

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

package/src/lib/shared/components/tab-panel/tab-panel.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoTabPanel } from './tab-panel';
+
+const meta: Meta<CaoTabPanel> = {
+  title: 'Componentes/Tab Panel',
+  component: CaoTabPanel,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    leadingIcon: { control: 'text' },
+    trailingIcon: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+  },
+  args: {
+    label: 'Conteúdo da aba',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoTabPanel>;
+
+export const Padrao: Story = {
+  render: (args) => ({
+    template: `
+      <cao-tab-panel
+        [label]="label"
+        [isLucideIcon]="isLucideIcon"
+        [leadingIcon]="leadingIcon"
+        [trailingIcon]="trailingIcon"
+        [isDisabled]="isDisabled">
+        <p>Este é o conteúdo renderizado pela aba.</p>
+      </cao-tab-panel>
+    `,
+    props: args,
+  }),
+};
+
+export const ComLeadingIcon: Story = {
+  args: { label: 'Início', leadingIcon: 'Home', isLucideIcon: true },
+};
+
+export const ComTrailingIcon: Story = {
+  args: { label: 'Notificações', trailingIcon: 'Bell', isLucideIcon: true },
+};
+
+export const ComAmbosIcones: Story = {
+  args: { label: 'Configurações', leadingIcon: 'Settings', trailingIcon: 'ChevronRight', isLucideIcon: true },
+};
+
+export const Desabilitado: Story = {
+  args: { label: 'Bloqueada', isDisabled: true },
+};

package/src/lib/shared/components/tab-panel/tab-panel.ts

@@ -0,0 +1,31 @@
+import { Component, ContentChild, Input, TemplateRef, ViewChild } from "@angular/core"
+
+import { CaoTabContentDirective } from "./tab-content.directive"
+import { CaoTabLabelDirective } from "./tab-label.directive"
+
+@Component({
+  selector: "cao-tab-panel",
+  imports: [],
+  template: `
+    <ng-template #implicitContent>
+      <ng-content />
+    </ng-template>
+  `,
+  styleUrl: "./tab-panel.css",
+})
+export class CaoTabPanel {
+  @Input() label = ''
+  @Input() isLucideIcon = true
+  @Input() trailingIcon: string | null =  null
+  @Input() leadingIcon: string | null = null
+  @Input() isDisabled = false
+
+  @ContentChild(CaoTabLabelDirective, { read: TemplateRef })
+  labelTemplate?: TemplateRef<unknown>;
+
+  @ContentChild(CaoTabContentDirective, { read: TemplateRef })
+  lazyContent?: TemplateRef<unknown>;
+
+  @ViewChild('implicitContent', { static: true })
+  content!: TemplateRef<unknown>;
+ }

package/src/lib/shared/components/time-picker/time-picker.css

@@ -0,0 +1,84 @@
+.time-picker-wrapper {
+  width: 130px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.custom-timepicker {
+  width: 100%;
+}
+
+.custom-timepicker .mat-mdc-text-field-wrapper {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0;
+  height: 43px;
+  display: flex;
+  align-items: center;
+  background-color: var(--input-background);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: border-color 0.2s ease-in-out;
+}
+
+.custom-timepicker.invalid .mat-mdc-text-field-wrapper {
+  border-color: var(--error);
+}
+
+/* só aplica o verde de success enquanto estiver focado */
+.custom-timepicker.valid.mat-focused .mat-mdc-text-field-wrapper {
+  border-color: var(--success);
+}
+
+/* após perder o foco, "neutraliza" o success para transparente */
+.custom-timepicker.valid:not(.mat-focused) .mat-mdc-text-field-wrapper {
+  border-color: transparent;
+}
+
+.custom-timepicker .mdc-line-ripple {
+  display: none;
+}
+
+.custom-timepicker .mat-mdc-input-element {
+  font-size: 16px;
+  padding-left: 16px;
+  caret-color: transparent;
+  background: transparent;
+}
+
+.custom-timepicker .mat-mdc-icon-button.mat-mdc-button-base {
+  padding: 0;
+  border-left: 1px solid var(--line-color);
+  border-radius: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-timepicker .mat-timepicker-toggle-default-icon {
+  color: var(--primary);
+}
+
+.custom-timepicker .mat-mdc-form-field-flex {
+  background-color: var(--input-background);
+}
+
+/* oculta label flutuante e subscript conforme seu estilo */
+.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label {
+  display: none;
+}
+
+.mat-mdc-form-field-subscript-wrapper,
+.mat-mdc-form-field-bottom-align::before {
+  display: none;
+}
+
+.custom-timepicker .mat-mdc-form-field-infix {
+  padding: 18px 0 !important;
+}
+
+/* remove qualquer box-shadow remanescente no outline quando focado */
+.custom-timepicker.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
+  box-shadow: none !important;
+}

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

@@ -0,0 +1,21 @@
+<div class="time-picker-wrapper">
+  <mat-form-field
+    class="custom-timepicker"
+    [ngClass]="{
+      'invalid': control?.touched && control?.invalid,
+      'valid': control?.touched && control?.valid
+    }">
+    <input
+      matInput
+      placeholder="00:00"
+      [formControl]="control"
+      [matTimepicker]="picker"
+      [min]="min"
+      [max]="max"
+      [disabled]="isDisabled"
+      [attr.data-cy]="dataCy"
+      (blur)="control?.markAsTouched()" />
+    <mat-timepicker-toggle matSuffix [for]="picker" />
+    <mat-timepicker #picker [options]="customOptions" (selected)="timeChange.emit($event.value)" />
+  </mat-form-field>
+</div>

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

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

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

@@ -0,0 +1,66 @@
+import { FormControl } from '@angular/forms';
+
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { TimePicker } from './time-picker';
+
+const meta: Meta<TimePicker> = {
+  title: 'Componentes/Time Picker',
+  component: TimePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    isDisabled: { control: 'boolean' },
+    dataCy: { control: 'text' },
+    min: { control: 'text' },
+    max: { control: 'text' },
+  },
+  args: {
+    timeChange: fn(),
+    min: '07:00',
+    max: '23:00',
+  },
+};
+
+export default meta;
+type Story = StoryObj<TimePicker>;
+
+export const Padrao: Story = {
+  args: {
+    min: '07:00',
+    max: '23:00',
+  },
+};
+
+export const ComMinimoEMaximo: Story = {
+  args: {
+    min: '09:00',
+    max: '18:00',
+  },
+};
+
+export const ComValor: Story = {
+  render: (args) => ({
+    template: `
+      <cao-time-picker
+        [control]="control"
+        [min]="min"
+        [max]="max"
+        [isDisabled]="isDisabled"
+        (timeChange)="timeChange($event)" />
+    `,
+    props: {
+      control: new FormControl<Date | null>(new Date(2026, 0, 1, 14, 30)),
+      min: args.min,
+      max: args.max,
+      isDisabled: args.isDisabled,
+      timeChange: fn(),
+    },
+  }),
+};
+
+export const Desabilitado: Story = {
+  args: {
+    isDisabled: true,
+  },
+};