ngx-opalbytes-components 1.18.0 → 1.20.0

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.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.ts

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { DateAdapter } from '@angular/material/core';
+import { MatTimepickerOption } from '@angular/material/timepicker';
+
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'cao-time-picker',
+  imports: [ MaterialModule, CommonModule, ReactiveFormsModule, ],
+  templateUrl: './time-picker.html',
+  styleUrl: './time-picker.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TimePicker {
+  @Input() control: FormControl<Date | null> = new FormControl<Date | null>(null);
+  @Input() isDisabled = false;
+  @Input() dataCy?: string;
+  @Input() set min(v: string) {
+    this._min = v;
+    this.minInNumber = this.convertStringInNumber(v)
+    this.customOptions = this.generateTimeOptions().filter((option) => option.label >= this._min);
+  }
+  @Input() set max(v: string) {
+    this._max = v;
+    this.maxInNumber = this.convertStringInNumber(v)
+    this.customOptions = this.generateTimeOptions().filter((option) => option.label <= this._max);
+  }
+
+  minInNumber = 7;
+  maxInNumber = 23;
+
+  @Output() readonly timeChange = new EventEmitter<Date>();
+
+  private _min = "07:00";
+  private _max = "23:00";
+
+  customOptions: MatTimepickerOption<Date>[] = this.generateTimeOptions();
+
+  constructor(private _adapter: DateAdapter<any>) {
+    this._adapter.setLocale("pt-BR");
+  }
+
+  get errorText(): string | null {
+    if (!this.control) {return null;}
+
+    if (this.control.hasError("required") || (this.control.touched && !this.control.value)) {
+      return "*Campo obrigatório";
+    }
+    if (this.control.hasError("quarterHour") && this.control.touched) {
+      return "Formato inválido";
+    }
+    return null;
+  }
+
+  private convertStringInNumber(hour: string): number{
+    const explodedHour = parseInt(hour.split(":")[0])
+    if(typeof explodedHour !== 'number'){
+      return explodedHour
+    }
+    return explodedHour
+  }
+
+  private generateTimeOptions(): MatTimepickerOption<Date>[] {
+    const options: MatTimepickerOption<Date>[] = [];
+    const baseDate = new Date(2025, 0, 1);
+
+    for (let hour = this.minInNumber; hour <= this.maxInNumber; hour++) {
+      for (let minute = 0; minute < 60; minute += 15) {
+        if (hour === this.maxInNumber && minute > 0) {continue;}
+        const date = new Date(baseDate);
+        date.setHours(hour, minute, 0);
+        const label = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+        options.push({ label, value: date });
+      }
+    }
+
+    return options;
+  }
+
+  updateTimeOptions(options: MatTimepickerOption<Date>[]): void {
+    this.customOptions = options;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+}

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

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { OnInit, EventEmitter, OnChanges, SimpleChanges, OnDestroy, ElementRef, ChangeDetectorRef, Signal, AfterContentInit, QueryList, TemplateRef, WritableSignal, AfterViewInit } from '@angular/core';
+import { OnInit, EventEmitter, OnChanges, OnDestroy, AfterViewInit, ElementRef, TemplateRef, SimpleChanges, ChangeDetectorRef, Signal, AfterContentInit, QueryList, WritableSignal } from '@angular/core';
 import { ControlValueAccessor, AbstractControl, FormControl } from '@angular/forms';
 import { MatDateRangeInput } from '@angular/material/datepicker';
-import { MatAutocompleteTrigger, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -30,10 +29,11 @@ declare class CaoBaseButtonComponent implements OnInit {
     iconColor?: string;
     strokeWidthIcon: number;
     minTextToTooltip: number;
+    iconSize: number;
     ngOnInit(): void;
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CaoBaseButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseButtonComponent, "cao-button", never, { "buttonText": { "alias": "buttonText"; "required": false; }; "isDarkMode": { "alias": "isDarkMode"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "btnClass": { "alias": "btnClass"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "minTextToTooltip": { "alias": "minTextToTooltip"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseButtonComponent, "cao-button", never, { "buttonText": { "alias": "buttonText"; "required": false; }; "isDarkMode": { "alias": "isDarkMode"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "btnClass": { "alias": "btnClass"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "minTextToTooltip": { "alias": "minTextToTooltip"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
 }
 
 type CaoTypeInputs = 'text' | 'textarea' | 'number' | 'password' | 'date';
@@ -110,7 +110,7 @@ interface ICaoAutoCompleteOption {
     icon?: string;
     iconPosition?: string;
 }
-declare class CaoAutocompleteComponent implements OnInit, OnChanges, ControlValueAccessor {
+declare class CaoAutocompleteComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit, ControlValueAccessor {
     label: string;
     placeholder: string;
     options: ICaoAutoCompleteOption[];
@@ -127,43 +127,83 @@ declare class CaoAutocompleteComponent implements OnInit, OnChanges, ControlValu
     autocompleteBgColor: string;
     strokeWidthIcon: number;
     isDisabled: boolean;
+    inputHeigth: string;
+    iconSize: number;
+    checkIcon: string;
+    showCheckIcon: boolean;
+    isLucideCheckIcon: boolean;
     readonly itemSelected: EventEmitter<ICaoAutoCompleteOption>;
     readonly blurEvent: EventEmitter<void>;
     readonly focusEvent: EventEmitter<void>;
     readonly leadingIconClick: EventEmitter<Event | MouseEvent>;
     readonly trailingIconClick: EventEmitter<Event | MouseEvent>;
-    autocompleteTrigger: MatAutocompleteTrigger;
+    inputEl: ElementRef<HTMLInputElement>;
+    wrapperEl: ElementRef<HTMLDivElement>;
+    panelTemplate: TemplateRef<any>;
+    /** controla apenas o texto digitado / exibido no input */
     internalControl: FormControl<string | null>;
     filteredOptions$: Observable<ICaoAutoCompleteOption[]>;
+    filteredOptionsList: ICaoAutoCompleteOption[];
     isFocused: boolean;
-    icon: boolean;
+    isPanelOpen: boolean;
+    activeIndex: number;
+    private static uidSeq;
+    readonly listboxId: string;
     private selectedOption;
     private options$;
+    /** indica se o valor atual do internalControl foi digitado pelo usuário (e não escrito programaticamente) */
+    private isUserTyping;
     private el;
+    private cdr;
+    private renderer;
+    private overlay;
+    private viewContainerRef;
+    private scrollDispatcher;
+    private sub;
+    private overlayRef;
+    private portal;
     private onChange;
     private onTouched;
     ngOnInit(): void;
-    private setStyle;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private setupOverlay;
+    private closeOverlay;
+    private openOverlay;
+    private setStyle;
+    openPanel(): void;
+    closePanel(): void;
+    onDocumentClick(event: MouseEvent): void;
     onFocus(): void;
     onBlur(): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    private moveActiveIndex;
     selectItem(option: ICaoAutoCompleteOption): void;
-    onOptionSelected(event: MatAutocompleteSelectedEvent): void;
     selectOption(option: ICaoAutoCompleteOption): void;
-    closePanel(): void;
     clearSelection(): void;
     onLeadingIconClick(event: MouseEvent | Event): void;
     onTrailingIconClick(event: MouseEvent | Event): void;
     private filter;
+    /** Move a opção selecionada para o início da lista, mantendo a ordem das demais */
+    private moveSelectedToTop;
+    private writeDisplayValue;
+    /** Marca que o usuário está digitando manualmente no campo (ativa o filtro por texto) */
+    onUserInput(): void;
     displayFn(option: ICaoAutoCompleteOption): string;
+    isOptionSelected(option: ICaoAutoCompleteOption): boolean;
+    trackByOptionId(_: number, option: ICaoAutoCompleteOption): string | number;
+    optionId(option: ICaoAutoCompleteOption): string;
+    get activeOptionId(): string | null;
     get errorText(): string | null;
     get controlNameValue(): string;
     writeValue(value: ICaoAutoCompleteOption | string): void;
     registerOnChange(fn: (value: ICaoAutoCompleteOption | string | null) => void): void;
     registerOnTouched(fn: () => void): void;
-    setInputHeight(height: string): void;
+    setDisabledState?(isDisabled: boolean): void;
+    setInputHeight(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CaoAutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CaoAutocompleteComponent, "cao-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "control": { "alias": "control"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_leadingIcon": { "alias": "_leadingIcon"; "required": false; }; "_trailingIcon": { "alias": "_trailingIcon"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIConColor": { "alias": "optionIConColor"; "required": false; }; "isLucideOptionIcon": { "alias": "isLucideOptionIcon"; "required": false; }; "autocompleteBgColor": { "alias": "autocompleteBgColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; }, { "itemSelected": "itemSelected"; "blurEvent": "blurEvent"; "focusEvent": "focusEvent"; "leadingIconClick": "leadingIconClick"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoAutocompleteComponent, "cao-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "control": { "alias": "control"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_leadingIcon": { "alias": "_leadingIcon"; "required": false; }; "_trailingIcon": { "alias": "_trailingIcon"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIConColor": { "alias": "optionIConColor"; "required": false; }; "isLucideOptionIcon": { "alias": "isLucideOptionIcon"; "required": false; }; "autocompleteBgColor": { "alias": "autocompleteBgColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "inputHeigth": { "alias": "inputHeigth"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "checkIcon": { "alias": "checkIcon"; "required": false; }; "showCheckIcon": { "alias": "showCheckIcon"; "required": false; }; "isLucideCheckIcon": { "alias": "isLucideCheckIcon"; "required": false; }; }, { "itemSelected": "itemSelected"; "blurEvent": "blurEvent"; "focusEvent": "focusEvent"; "leadingIconClick": "leadingIconClick"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
 }
 
 interface ICaoDropDownOption {
@@ -403,6 +443,23 @@ declare class CaoBaseIcon {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseIcon, "cao-base-icon", never, { "imgSource": { "alias": "imgSource"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+interface ICaoImage {
+    src: string;
+    alt: string;
+}
+interface ICaoKPI {
+    title: string;
+    value: string;
+    textColor: string;
+    borderColor: string;
+    icon: ICaoImage;
+}
+declare class CaoKpi {
+    readonly kpiData: i0.InputSignal<ICaoKPI>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoKpi, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoKpi, "cao-kpi", never, { "kpiData": { "alias": "kpiData"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type ModalType = "validation" | "finger" | "facial" | "clinic" | "graph" | "restriction" | "default";
 interface IModal {
     status: boolean;
@@ -795,5 +852,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, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
-export type { AlertType, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoDropDownOption, 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, 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 };