ngx-opalbytes-components 1.19.0 → 1.21.0

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, Injectable } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, Injectable } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -75,6 +75,7 @@ class CaoBaseButtonComponent {
     iconColor;
     strokeWidthIcon = 1;
     minTextToTooltip = 20;
+    iconSize = 24;
     ngOnInit() {
         if (!this.dataCy) {
             this.dataCy = `btn-${this.buttonText.replace(/\s+/g, '-').toLowerCase()}`;
@@ -89,11 +90,11 @@ class CaoBaseButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon", minTextToTooltip: "minTextToTooltip" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon", minTextToTooltip: "minTextToTooltip", iconSize: "iconSize" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "cao-button", imports: [CommonModule, MatTooltipModule, LucideDynamicIcon], template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
+            args: [{ standalone: true, selector: "cao-button", imports: [CommonModule, MatTooltipModule, LucideDynamicIcon], template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [size]=\"iconSize\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" [style.width]=\"iconSize\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
         }], propDecorators: { buttonClick: [{
                 type: Output
             }], buttonText: [{
@@ -122,6 +123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], minTextToTooltip: [{
                 type: Input
+            }], iconSize: [{
+                type: Input
             }] } });
 
 class CaoBaseInput {
@@ -373,6 +376,7 @@ class CaoAutocompleteComponent {
     strokeWidthIcon = 1;
     isDisabled = false;
     inputHeigth = '50px';
+    iconSize = 24;
     checkIcon = '✓';
     showCheckIcon = true;
     isLucideCheckIcon = false;
@@ -768,13 +772,13 @@ class CaoAutocompleteComponent {
         this.renderer.setStyle(this.el.nativeElement, "--form-field-height", this.inputHeigth);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled", inputHeigth: "inputHeigth", checkIcon: "checkIcon", showCheckIcon: "showCheckIcon", isLucideCheckIcon: "isLucideCheckIcon" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled", inputHeigth: "inputHeigth", iconSize: "iconSize", checkIcon: "checkIcon", showCheckIcon: "showCheckIcon", isLucideCheckIcon: "isLucideCheckIcon" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CaoAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [style.width]=\"iconSize\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [style.width]=\"iconSize\"  [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
             type: Component,
@@ -790,7 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useExisting: forwardRef(() => CaoAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"] }]
+                    ], template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [style.width]=\"iconSize\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [style.width]=\"iconSize\"  [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [size]=\"iconSize\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -825,6 +829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], inputHeigth: [{
                 type: Input
+            }], iconSize: [{
+                type: Input
             }], checkIcon: [{
                 type: Input
             }], showCheckIcon: [{
@@ -1862,6 +1868,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }] } });
 
+class CaoKpi {
+    kpiData = input.required(...(ngDevMode ? [{ debugName: "kpiData" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoKpi, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoKpi, isStandalone: true, selector: "cao-kpi", inputs: { kpiData: { classPropertyName: "kpiData", publicName: "kpiData", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"flex flex-col py-2 pt-2.25 px-3.75 rounded-card border-b w-46.25 bg-(--color-white)\"\n  [style.border-color]=\"kpiData().borderColor\">\n  <div class=\"flex w-full justify-end\">\n    <img class=\"w-6 h-6 mr-2\" [src]=\"kpiData().icon.src\" [alt]=\"kpiData().icon.alt\" />\n  </div>\n  <div class=\"flex flex-col pl-1.5\">\n    <p class=\"text-2xl\" [style.color]=\"kpiData().textColor\">{{ kpiData().value }}</p>\n    <h3 class=\"text-base\" [style.color]=\"kpiData().textColor\">{{ kpiData().title }}</h3>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoKpi, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-kpi", imports: [CommonModule], standalone: true, template: "<div\n  class=\"flex flex-col py-2 pt-2.25 px-3.75 rounded-card border-b w-46.25 bg-(--color-white)\"\n  [style.border-color]=\"kpiData().borderColor\">\n  <div class=\"flex w-full justify-end\">\n    <img class=\"w-6 h-6 mr-2\" [src]=\"kpiData().icon.src\" [alt]=\"kpiData().icon.alt\" />\n  </div>\n  <div class=\"flex flex-col pl-1.5\">\n    <p class=\"text-2xl\" [style.color]=\"kpiData().textColor\">{{ kpiData().value }}</p>\n    <h3 class=\"text-base\" [style.color]=\"kpiData().textColor\">{{ kpiData().title }}</h3>\n  </div>\n</div>\n" }]
+        }], propDecorators: { kpiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "kpiData", required: true }] }] } });
+
 class BaseModalService {
     constructor() { }
     toggleModalEvent = new EventEmitter();
@@ -2987,5 +3003,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map