ngx-opalbytes-components 1.26.0 → 1.27.0

package/src/lib/shared/components/checkbox/checkbox.component.ts

@@ -0,0 +1,258 @@
+import { CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from "@angular/core";
+import { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+import { LucideDynamicIcon } from "@lucide/angular";
+import { Subscription } from "rxjs";
+
+let nextCheckboxId = 0;
+
+export interface ICaoCheckboxChangeEvent {
+  checked: boolean;
+  source: CaoCheckboxComponent;
+}
+
+@Component({
+  selector: "cao-checkbox",
+  standalone: true,
+  imports: [CommonModule, LucideDynamicIcon],
+  templateUrl: "./checkbox.component.html",
+  styleUrl: "./checkbox.component.css",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CaoCheckboxComponent),
+      multi: true,
+    },
+  ],
+})
+export class CaoCheckboxComponent implements ControlValueAccessor, OnChanges, OnDestroy {
+  @Input() checked = false;
+  @Input() indeterminate = false;
+  @Input() isDisabled = false;
+  @Input() required = false;
+  @Input() label = "";
+  @Input() labelPosition: "before" | "after" = "after";
+  @Input() name = "";
+  @Input() id = "";
+  @Input() ariaLabel = "";
+  @Input() ariaLabelledBy = "";
+  @Input() dataCy = "";
+  @Input() control?: AbstractControl | null;
+  @Input() errorMessage = "";
+
+  @Input() color?: string;
+  @Input() uncheckedColor?: string;
+  @Input() disabledColor?: string;
+  @Input() labelColor?: string;
+  @Input() disabledLabelColor?: string;
+  @Input() focusRingColor?: string;
+
+  @Input() size?: string;
+  @Input() borderRadius?: string;
+  @Input() animationDuration?: string;
+
+  @Input() checkedIcon = "";
+  @Input() uncheckedIcon = "";
+  @Input() indeterminateIcon = "";
+  @Input() isLucideIcon = false;
+  @Input() iconColor = "";
+  @Input() checkedIconColor = "";
+  @Input() uncheckedIconColor = "";
+  @Input() iconSize: string | number = 14;
+  @Input() iconStrokeWidth: string | number = 2.5;
+
+  @Input() set disabled(value: boolean) {
+    this.isDisabled = value;
+    this.cdr.markForCheck();
+  }
+
+  get disabled(): boolean {
+    return this.isDisabled;
+  }
+
+  @Output() readonly checkedChange = new EventEmitter<boolean>();
+  @Output() readonly indeterminateChange = new EventEmitter<boolean>();
+  @Output() readonly checkboxChange = new EventEmitter<ICaoCheckboxChangeEvent>();
+
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly uid = `cao-checkbox-${nextCheckboxId++}`;
+  private controlSub?: Subscription;
+  private onChange: (value: boolean) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["control"]) {
+      this.controlSub?.unsubscribe();
+      this.controlSub = this.control?.statusChanges.subscribe(() =>
+        this.cdr.markForCheck(),
+      );
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.controlSub?.unsubscribe();
+  }
+
+  get inputId(): string {
+    return this.id || this.uid;
+  }
+
+  get hasError(): boolean {
+    return !!this.errorMessage;
+  }
+
+  get hasInvalidState(): boolean {
+    return !!(this.control?.touched && this.control?.invalid);
+  }
+
+  get hasValidState(): boolean {
+    return !!(this.control?.touched && this.control?.valid);
+  }
+
+  get resolvedIconColor(): string {
+    if (this.indeterminate) {
+      return this.iconColor || this.checkedIconColor;
+    }
+
+    return this.checked
+      ? this.checkedIconColor || this.iconColor
+      : this.uncheckedIconColor || this.iconColor;
+  }
+
+  @HostBinding("style")
+  get hostStyles(): Record<string, string> {
+    const styles: Record<string, string> = {};
+
+    if (this.color) {
+      styles["--cao-checkbox-color"] = this.color;
+    }
+    if (this.uncheckedColor) {
+      styles["--cao-checkbox-unselected"] = this.uncheckedColor;
+    }
+    if (this.disabledColor) {
+      styles["--cao-checkbox-disabled"] = this.disabledColor;
+    }
+    if (this.labelColor) {
+      styles["--cao-checkbox-label"] = this.labelColor;
+    }
+    if (this.disabledLabelColor) {
+      styles["--cao-checkbox-label-disabled"] = this.disabledLabelColor;
+    }
+    if (this.focusRingColor) {
+      styles["--cao-checkbox-focus-ring"] = this.focusRingColor;
+    }
+    if (this.size) {
+      styles["--cao-checkbox-size"] = this.size;
+    }
+    if (this.borderRadius) {
+      styles["--cao-checkbox-radius"] = this.borderRadius;
+    }
+    if (this.animationDuration) {
+      styles["--cao-checkbox-duration"] = this.animationDuration;
+    }
+    if (this.resolvedIconColor) {
+      styles["--cao-checkbox-icon-color"] = this.resolvedIconColor;
+    }
+
+    styles["--cao-checkbox-icon-size"] = this.toCssLength(this.iconSize);
+
+    return styles;
+  }
+
+  toggle(): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    this.setChecked(!this.checked, true);
+  }
+
+  setChecked(value: boolean, emit = true): void {
+    if (this.isDisabled) {
+      return;
+    }
+
+    const wasIndeterminate = this.indeterminate;
+
+    this.checked = value;
+    this.indeterminate = false;
+    this.onChange(value);
+
+    if (emit) {
+      this.checkedChange.emit(value);
+      this.checkboxChange.emit({ checked: value, source: this });
+    }
+
+    if (wasIndeterminate) {
+      this.indeterminateChange.emit(false);
+    }
+
+    this.cdr.markForCheck();
+  }
+
+  setIndeterminate(value: boolean): void {
+    if (this.isDisabled || this.indeterminate === value) {
+      return;
+    }
+
+    this.indeterminate = value;
+    this.indeterminateChange.emit(value);
+    this.cdr.markForCheck();
+  }
+
+  enable(): void {
+    this.isDisabled = false;
+    this.cdr.markForCheck();
+  }
+
+  disable(): void {
+    this.isDisabled = true;
+    this.cdr.markForCheck();
+  }
+
+  onInputChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.setChecked(target.checked, true);
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: boolean | null): void {
+    this.checked = !!value;
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  private toCssLength(value: string | number): string {
+    return typeof value === "number" ? `${value}px` : value;
+  }
+}

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

@@ -0,0 +1,240 @@
+import { FormsModule } from '@angular/forms';
+
+import {
+  LucideCheck,
+  LucideCircle,
+  LucideHeart,
+  LucideMinus,
+  LucideX,
+  provideLucideIcons,
+} from '@lucide/angular';
+import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoCheckboxComponent } from './checkbox.component';
+
+const imageIcon =
+  'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Ccircle cx="12" cy="12" r="8" fill="%234f46e5"/%3E%3C/svg%3E';
+
+const meta: Meta<CaoCheckboxComponent> = {
+  title: 'Componentes/Checkbox',
+  component: CaoCheckboxComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [
+        provideLucideIcons(
+          LucideCheck,
+          LucideMinus,
+          LucideX,
+          LucideCircle,
+          LucideHeart,
+        ),
+      ],
+    }),
+    (story) => ({
+      ...story,
+      moduleMetadata: {
+        imports: [FormsModule],
+      },
+    }),
+  ],
+  argTypes: {
+    checked: { control: 'boolean' },
+    indeterminate: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    label: { control: 'text' },
+    labelPosition: { control: 'select', options: ['before', 'after'] },
+    name: { control: 'text' },
+    id: { control: 'text' },
+    ariaLabel: { control: 'text' },
+    ariaLabelledBy: { control: 'text' },
+    dataCy: { control: 'text' },
+    color: { control: 'color' },
+    uncheckedColor: { control: 'color' },
+    disabledColor: { control: 'color' },
+    labelColor: { control: 'color' },
+    disabledLabelColor: { control: 'color' },
+    focusRingColor: { control: 'color' },
+    size: { control: 'text' },
+    borderRadius: { control: 'text' },
+    animationDuration: { control: 'text' },
+    checkedIcon: { control: 'text' },
+    uncheckedIcon: { control: 'text' },
+    indeterminateIcon: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    checkedIconColor: { control: 'color' },
+    uncheckedIconColor: { control: 'color' },
+    iconSize: { control: 'text' },
+    iconStrokeWidth: { control: 'text' },
+  },
+  args: {
+    checked: false,
+    indeterminate: false,
+    isDisabled: false,
+    required: false,
+    label: 'Aceito os termos',
+    labelPosition: 'after',
+    checkedIcon: '',
+    uncheckedIcon: '',
+    indeterminateIcon: '',
+    isLucideIcon: false,
+    iconColor: '',
+    checkedIconColor: '',
+    uncheckedIconColor: '',
+    iconSize: 14,
+    iconStrokeWidth: 2.5,
+    checkedChange: fn(),
+    indeterminateChange: fn(),
+    checkboxChange: fn(),
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <cao-checkbox
+        [(ngModel)]="checked"
+        [indeterminate]="indeterminate"
+        [isDisabled]="isDisabled"
+        [required]="required"
+        [label]="label"
+        [labelPosition]="labelPosition"
+        [name]="name"
+        [id]="id"
+        [ariaLabel]="ariaLabel"
+        [ariaLabelledBy]="ariaLabelledBy"
+        [dataCy]="dataCy"
+        [color]="color"
+        [uncheckedColor]="uncheckedColor"
+        [disabledColor]="disabledColor"
+        [labelColor]="labelColor"
+        [disabledLabelColor]="disabledLabelColor"
+        [focusRingColor]="focusRingColor"
+        [size]="size"
+        [borderRadius]="borderRadius"
+        [animationDuration]="animationDuration"
+        [checkedIcon]="checkedIcon"
+        [uncheckedIcon]="uncheckedIcon"
+        [indeterminateIcon]="indeterminateIcon"
+        [isLucideIcon]="isLucideIcon"
+        [iconColor]="iconColor"
+        [checkedIconColor]="checkedIconColor"
+        [uncheckedIconColor]="uncheckedIconColor"
+        [iconSize]="iconSize"
+        [iconStrokeWidth]="iconStrokeWidth"
+        (checkedChange)="checkedChange($event)"
+        (indeterminateChange)="indeterminateChange($event)"
+        (checkboxChange)="checkboxChange($event)">
+      </cao-checkbox>
+    `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<CaoCheckboxComponent>;
+
+export const Padrao: Story = {};
+
+export const Marcado: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const Indeterminado: Story = {
+  args: {
+    indeterminate: true,
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    isDisabled: true,
+  },
+};
+
+export const DesabilitadoMarcado: Story = {
+  args: {
+    checked: true,
+    isDisabled: true,
+  },
+};
+
+export const LabelAntes: Story = {
+  args: {
+    checked: true,
+    labelPosition: 'before',
+  },
+};
+
+export const Obrigatorio: Story = {
+  args: {
+    required: true,
+    label: 'Campo obrigatório',
+  },
+};
+
+export const CoresCustomizadas: Story = {
+  args: {
+    checked: true,
+    label: 'Cores customizadas',
+    color: '#16a34a',
+    uncheckedColor: '#94a3b8',
+    labelColor: '#166534',
+    focusRingColor: 'rgba(22, 163, 74, 0.35)',
+  },
+};
+
+export const TamanhoCustomizado: Story = {
+  args: {
+    checked: true,
+    label: 'Tamanho customizado',
+    size: '28px',
+    borderRadius: '8px',
+    animationDuration: '300ms',
+    iconSize: 20,
+    iconStrokeWidth: 3,
+  },
+};
+
+export const IconesLucide: Story = {
+  args: {
+    checked: true,
+    label: 'Ícones Lucide',
+    checkedIcon: 'check',
+    uncheckedIcon: 'x',
+    indeterminateIcon: 'minus',
+    isLucideIcon: true,
+    checkedIconColor: '#ffffff',
+    uncheckedIconColor: '#6b7280',
+    iconSize: 14,
+    iconStrokeWidth: 2.5,
+  },
+};
+
+export const IconesCustomizados: Story = {
+  args: {
+    checked: true,
+    label: 'Ícones customizados',
+    checkedIcon: 'heart',
+    uncheckedIcon: 'circle',
+    isLucideIcon: true,
+    checkedIconColor: '#ffffff',
+    uncheckedIconColor: '#db2777',
+    color: '#db2777',
+    uncheckedColor: '#f9a8d4',
+  },
+};
+
+export const IconeImagem: Story = {
+  args: {
+    checked: true,
+    label: 'Ícone via URL/data URI',
+    checkedIcon: imageIcon,
+    uncheckedIcon: imageIcon,
+    isLucideIcon: false,
+    iconSize: 12,
+  },
+};

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

@@ -30,4 +30,5 @@ export * from "./base-toggle/base-toggle.component"
 export * from "./slide-toggle/slide-toggle.component"
 export * from "./radio/radio-group.component"
 export * from "./radio/radio-button.component"
+export * from "./checkbox/checkbox.component"
 export * from "./footer/footer"

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

@@ -793,6 +793,76 @@ declare class CaoRadioGroupComponent implements ControlValueAccessor {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoRadioGroupComponent, "cao-radio-group", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "color": { "alias": "color"; "required": false; }; "unselectedColor": { "alias": "unselectedColor"; "required": false; }; "disabledColor": { "alias": "disabledColor"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "disabledLabelColor": { "alias": "disabledLabelColor"; "required": false; }; "focusRingColor": { "alias": "focusRingColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
 }
 
+interface ICaoCheckboxChangeEvent {
+    checked: boolean;
+    source: CaoCheckboxComponent;
+}
+declare class CaoCheckboxComponent implements ControlValueAccessor, OnChanges, OnDestroy {
+    checked: boolean;
+    indeterminate: boolean;
+    isDisabled: boolean;
+    required: boolean;
+    label: string;
+    labelPosition: "before" | "after";
+    name: string;
+    id: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    dataCy: string;
+    control?: AbstractControl | null;
+    errorMessage: string;
+    color?: string;
+    uncheckedColor?: string;
+    disabledColor?: string;
+    labelColor?: string;
+    disabledLabelColor?: string;
+    focusRingColor?: string;
+    size?: string;
+    borderRadius?: string;
+    animationDuration?: string;
+    checkedIcon: string;
+    uncheckedIcon: string;
+    indeterminateIcon: string;
+    isLucideIcon: boolean;
+    iconColor: string;
+    checkedIconColor: string;
+    uncheckedIconColor: string;
+    iconSize: string | number;
+    iconStrokeWidth: string | number;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    readonly checkedChange: EventEmitter<boolean>;
+    readonly indeterminateChange: EventEmitter<boolean>;
+    readonly checkboxChange: EventEmitter<ICaoCheckboxChangeEvent>;
+    private readonly cdr;
+    private readonly uid;
+    private controlSub?;
+    private onChange;
+    private onTouched;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    get inputId(): string;
+    get hasError(): boolean;
+    get hasInvalidState(): boolean;
+    get hasValidState(): boolean;
+    get resolvedIconColor(): string;
+    get hostStyles(): Record<string, string>;
+    toggle(): void;
+    setChecked(value: boolean, emit?: boolean): void;
+    setIndeterminate(value: boolean): void;
+    enable(): void;
+    disable(): void;
+    onInputChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: boolean | null): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private toCssLength;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoCheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoCheckboxComponent, "cao-checkbox", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "control": { "alias": "control"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "color": { "alias": "color"; "required": false; }; "uncheckedColor": { "alias": "uncheckedColor"; "required": false; }; "disabledColor": { "alias": "disabledColor"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "disabledLabelColor": { "alias": "disabledLabelColor"; "required": false; }; "focusRingColor": { "alias": "focusRingColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "checkedIcon": { "alias": "checkedIcon"; "required": false; }; "uncheckedIcon": { "alias": "uncheckedIcon"; "required": false; }; "indeterminateIcon": { "alias": "indeterminateIcon"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "checkedIconColor": { "alias": "checkedIconColor"; "required": false; }; "uncheckedIconColor": { "alias": "uncheckedIconColor"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "iconStrokeWidth": { "alias": "iconStrokeWidth"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; "indeterminateChange": "indeterminateChange"; "checkboxChange": "checkboxChange"; }, never, ["*"], true, never>;
+}
+
 type ModalType = "validation" | "finger" | "facial" | "clinic" | "graph" | "restriction" | "default";
 interface IModal {
     status: boolean;
@@ -1248,5 +1318,5 @@ declare class CaoBaseWidgetComponent<TData = unknown> {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseWidgetComponent<any>, "cao-base-widget", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "widgetIcon": { "alias": "widgetIcon"; "required": false; "isSignal": true; }; "cancelTextButton": { "alias": "cancelTextButton"; "required": false; "isSignal": true; }; "saveTextButton": { "alias": "saveTextButton"; "required": false; "isSignal": true; }; "displayActionButton": { "alias": "displayActionButton"; "required": false; "isSignal": true; }; "displaySaveButton": { "alias": "displaySaveButton"; "required": false; "isSignal": true; }; "displayCancelButton": { "alias": "displayCancelButton"; "required": false; "isSignal": true; }; "shouldCloseWhenCancel": { "alias": "shouldCloseWhenCancel"; "required": false; "isSignal": true; }; "widgetDirection": { "alias": "widgetDirection"; "required": false; "isSignal": true; }; "typeCancel": { "alias": "typeCancel"; "required": false; "isSignal": true; }; "saveDisabled": { "alias": "saveDisabled"; "required": false; "isSignal": true; }; "saveIcon": { "alias": "saveIcon"; "required": false; "isSignal": true; }; "saveIconPosition": { "alias": "saveIconPosition"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; "confirmOnClose": { "alias": "confirmOnClose"; "required": false; "isSignal": true; }; "widgetData": { "alias": "widgetData"; "required": false; "isSignal": true; }; }, { "save": "save"; "deleted": "deleted"; "cancelEvent": "cancelEvent"; "closeRequest": "closeRequest"; }, never, ["widget-title", "*"], true, never>;
 }
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
-export type { AlertType, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, CaoWidgetDirection, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoRadioChangeEvent, ICaoSlideToggleChangeEvent, ICaoTabChangeEvent, ICaoWidgetOptions, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IErrorStateMatcher, IFormFieldControl, 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, CaoBaseWidgetComponent, CaoCardComponent, CaoCheckboxComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export type { AlertType, CaoCardVariant, CaoSkeletonVariant, CaoTypeInputs, CaoWidgetDirection, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoCardAvatar, ICaoCardBadge, ICaoCardMeta, ICaoCheckboxChangeEvent, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoRadioChangeEvent, ICaoSlideToggleChangeEvent, ICaoTabChangeEvent, ICaoWidgetOptions, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IErrorStateMatcher, IFormFieldControl, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };