ngx-opalbytes-components 1.21.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

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

@@ -16,4 +16,9 @@ export * from "./tab-group/tab-group"
 export * from "./tab-panel/tab-panel"
 
 export * from "./base-icon/base-icon"
-export * from "./kpi/kpi"
+export * from "./kpi/kpi"
+export * from "./skeleton/skeleton"
+
+export * from "./card/card.component"
+export * from "./base-toggle/base-toggle.component"
+export * from "./footer/footer"

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

@@ -0,0 +1,92 @@
+/*
+ * CSS Custom Properties — all prefixed with --skeleton-*
+ * These cascade naturally, so a parent component can override any token:
+ *
+ *   .my-card {
+ *     --skeleton-bg: #d1d5db;
+ *     --skeleton-shine: #f3f4f6;
+ *     --skeleton-radius: 8px;
+ *     --skeleton-speed: 2s;
+ *   }
+ */
+
+:host {
+  /* ─── Layout defaults (overridable via [width]/[height] inputs) ─── */
+  --skeleton-width: 100%;
+  --skeleton-height: 100%;
+
+  /* ─── Visual tokens — inherit from parent if set there ─── */
+  --skeleton-bg: #e2e8f0;
+  --skeleton-shine: #f8fafc;
+  --skeleton-radius: 14px;
+  --skeleton-speed: 2s;
+  --skeleton-animation-deg: 90deg;
+
+  display: contents; /* host element is transparent to layout */
+}
+
+/* ─────────────────────────── Base block ─────────────────────────── */
+
+.cao-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: var(--skeleton-width);
+  height: var(--skeleton-height);
+  background-color: var(--skeleton-bg);
+  border-radius: var(--skeleton-radius);
+
+  /* Prevent content from leaking during SSR */
+  color: transparent;
+  user-select: none;
+  pointer-events: none;
+
+  /* Respect reduced-motion preference */
+  @media (prefers-reduced-motion: no-preference) {
+    will-change: transform; /* promote shimmer layer */
+  }
+}
+
+/* ─────────────────────────── Variants ───────────────────────────── */
+
+.cao-skeleton--circle {
+  --skeleton-radius: 50%;
+  /* For circles the consumer usually sets equal width/height;
+     but we guard with aspect-ratio so it stays circular even
+     when only width is specified. */
+  aspect-ratio: 1 / 1;
+}
+
+.cao-skeleton--text {
+  --skeleton-radius: 4px;
+  height: 1em; /* matches current font-size of parent context */
+  width: var(--skeleton-width);
+}
+
+/* ─────────────────────────── Shimmer ────────────────────────────── */
+
+.cao-skeleton__shimmer {
+  position: absolute;
+  inset: 0;
+
+  background: linear-gradient(
+    var(--skeleton-animation-deg),
+    transparent 30%,
+    var(--skeleton-shine) 50%,
+    transparent 70%
+  );
+  background-size: 200% 100%;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}

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

@@ -0,0 +1,3 @@
+<span class="cao-skeleton" [ngClass]="'cao-skeleton--' + variant()" [style]="skeletonStyles()">
+  <span class="cao-skeleton__shimmer"></span>
+</span>

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

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

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

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoSkeletonComponent } from './skeleton';
+
+const meta: Meta<CaoSkeletonComponent> = {
+  title: 'Componentes/Skeleton',
+  component: CaoSkeletonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['rect', 'circle', 'text'],
+    },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    size: { control: 'text' },
+    bgColor: { control: 'color' },
+    shine: { control: 'color' },
+    borderRadius: { control: 'text' },
+    speed: { control: 'text' },
+    animationDeg: { control: 'text' },
+  },
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    bgColor: '#e2e8f0',
+    shine: '#f8fafc',
+    speed: '2s',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoSkeletonComponent>;
+
+export const Retangulo: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+  },
+};
+
+export const RetanguloComBordaArredondada: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '60px',
+    borderRadius: '8px',
+  },
+};
+
+export const Circulos: Story = {
+  args: {
+    bgColor: '#8100ff',
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <cao-skeleton [size]="'24px'" [variant]="'circle'"></cao-skeleton>
+        <cao-skeleton [size]="'48px'" [variant]="'circle'"></cao-skeleton>
+        <cao-skeleton [size]="'80px'" [variant]="'circle'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const RetangulosComTamanhosVariados: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; width: 320px;">
+        <cao-skeleton [width]="'100%'" [height]="'12px'"></cao-skeleton>
+        <cao-skeleton [width]="'80%'" [height]="'12px'"></cao-skeleton>
+        <cao-skeleton [width]="'60%'" [height]="'12px'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const LinhaDeTexto: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; width: 260px;">
+        <cao-skeleton [variant]="'text'" [width]="'100%'"></cao-skeleton>
+        <cao-skeleton [variant]="'text'" [width]="'90%'"></cao-skeleton>
+        <cao-skeleton [variant]="'text'" [width]="'70%'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const CorCustomizada: Story = {
+  args: {
+    variant: 'rect',
+    width: '220px',
+    height: '48px',
+    bgColor: '#e0e7ff',
+    shine: '#ffffff',
+    borderRadius: '12px',
+  },
+};
+
+export const AnimacaoRapida: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    speed: '0.8s',
+  },
+};
+
+export const AnimacaoLenta: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    speed: '4s',
+  },
+};
+
+export const GradienteVertical: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    animationDeg: '0deg',
+  },
+};

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