ngx-opalbytes-components 1.20.0 → 1.22.0

package/src/lib/shared/components/skeleton/skeleton.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, input } from '@angular/core';
+
+export type CaoSkeletonVariant = 'rect' | 'circle' | 'text';
+
+@Component({
+  selector: 'cao-skeleton',
+  imports: [CommonModule],
+  templateUrl: './skeleton.html',
+  styleUrl: './skeleton.css',
+})
+export class CaoSkeletonComponent {
+  borderRadius = input('14px');
+  width = input('100%');
+  height = input('100%');
+  bgColor = input<string>("#e2e8f0");
+  shine = input<string>("#f8fafc");
+  variant = input<CaoSkeletonVariant>('rect');
+  speed = input<string>('2s');
+  size = input<string>();
+  animationDeg = input<string>('90deg');
+
+  skeletonStyles = computed(() => {
+    const styles: Record<string, string> = {
+      '--skeleton-width': this.size() || this.width(),
+      '--skeleton-height': this.size() || this.height(),
+      '--skeleton-speed': this.speed(),
+      '--skeleton-animation-deg': this.animationDeg(),
+    };
+
+    if (this.bgColor()) {
+      styles['--skeleton-bg'] = this.bgColor()!;
+    }
+
+    if (this.shine()) {
+      styles['--skeleton-shine'] = this.shine()!;
+    }
+
+    if (this.variant() !== 'circle') {
+      styles['--skeleton-radius'] = this.borderRadius();
+    }
+
+
+    return styles;
+  });
+}

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { StepperComponent } from './stepper';
+
+const meta: Meta<StepperComponent> = {
+  title: 'Componentes/Stepper',
+  component: StepperComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+  },
+  args: {
+    maxReachedEvent: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<StepperComponent>;
+
+const renderStepper = (steps: string) => ({
+  template: `
+    <cao-stepper title="Etapas do cadastro" (maxReachedEvent)="maxReachedEvent()">
+      ${steps}
+    </cao-stepper>
+  `,
+  props: { maxReachedEvent: fn() },
+});
+
+export const Padrao: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Dados pessoais" />
+      <cao-step title="Endereço" />
+      <cao-step title="Confirmação" />
+    `),
+};
+
+export const ComTitulo: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Etapa 1" />
+      <cao-step title="Etapa 2" />
+      <cao-step title="Etapa 3" />
+    `),
+};
+
+export const MultiplastEtapas: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Cadastro" />
+      <cao-step title="Documentos" />
+      <cao-step title="Bancário" />
+      <cao-step title="Revisão" />
+      <cao-step title="Conclusão" />
+    `),
+};
+
+export const SomenteStep: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex;gap:16px">
+        <cao-step title="Ativa" isActive="true" />
+        <cao-step title="Inativa" />
+      </div>
+    `,
+  }),
+};
+
+export const StepComStepComponent: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Primeira" />
+      <cao-step title="Segunda" />
+      <cao-step title="Terceira" isActive="true" />
+    `),
+};

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-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/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,
+  },
+};

package/types/ngx-opalbytes-components.d.ts

@@ -460,6 +460,114 @@ declare class CaoKpi {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoKpi, "cao-kpi", never, { "kpiData": { "alias": "kpiData"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type CaoSkeletonVariant = 'rect' | 'circle' | 'text';
+declare class CaoSkeletonComponent {
+    borderRadius: i0.InputSignal<string>;
+    width: i0.InputSignal<string>;
+    height: i0.InputSignal<string>;
+    bgColor: i0.InputSignal<string>;
+    shine: i0.InputSignal<string>;
+    variant: i0.InputSignal<CaoSkeletonVariant>;
+    speed: i0.InputSignal<string>;
+    size: i0.InputSignal<string | undefined>;
+    animationDeg: i0.InputSignal<string>;
+    skeletonStyles: i0.Signal<Record<string, string>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoSkeletonComponent, "cao-skeleton", never, { "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "shine": { "alias": "shine"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "animationDeg": { "alias": "animationDeg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CaoCardVariant = "horizontal" | "square";
+interface ICaoCardBadge {
+    label: string;
+    color?: string;
+    borderColor?: string;
+    bg?: string;
+}
+interface ICaoCardMeta {
+    icon: string;
+    label: string;
+}
+interface ICaoCardAvatar {
+    initials?: string;
+    src?: string;
+    color?: string;
+}
+declare class CaoCardComponent {
+    variant: CaoCardVariant;
+    title?: string;
+    subtitle?: string;
+    detail?: string;
+    detailColor?: string;
+    icon?: string;
+    avatar?: ICaoCardAvatar;
+    meta?: ICaoCardMeta[];
+    badge?: ICaoCardBadge;
+    selected: boolean;
+    clickable: boolean;
+    bgColor: string;
+    borderColor: string;
+    readonly cardClick: EventEmitter<void>;
+    get avatarBg(): string;
+    handleClick(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoCardComponent, "cao-card", never, { "variant": { "alias": "variant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "detail": { "alias": "detail"; "required": false; }; "detailColor": { "alias": "detailColor"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "meta": { "alias": "meta"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, { "cardClick": "cardClick"; }, never, ["*"], true, never>;
+}
+
+declare class CaoBaseToggleComponent {
+    type: string;
+    placeholder: string;
+    inputClass: string;
+    value: string | number | boolean | Date;
+    errorMessage: string;
+    isDisabled: boolean;
+    maxLength?: number;
+    searchMode: boolean;
+    showBorder: boolean;
+    isLucideIcon: boolean;
+    iconColor: string;
+    mask?: string;
+    control?: AbstractControl | null;
+    tooltip: string;
+    dataCy?: string;
+    textareaRows?: string;
+    decimalMarker: "." | "," | [".", ","];
+    thousandSeparator: string;
+    allowNegativeNumbers: boolean;
+    separatorLimit: string;
+    set leadingIcon(value: string);
+    set trailingIcon(value: string);
+    readonly valueChange: EventEmitter<string>;
+    readonly searchClick: EventEmitter<void>;
+    readonly inputChange: EventEmitter<string>;
+    isFocused: boolean;
+    icon: boolean;
+    _leadingIcon?: string;
+    _trailingIcon?: string;
+    onChange: any;
+    onTouched: any;
+    get hasError(): boolean;
+    controlName: string;
+    get controlNameValue(): string;
+    onInput(event: Event): void;
+    onInputChange(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    onSearchClick(): void;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    isChecked: boolean;
+    checkedTextPlaceholder: string;
+    uncheckedTextPlaceholder: string;
+    readonly statusChanged: EventEmitter<CaoBaseToggleComponent>;
+    checkboxInput: HTMLInputElement;
+    onToggleCheckbox(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoBaseToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseToggleComponent, "cao-base-toggle", never, { "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "inputClass": { "alias": "inputClass"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "searchMode": { "alias": "searchMode"; "required": false; }; "showBorder": { "alias": "showBorder"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "control": { "alias": "control"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "textareaRows": { "alias": "textareaRows"; "required": false; }; "decimalMarker": { "alias": "decimalMarker"; "required": false; }; "thousandSeparator": { "alias": "thousandSeparator"; "required": false; }; "allowNegativeNumbers": { "alias": "allowNegativeNumbers"; "required": false; }; "separatorLimit": { "alias": "separatorLimit"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isChecked": { "alias": "isChecked"; "required": false; }; "checkedTextPlaceholder": { "alias": "checkedTextPlaceholder"; "required": false; }; "uncheckedTextPlaceholder": { "alias": "uncheckedTextPlaceholder"; "required": false; }; }, { "valueChange": "valueChange"; "searchClick": "searchClick"; "inputChange": "inputChange"; "statusChanged": "statusChanged"; }, never, never, true, never>;
+}
+
 type ModalType = "validation" | "finger" | "facial" | "clinic" | "graph" | "restriction" | "default";
 interface IModal {
     status: boolean;
@@ -852,5 +960,5 @@ declare class BaseAlertService {
     static ɵprov: i0.ɵɵInjectableDeclaration<BaseAlertService>;
 }
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoDropDownComponent, CaoKpi, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
-export type { AlertType, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoTabChangeEvent, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoCardComponent, CaoDropDownComponent, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export type { AlertType, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoTabChangeEvent, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };