ngx-opalbytes-components 1.21.0 → 1.23.0

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,12 +1,12 @@
 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, input, 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, computed, Injectable } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
 import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import * as i2$1 from '@angular/material/datepicker';
 import { MatDatepickerModule, MatDateRangeInput } from '@angular/material/datepicker';
@@ -14,13 +14,13 @@ import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i1$4 from '@angular/cdk/overlay';
+import * as i1$5 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import * as i2$2 from '@angular/cdk/scrolling';
 import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
 import { BehaviorSubject, Subscription, combineLatest, startWith, map, Subject } from 'rxjs';
-import * as i4 from '@angular/material/icon';
+import * as i1$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -30,7 +30,7 @@ import { MatCardModule } from '@angular/material/card';
 import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i1$3 from '@angular/material/core';
+import * as i1$4 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
@@ -38,7 +38,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatListModule } from '@angular/material/list';
 import * as i5 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1$2 from '@angular/material/paginator';
+import * as i1$3 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -53,7 +53,7 @@ import { MatSortModule, MatSort } from '@angular/material/sort';
 import * as i8 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i4$1 from '@angular/material/timepicker';
+import * as i4 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
@@ -1125,7 +1125,7 @@ class CaoDropDownComponent {
                 useExisting: forwardRef(() => CaoDropDownComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"dropdown-container\"\n  role=\"combobox\"\n  [ngClass]=\"[\n    dropDownClass,\n    isDisabled ? 'disabled' : '',\n    control?.touched && control?.invalid ? 'invalid' : '',\n    (control?.touched && control?.valid && selectedItem && isFocused && !removeValidBorder) ? 'valid' : ''\n  ]\"\n  [ngStyle]=\"styleDropDown\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-controls]=\"isOpen ? ('dropdown-list-' + dataCy) : null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  [attr.aria-disabled]=\"isDisabled\"\n  [attr.aria-activedescendant]=\"activeDescendant\"\n  [attr.data-cy]=\"dataCy\">\n  \n  <div\n    class=\"dropdown-header\"\n    matTooltipPosition=\"below\"\n    matTooltipClass=\"custom-arrow-tooltip\"\n    tabindex=\"0\"\n    role=\"button\"\n    [matTooltip]=\"tooltip\"\n    [attr.aria-disabled]=\"isDisabled\"\n    (click)=\"!isDisabled && toggleDropdown()\"\n    (keydown.enter)=\"!isDisabled && toggleDropdown()\"\n    (keydown.space)=\"!isDisabled && toggleDropdown(); $event.preventDefault()\"\n    (keydown.arrowdown)=\"!isDisabled && onArrowDown($event)\"\n    (keydown.arrowup)=\"!isDisabled && onArrowUp($event)\"\n    (keydown.escape)=\"!isDisabled && closeDropdown()\">\n    <span id=\"dropdown-label-{{dataCy}}\">{{ selectedItem?.nome ?? textHeader }}</span>\n    <mat-icon aria-hidden=\"true\">{{ isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n  </div>\n\n  @if (isOpen) {\n  <ul \n    class=\"dropdown-list\" \n    role=\"listbox\"\n    [id]=\"'dropdown-list-' + dataCy\"\n    [ngClass]=\"{ 'drop-up': dropDirection === 'up', 'dropdown-secundary': dropDownClass === 'dropdown-secundary' }\"\n    [attr.aria-label]=\"listAriaLabel || 'Op\u00E7\u00F5es'\"\n    [attr.aria-labelledby]=\"'dropdown-label-' + dataCy\">\n    \n\n    <li class=\"dropdown-search\" role=\"none\">\n      <input \n        type=\"text\" \n        placeholder=\"Buscar por c\u00F3digo ou nome...\" \n        role=\"searchbox\"\n        aria-label=\"Buscar op\u00E7\u00F5es\"\n        [formControl]=\"searchControl\"\n        (keydown.arrowdown)=\"onArrowDown($event)\"\n        (keydown.arrowup)=\"onArrowUp($event)\"\n        (keydown.enter)=\"onSearchEnter($event)\"\n        (keydown.escape)=\"closeDropdown()\" />\n    </li>\n    \n\n    @for (item of filteredOptions; track $index) { \n      @if(item && item.nome) {\n      <li\n        class=\"dropdown-item\"\n        role=\"option\"\n        [ngClass]=\"{\n          'icon-right': item.iconPosition === 'right',\n          'selected': item === selectedItem,\n          'focused': $index === focusedIndex\n        }\"\n        [attr.id]=\"'option-' + dataCy + '-' + $index\"\n        [attr.aria-selected]=\"item === selectedItem\"\n        [attr.tabindex]=\"$index === focusedIndex ? 0 : -1\"\n        [attr.data-cy]=\"item.dataCy\"\n        (click)=\"selectItem(item)\"\n        (keydown.enter)=\"selectItem(item)\"\n        (keydown.space)=\"selectItem(item); $event.preventDefault()\"\n        (mouseenter)=\"focusedIndex = $index\">\n        @if (item.icon && item.iconPosition !== 'right') {\n        <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n        } \n        <span>{{ item.nome }}</span>\n        @if (item.icon && item.iconPosition === 'right') {\n        <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n        }\n      </li>\n      } \n    }\n  </ul>\n  }\n  \n  @if (control?.touched && control?.invalid && errorText) {\n    <div class=\"message-error\">{{ errorText }}</div>\n  }\n</div>", styles: [".dropdown-header:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-header:focus:not(:focus-visible){outline:none}.dropdown-search input:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-item:focus{outline:2px solid var(--primary);outline-offset:-2px}.dropdown-item.focused{background-color:var(--hover-drop-down);font-weight:700}.dropdown-container.disabled{opacity:.6}.dropdown-list::-webkit-scrollbar{width:8px}.dropdown-list::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#0000004d}@media screen and (max-width:768px){.dropdown-list{max-height:180px}.dropdown-list.drop-up{bottom:45px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div\n  class=\"dropdown-container\"\n  role=\"combobox\"\n  [ngClass]=\"[\n    dropDownClass,\n    isDisabled ? 'disabled' : '',\n    control?.touched && control?.invalid ? 'invalid' : '',\n    (control?.touched && control?.valid && selectedItem && isFocused && !removeValidBorder) ? 'valid' : ''\n  ]\"\n  [ngStyle]=\"styleDropDown\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-controls]=\"isOpen ? ('dropdown-list-' + dataCy) : null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  [attr.aria-disabled]=\"isDisabled\"\n  [attr.aria-activedescendant]=\"activeDescendant\"\n  [attr.data-cy]=\"dataCy\">\n  \n  <div\n    class=\"dropdown-header\"\n    matTooltipPosition=\"below\"\n    matTooltipClass=\"custom-arrow-tooltip\"\n    tabindex=\"0\"\n    role=\"button\"\n    [matTooltip]=\"tooltip\"\n    [attr.aria-disabled]=\"isDisabled\"\n    (click)=\"!isDisabled && toggleDropdown()\"\n    (keydown.enter)=\"!isDisabled && toggleDropdown()\"\n    (keydown.space)=\"!isDisabled && toggleDropdown(); $event.preventDefault()\"\n    (keydown.arrowdown)=\"!isDisabled && onArrowDown($event)\"\n    (keydown.arrowup)=\"!isDisabled && onArrowUp($event)\"\n    (keydown.escape)=\"!isDisabled && closeDropdown()\">\n    <span id=\"dropdown-label-{{dataCy}}\">{{ selectedItem?.nome ?? textHeader }}</span>\n    <mat-icon aria-hidden=\"true\">{{ isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n  </div>\n\n  @if (isOpen) {\n  <ul \n    class=\"dropdown-list\" \n    role=\"listbox\"\n    [id]=\"'dropdown-list-' + dataCy\"\n    [ngClass]=\"{ 'drop-up': dropDirection === 'up', 'dropdown-secundary': dropDownClass === 'dropdown-secundary' }\"\n    [attr.aria-label]=\"listAriaLabel || 'Op\u00E7\u00F5es'\"\n    [attr.aria-labelledby]=\"'dropdown-label-' + dataCy\">\n    \n\n    <li class=\"dropdown-search\" role=\"none\">\n      <input \n        type=\"text\" \n        placeholder=\"Buscar por c\u00F3digo ou nome...\" \n        role=\"searchbox\"\n        aria-label=\"Buscar op\u00E7\u00F5es\"\n        [formControl]=\"searchControl\"\n        (keydown.arrowdown)=\"onArrowDown($event)\"\n        (keydown.arrowup)=\"onArrowUp($event)\"\n        (keydown.enter)=\"onSearchEnter($event)\"\n        (keydown.escape)=\"closeDropdown()\" />\n    </li>\n    \n\n    @for (item of filteredOptions; track $index) { \n      @if(item && item.nome) {\n      <li\n        class=\"dropdown-item\"\n        role=\"option\"\n        [ngClass]=\"{\n          'icon-right': item.iconPosition === 'right',\n          'selected': item === selectedItem,\n          'focused': $index === focusedIndex\n        }\"\n        [attr.id]=\"'option-' + dataCy + '-' + $index\"\n        [attr.aria-selected]=\"item === selectedItem\"\n        [attr.tabindex]=\"$index === focusedIndex ? 0 : -1\"\n        [attr.data-cy]=\"item.dataCy\"\n        (click)=\"selectItem(item)\"\n        (keydown.enter)=\"selectItem(item)\"\n        (keydown.space)=\"selectItem(item); $event.preventDefault()\"\n        (mouseenter)=\"focusedIndex = $index\">\n        @if (item.icon && item.iconPosition !== 'right') {\n        <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n        } \n        <span>{{ item.nome }}</span>\n        @if (item.icon && item.iconPosition === 'right') {\n        <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n        }\n      </li>\n      } \n    }\n  </ul>\n  }\n  \n  @if (control?.touched && control?.invalid && errorText) {\n    <div class=\"message-error\">{{ errorText }}</div>\n  }\n</div>", styles: [".dropdown-header:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-header:focus:not(:focus-visible){outline:none}.dropdown-search input:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-item:focus{outline:2px solid var(--primary);outline-offset:-2px}.dropdown-item.focused{background-color:var(--hover-drop-down);font-weight:700}.dropdown-container.disabled{opacity:.6}.dropdown-list::-webkit-scrollbar{width:8px}.dropdown-list::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#0000004d}@media screen and (max-width:768px){.dropdown-list{max-height:180px}.dropdown-list.drop-up{bottom:45px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoDropDownComponent, decorators: [{
             type: Component,
@@ -1374,7 +1374,7 @@ class Paginator {
         this.pageEvent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Paginator, isStandalone: true, selector: "cao-paginator", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", customClass: "customClass", showFirstLastButtons: "showFirstLastButtons" }, outputs: { pageEvent: "pageEvent" }, ngImport: i0, template: "<mat-paginator\n  #paginator\n  aria-label=\"Select page\"\n  [length]=\"totalItems\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [pageIndex]=\"currentPage - 1\"\n  [hidePageSize]=\"false\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"onPageEvent($event)\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Paginator, isStandalone: true, selector: "cao-paginator", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", customClass: "customClass", showFirstLastButtons: "showFirstLastButtons" }, outputs: { pageEvent: "pageEvent" }, ngImport: i0, template: "<mat-paginator\n  #paginator\n  aria-label=\"Select page\"\n  [length]=\"totalItems\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [pageIndex]=\"currentPage - 1\"\n  [hidePageSize]=\"false\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"onPageEvent($event)\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Paginator, decorators: [{
             type: Component,
@@ -1461,13 +1461,13 @@ class TimePicker {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePicker, deps: [{ token: i1$3.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TimePicker, isStandalone: true, selector: "cao-time-picker", inputs: { control: "control", isDisabled: "isDisabled", dataCy: "dataCy", min: "min", max: "max" }, outputs: { timeChange: "timeChange" }, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\n  <mat-form-field\n    class=\"custom-timepicker\"\n    [ngClass]=\"{\n      'invalid': control?.touched && control?.invalid,\n      'valid': control?.touched && control?.valid\n    }\">\n    <input\n      matInput\n      placeholder=\"00:00\"\n      [formControl]=\"control\"\n      [matTimepicker]=\"picker\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [disabled]=\"isDisabled\"\n      [attr.data-cy]=\"dataCy\"\n      (blur)=\"control?.markAsTouched()\" />\n    <mat-timepicker-toggle matSuffix [for]=\"picker\" />\n    <mat-timepicker #picker [options]=\"customOptions\" (selected)=\"timeChange.emit($event.value)\" />\n  </mat-form-field>\n</div>\n", styles: [".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 #0000001a;transition:border-color .2s ease-in-out}.custom-timepicker.invalid .mat-mdc-text-field-wrapper{border-color:var(--error)}.custom-timepicker.valid.mat-focused .mat-mdc-text-field-wrapper{border-color:var(--success)}.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)}.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}.custom-timepicker.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$1.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$1.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePicker, deps: [{ token: i1$4.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TimePicker, isStandalone: true, selector: "cao-time-picker", inputs: { control: "control", isDisabled: "isDisabled", dataCy: "dataCy", min: "min", max: "max" }, outputs: { timeChange: "timeChange" }, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\n  <mat-form-field\n    class=\"custom-timepicker\"\n    [ngClass]=\"{\n      'invalid': control?.touched && control?.invalid,\n      'valid': control?.touched && control?.valid\n    }\">\n    <input\n      matInput\n      placeholder=\"00:00\"\n      [formControl]=\"control\"\n      [matTimepicker]=\"picker\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [disabled]=\"isDisabled\"\n      [attr.data-cy]=\"dataCy\"\n      (blur)=\"control?.markAsTouched()\" />\n    <mat-timepicker-toggle matSuffix [for]=\"picker\" />\n    <mat-timepicker #picker [options]=\"customOptions\" (selected)=\"timeChange.emit($event.value)\" />\n  </mat-form-field>\n</div>\n", styles: [".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 #0000001a;transition:border-color .2s ease-in-out}.custom-timepicker.invalid .mat-mdc-text-field-wrapper{border-color:var(--error)}.custom-timepicker.valid.mat-focused .mat-mdc-text-field-wrapper{border-color:var(--success)}.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)}.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}.custom-timepicker.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'cao-time-picker', imports: [MaterialModule, CommonModule, ReactiveFormsModule,], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"time-picker-wrapper\">\n  <mat-form-field\n    class=\"custom-timepicker\"\n    [ngClass]=\"{\n      'invalid': control?.touched && control?.invalid,\n      'valid': control?.touched && control?.valid\n    }\">\n    <input\n      matInput\n      placeholder=\"00:00\"\n      [formControl]=\"control\"\n      [matTimepicker]=\"picker\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [disabled]=\"isDisabled\"\n      [attr.data-cy]=\"dataCy\"\n      (blur)=\"control?.markAsTouched()\" />\n    <mat-timepicker-toggle matSuffix [for]=\"picker\" />\n    <mat-timepicker #picker [options]=\"customOptions\" (selected)=\"timeChange.emit($event.value)\" />\n  </mat-form-field>\n</div>\n", styles: [".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 #0000001a;transition:border-color .2s ease-in-out}.custom-timepicker.invalid .mat-mdc-text-field-wrapper{border-color:var(--error)}.custom-timepicker.valid.mat-focused .mat-mdc-text-field-wrapper{border-color:var(--success)}.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)}.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}.custom-timepicker.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{box-shadow:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.DateAdapter }], propDecorators: { control: [{
+        }], ctorParameters: () => [{ type: i1$4.DateAdapter }], propDecorators: { control: [{
                 type: Input
             }], isDisabled: [{
                 type: Input
@@ -1878,6 +1878,450 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             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 CaoSkeletonComponent {
+    borderRadius = input('14px', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    bgColor = input("#e2e8f0", ...(ngDevMode ? [{ debugName: "bgColor" }] : []));
+    shine = input("#f8fafc", ...(ngDevMode ? [{ debugName: "shine" }] : []));
+    variant = input('rect', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    speed = input('2s', ...(ngDevMode ? [{ debugName: "speed" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    animationDeg = input('90deg', ...(ngDevMode ? [{ debugName: "animationDeg" }] : []));
+    skeletonStyles = computed(() => {
+        const styles = {
+            '--skeleton-width': this.size() || this.width(),
+            '--skeleton-height': this.size() || this.height(),
+            '--skeleton-speed': this.speed(),
+            '--skeleton-animation-deg': this.animationDeg(),
+        };
+        if (this.bgColor()) {
+            styles['--skeleton-bg'] = this.bgColor();
+        }
+        if (this.shine()) {
+            styles['--skeleton-shine'] = this.shine();
+        }
+        if (this.variant() !== 'circle') {
+            styles['--skeleton-radius'] = this.borderRadius();
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "skeletonStyles" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoSkeletonComponent, isStandalone: true, selector: "cao-skeleton", inputs: { borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, shine: { classPropertyName: "shine", publicName: "shine", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animationDeg: { classPropertyName: "animationDeg", publicName: "animationDeg", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"cao-skeleton\" [ngClass]=\"'cao-skeleton--' + variant()\" [style]=\"skeletonStyles()\">\n  <span class=\"cao-skeleton__shimmer\"></span>\n</span>", styles: [":host{--skeleton-width: 100%;--skeleton-height: 100%;--skeleton-bg: #e2e8f0;--skeleton-shine: #f8fafc;--skeleton-radius: 14px;--skeleton-speed: 2s;--skeleton-animation-deg: 90deg;display:contents}.cao-skeleton{position:relative;display:block;overflow:hidden;width:var(--skeleton-width);height:var(--skeleton-height);background-color:var(--skeleton-bg);border-radius:var(--skeleton-radius);color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}@media(prefers-reduced-motion:no-preference){.cao-skeleton{will-change:transform}}.cao-skeleton--circle{--skeleton-radius: 50%;aspect-ratio:1 / 1}.cao-skeleton--text{--skeleton-radius: 4px;height:1em;width:var(--skeleton-width)}.cao-skeleton__shimmer{position:absolute;inset:0;background:linear-gradient(var(--skeleton-animation-deg),transparent 30%,var(--skeleton-shine) 50%,transparent 70%);background-size:200% 100%}@media(prefers-reduced-motion:no-preference){.cao-skeleton__shimmer{animation:skeleton-shimmer var(--skeleton-speed) ease-in-out infinite}}@keyframes skeleton-shimmer{0%{background-position:200% center}to{background-position:-200% center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-skeleton', imports: [CommonModule], template: "<span class=\"cao-skeleton\" [ngClass]=\"'cao-skeleton--' + variant()\" [style]=\"skeletonStyles()\">\n  <span class=\"cao-skeleton__shimmer\"></span>\n</span>", styles: [":host{--skeleton-width: 100%;--skeleton-height: 100%;--skeleton-bg: #e2e8f0;--skeleton-shine: #f8fafc;--skeleton-radius: 14px;--skeleton-speed: 2s;--skeleton-animation-deg: 90deg;display:contents}.cao-skeleton{position:relative;display:block;overflow:hidden;width:var(--skeleton-width);height:var(--skeleton-height);background-color:var(--skeleton-bg);border-radius:var(--skeleton-radius);color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}@media(prefers-reduced-motion:no-preference){.cao-skeleton{will-change:transform}}.cao-skeleton--circle{--skeleton-radius: 50%;aspect-ratio:1 / 1}.cao-skeleton--text{--skeleton-radius: 4px;height:1em;width:var(--skeleton-width)}.cao-skeleton__shimmer{position:absolute;inset:0;background:linear-gradient(var(--skeleton-animation-deg),transparent 30%,var(--skeleton-shine) 50%,transparent 70%);background-size:200% 100%}@media(prefers-reduced-motion:no-preference){.cao-skeleton__shimmer{animation:skeleton-shimmer var(--skeleton-speed) ease-in-out infinite}}@keyframes skeleton-shimmer{0%{background-position:200% center}to{background-position:-200% center}}\n"] }]
+        }], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], shine: [{ type: i0.Input, args: [{ isSignal: true, alias: "shine", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animationDeg: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDeg", required: false }] }] } });
+
+class CaoFormField extends CaoBaseIcon {
+    inputBackground = input(...(ngDevMode ? [undefined, { debugName: "inputBackground" }] : []));
+    borderColor = input(...(ngDevMode ? [undefined, { debugName: "borderColor" }] : []));
+    borderWidth = input(...(ngDevMode ? [undefined, { debugName: "borderWidth" }] : []));
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : []));
+    errorColor = input(...(ngDevMode ? [undefined, { debugName: "errorColor" }] : []));
+    labelColor = input(...(ngDevMode ? [undefined, { debugName: "labelColor" }] : []));
+    hintColor = input(...(ngDevMode ? [undefined, { debugName: "hintColor" }] : []));
+    textColor = input(...(ngDevMode ? [undefined, { debugName: "textColor" }] : []));
+    focusBorderColor = input(...(ngDevMode ? [undefined, { debugName: "focusBorderColor" }] : []));
+    successBorderColor = input(...(ngDevMode ? [undefined, { debugName: "successBorderColor" }] : []));
+    formFieldStyles = computed(() => {
+        const styles = {};
+        if (this.inputBackground()) {
+            styles['--cao-form-field-bg-background'] = this.inputBackground();
+        }
+        if (this.borderColor()) {
+            styles['--cao-form-field-border-color'] = this.borderColor();
+        }
+        if (this.borderWidth()) {
+            styles['--cao-form-field-border-width'] = this.borderWidth();
+        }
+        if (this.borderRadius()) {
+            styles['--cao-form-field-border-radius'] = this.borderRadius();
+        }
+        if (this.errorColor()) {
+            styles['--cao-form-field-color-error'] = this.errorColor();
+        }
+        if (this.labelColor()) {
+            styles['--cao-form-field-color-label'] = this.labelColor();
+        }
+        if (this.hintColor()) {
+            styles['--cao-form-field-color-hint'] = this.hintColor();
+        }
+        if (this.textColor()) {
+            styles['--cao-form-field-color-text'] = this.textColor();
+        }
+        if (this.focusBorderColor()) {
+            styles['--cao-form-field-focus-border'] = this.focusBorderColor();
+        }
+        if (this.successBorderColor()) {
+            styles['--cao-form-field-success-border'] = this.successBorderColor();
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "formFieldStyles" }] : []));
+    label = '';
+    labelInside = false;
+    hintLabel = '';
+    control = null;
+    forId = '';
+    errorStateMatcher;
+    leadingIcon;
+    trailingIcon;
+    _isSubmitted = false;
+    _focused = false;
+    get id() {
+        return this.forId;
+    }
+    get disabled() {
+        return !!this.control?.disabled;
+    }
+    get required() {
+        if (!this.control) {
+            return false;
+        }
+        const hasValidator = typeof this.control.hasValidator === 'function'
+            ? this.control.hasValidator(Validators.required)
+            : false;
+        return hasValidator;
+    }
+    get floating() {
+        return this._focused || !!this.control?.value;
+    }
+    get errorStateActive() {
+        const control = this.control;
+        if (!control) {
+            return false;
+        }
+        const matcher = this.errorStateMatcher;
+        return matcher
+            ? matcher.isErrorState(control, this)
+            : !!(control.invalid && (control.touched || control.dirty || this._isSubmitted));
+    }
+    onFocusIn() {
+        this._focused = true;
+        if (this.control && !this._isSubmitted) {
+            this.control.markAsTouched();
+        }
+    }
+    onFocusOut() {
+        this._focused = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoFormField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoFormField, isStandalone: true, selector: "cao-form-field", inputs: { inputBackground: { classPropertyName: "inputBackground", publicName: "inputBackground", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, errorColor: { classPropertyName: "errorColor", publicName: "errorColor", isSignal: true, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, hintColor: { classPropertyName: "hintColor", publicName: "hintColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, focusBorderColor: { classPropertyName: "focusBorderColor", publicName: "focusBorderColor", isSignal: true, isRequired: false, transformFunction: null }, successBorderColor: { classPropertyName: "successBorderColor", publicName: "successBorderColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, labelInside: { classPropertyName: "labelInside", publicName: "labelInside", isSignal: false, isRequired: false, transformFunction: null }, hintLabel: { classPropertyName: "hintLabel", publicName: "hintLabel", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, forId: { classPropertyName: "forId", publicName: "forId", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: false, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"cao-form-field\"\n  [class.label-inside]=\"labelInside\"\n  [class.error-state]=\"errorStateActive\"\n  [class.disabled]=\"disabled\"\n  [class.required]=\"required\"\n  [style]=\"formFieldStyles()\">\n  @if (label && !labelInside) {\n    <label class=\"cao-form-field__label\" [for]=\"forId\">{{ label }}</label>\n  }\n  <div class=\"input-field\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\n    @if (leadingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\"\n        [imgSource]=\"leadingIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\" />\n    }\n    <div class=\"input-slot\">\n      @if (label && labelInside) {\n        <label\n          class=\"cao-form-field__label cao-form-field__label--float\"\n          [class.cao-form-field__label--floated]=\"floating\"\n          [for]=\"forId\">{{ label }}</label>\n      }\n      <ng-content select=\"[caoInput]\" />\n      <ng-content select=\"cao-input\" />\n      <ng-content select=\"input\" />\n      <ng-content select=\"select\" />\n      <ng-content select=\"textarea\" />\n      <ng-content select=\"h2\" />\n      <ng-content />\n    </div>\n    @if (trailingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\"\n        [imgSource]=\"trailingIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\" />\n    }\n  </div>\n  <div class=\"subscript-wrapper\">\n    @if (hintLabel) {\n      <small class=\"cao-form-field__hint\">{{ hintLabel }}</small>\n    }\n    <ng-content select=\"cao-hint\" />\n    <ng-content select=\"cao-error\" />\n  </div>\n</div>", styles: [":host{--cao-form-field-bg-background: var(--input-background, #ffffff);--cao-form-field-border-color: var(--line-color, #e5e7eb);--cao-form-field-border-width: 1px;--cao-form-field-border-radius: 8px;--cao-form-field-color-error: var(--error, #dc2626);--cao-form-field-color-label: var(--primary, #111827);--cao-form-field-color-hint: var(--input-text, #9ca3af);--cao-form-field-color-text: var(--text-color-input, #111827);--cao-form-field-focus-border: var(--primary, #111827);--cao-form-field-success-border: var(--success, #16a34a);display:block;width:100%}.cao-form-field{display:flex;flex-direction:column;gap:4px;width:100%;font-family:inherit}.cao-form-field__label{display:block;font-size:.75rem;font-weight:700;line-height:1.25rem;color:var(--cao-form-field-color-label);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}.cao-form-field__label--float{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-weight:500;text-transform:none;letter-spacing:0;color:var(--cao-form-field-color-hint);pointer-events:none;transition:transform .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.cao-form-field__label--floated{transform:translateY(calc(-50% - 14px)) scale(.75);transform-origin:left top;color:var(--cao-form-field-color-label);font-weight:700}.input-field{position:relative;display:flex;align-items:center;width:100%;min-height:44px;background-color:var(--cao-form-field-bg-background);border:var(--cao-form-field-border-width) solid var(--cao-form-field-border-color);border-radius:var(--cao-form-field-border-radius);transition:border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}.input-field:focus-within{border-color:var(--cao-form-field-focus-border)}.cao-form-field.error-state .input-field{border-color:var(--cao-form-field-color-error)}.cao-form-field.disabled .input-field{opacity:.7}.input-slot{position:relative;flex:1;display:flex;align-items:center;width:100%;height:100%}.input-slot ::ng-deep input,.input-slot ::ng-deep textarea,.input-slot ::ng-deep select{width:100%;min-height:40px;border:none;outline:none;background:transparent;color:var(--cao-form-field-color-text);font-family:inherit;font-size:.875rem;padding:6px 12px;box-sizing:border-box}.input-slot ::ng-deep cao-input,.input-slot ::ng-deep .cao-input{width:100%}.input-slot ::ng-deep cao-input .input-component,.input-slot ::ng-deep cao-input .input-wrapper{width:100%;background:transparent}.input-slot ::ng-deep cao-input input,.input-slot ::ng-deep cao-input textarea{background:transparent;border:none;color:var(--cao-form-field-color-text)}.label-inside .input-slot ::ng-deep input,.label-inside .input-slot ::ng-deep textarea,.label-inside .input-slot ::ng-deep select{padding-top:16px;padding-bottom:8px}.subscript-wrapper{display:flex;flex-direction:column;gap:2px}.cao-form-field__hint{font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint)}.cao-form-field__hint+.subscript-wrapper{margin-top:0}.cao-form-field.required .cao-form-field__label:after{content:\" *\";color:var(--cao-form-field-color-error)}\n"], dependencies: [{ kind: "component", type: CaoBaseIcon, selector: "cao-base-icon", inputs: ["imgSource", "isLucideIcon", "strokeWidthIcon", "iconColor", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-form-field', imports: [CaoBaseIcon], template: "<div\n  class=\"cao-form-field\"\n  [class.label-inside]=\"labelInside\"\n  [class.error-state]=\"errorStateActive\"\n  [class.disabled]=\"disabled\"\n  [class.required]=\"required\"\n  [style]=\"formFieldStyles()\">\n  @if (label && !labelInside) {\n    <label class=\"cao-form-field__label\" [for]=\"forId\">{{ label }}</label>\n  }\n  <div class=\"input-field\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\n    @if (leadingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\"\n        [imgSource]=\"leadingIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\" />\n    }\n    <div class=\"input-slot\">\n      @if (label && labelInside) {\n        <label\n          class=\"cao-form-field__label cao-form-field__label--float\"\n          [class.cao-form-field__label--floated]=\"floating\"\n          [for]=\"forId\">{{ label }}</label>\n      }\n      <ng-content select=\"[caoInput]\" />\n      <ng-content select=\"cao-input\" />\n      <ng-content select=\"input\" />\n      <ng-content select=\"select\" />\n      <ng-content select=\"textarea\" />\n      <ng-content select=\"h2\" />\n      <ng-content />\n    </div>\n    @if (trailingIcon) {\n      <cao-base-icon\n        [isLucideIcon]=\"isLucideIcon\"\n        [iconColor]=\"iconColor\"\n        [size]=\"size\"\n        [imgSource]=\"trailingIcon\"\n        [strokeWidthIcon]=\"strokeWidthIcon\" />\n    }\n  </div>\n  <div class=\"subscript-wrapper\">\n    @if (hintLabel) {\n      <small class=\"cao-form-field__hint\">{{ hintLabel }}</small>\n    }\n    <ng-content select=\"cao-hint\" />\n    <ng-content select=\"cao-error\" />\n  </div>\n</div>", styles: [":host{--cao-form-field-bg-background: var(--input-background, #ffffff);--cao-form-field-border-color: var(--line-color, #e5e7eb);--cao-form-field-border-width: 1px;--cao-form-field-border-radius: 8px;--cao-form-field-color-error: var(--error, #dc2626);--cao-form-field-color-label: var(--primary, #111827);--cao-form-field-color-hint: var(--input-text, #9ca3af);--cao-form-field-color-text: var(--text-color-input, #111827);--cao-form-field-focus-border: var(--primary, #111827);--cao-form-field-success-border: var(--success, #16a34a);display:block;width:100%}.cao-form-field{display:flex;flex-direction:column;gap:4px;width:100%;font-family:inherit}.cao-form-field__label{display:block;font-size:.75rem;font-weight:700;line-height:1.25rem;color:var(--cao-form-field-color-label);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}.cao-form-field__label--float{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-weight:500;text-transform:none;letter-spacing:0;color:var(--cao-form-field-color-hint);pointer-events:none;transition:transform .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.cao-form-field__label--floated{transform:translateY(calc(-50% - 14px)) scale(.75);transform-origin:left top;color:var(--cao-form-field-color-label);font-weight:700}.input-field{position:relative;display:flex;align-items:center;width:100%;min-height:44px;background-color:var(--cao-form-field-bg-background);border:var(--cao-form-field-border-width) solid var(--cao-form-field-border-color);border-radius:var(--cao-form-field-border-radius);transition:border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}.input-field:focus-within{border-color:var(--cao-form-field-focus-border)}.cao-form-field.error-state .input-field{border-color:var(--cao-form-field-color-error)}.cao-form-field.disabled .input-field{opacity:.7}.input-slot{position:relative;flex:1;display:flex;align-items:center;width:100%;height:100%}.input-slot ::ng-deep input,.input-slot ::ng-deep textarea,.input-slot ::ng-deep select{width:100%;min-height:40px;border:none;outline:none;background:transparent;color:var(--cao-form-field-color-text);font-family:inherit;font-size:.875rem;padding:6px 12px;box-sizing:border-box}.input-slot ::ng-deep cao-input,.input-slot ::ng-deep .cao-input{width:100%}.input-slot ::ng-deep cao-input .input-component,.input-slot ::ng-deep cao-input .input-wrapper{width:100%;background:transparent}.input-slot ::ng-deep cao-input input,.input-slot ::ng-deep cao-input textarea{background:transparent;border:none;color:var(--cao-form-field-color-text)}.label-inside .input-slot ::ng-deep input,.label-inside .input-slot ::ng-deep textarea,.label-inside .input-slot ::ng-deep select{padding-top:16px;padding-bottom:8px}.subscript-wrapper{display:flex;flex-direction:column;gap:2px}.cao-form-field__hint{font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint)}.cao-form-field__hint+.subscript-wrapper{margin-top:0}.cao-form-field.required .cao-form-field__label:after{content:\" *\";color:var(--cao-form-field-color-error)}\n"] }]
+        }], propDecorators: { inputBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputBackground", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], errorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorColor", required: false }] }], labelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColor", required: false }] }], hintColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], focusBorderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusBorderColor", required: false }] }], successBorderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "successBorderColor", required: false }] }], label: [{
+                type: Input
+            }], labelInside: [{
+                type: Input
+            }], hintLabel: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], forId: [{
+                type: Input
+            }], errorStateMatcher: [{
+                type: Input
+            }], leadingIcon: [{
+                type: Input
+            }], trailingIcon: [{
+                type: Input
+            }] } });
+
+class ErrorStateMatcher {
+    isErrorState(control, formFieldControl) {
+        if (!control) {
+            return false;
+        }
+        const isSubmitted = formFieldControl && formFieldControl._isSubmitted;
+        return !!(control.invalid &&
+            (control.touched || control.dirty || isSubmitted));
+    }
+}
+class ShowOnDirtyErrorStateMatcher {
+    isErrorState(control, formFieldControl) {
+        if (!control) {
+            return false;
+        }
+        const isSubmitted = formFieldControl && formFieldControl._isSubmitted;
+        return !!(control.invalid && (control.dirty || isSubmitted));
+    }
+}
+const DEFAULT_ERROR_STATE_MATCHER = new ErrorStateMatcher();
+
+class CaoHint {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoHint, isStandalone: true, selector: "cao-hint", ngImport: i0, template: "<span class=\"cao-hint\"><ng-content /></span>\n", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint, var(--input-text, #9ca3af))}.cao-hint{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoHint, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-hint', imports: [], template: "<span class=\"cao-hint\"><ng-content /></span>\n", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-hint, var(--input-text, #9ca3af))}.cao-hint{display:block}\n"] }]
+        }] });
+
+class CaoError {
+    errorStateMatcher;
+    formField = inject(CaoFormField, { optional: true });
+    get control() {
+        return this.formField?.control ?? null;
+    }
+    get hasErrorState() {
+        const control = this.control;
+        if (!control) {
+            return false;
+        }
+        const matcher = this.errorStateMatcher ?? this.formField?.errorStateMatcher;
+        return matcher
+            ? matcher.isErrorState(control, this.formField)
+            : !!(control.invalid && (control.touched || control.dirty));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoError, isStandalone: true, selector: "cao-error", inputs: { errorStateMatcher: "errorStateMatcher" }, ngImport: i0, template: "@if (hasErrorState) {\n  <div class=\"cao-error\" role=\"alert\">\n    <ng-content />\n  </div>\n}", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-error, var(--error, #dc2626))}.cao-error{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoError, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-error', imports: [], template: "@if (hasErrorState) {\n  <div class=\"cao-error\" role=\"alert\">\n    <ng-content />\n  </div>\n}", styles: [":host{display:block;font-size:.75rem;line-height:1.25rem;color:var(--cao-form-field-color-error, var(--error, #dc2626))}.cao-error{display:block}\n"] }]
+        }], propDecorators: { errorStateMatcher: [{
+                type: Input
+            }] } });
+
+class CaoCardComponent {
+    variant = "horizontal";
+    title;
+    subtitle;
+    detail;
+    detailColor;
+    icon;
+    avatar;
+    meta;
+    badge;
+    selected = false;
+    clickable = false;
+    bgColor = "bg-white";
+    borderColor = "border-gray-200";
+    cardClick = new EventEmitter();
+    get avatarBg() {
+        return this.avatar?.color ?? "bg-orange-400";
+    }
+    handleClick() {
+        if (this.clickable) {
+            this.cardClick.emit();
+        }
+    }
+    handleKeydown(event) {
+        if (this.clickable && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            this.cardClick.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoCardComponent, isStandalone: true, selector: "cao-card", inputs: { variant: "variant", title: "title", subtitle: "subtitle", detail: "detail", detailColor: "detailColor", icon: "icon", avatar: "avatar", meta: "meta", badge: "badge", selected: "selected", clickable: "clickable", bgColor: "bgColor", borderColor: "borderColor" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "@switch (variant) {\n  @case ('horizontal') {\n    <div\n      class=\"card card-horizontal\"\n      [class.card-clickable]=\"clickable\"\n      [class.card-hover-shadow]=\"clickable\"\n      [class.card-selected]=\"selected\"\n      [ngClass]=\"[bgColor, borderColor]\"\n      [attr.role]=\"clickable ? 'button' : null\"\n      [attr.tabindex]=\"clickable ? 0 : null\"\n      (click)=\"handleClick()\"\n      (keydown)=\"handleKeydown($event)\">\n      \n      @if (avatar) {\n        <div class=\"card-avatar-container\" [ngClass]=\"avatarBg\">\n          @if (avatar.src) {\n            <img \n              class=\"card-avatar-img\" \n              [src]=\"avatar.src\" \n              [alt]=\"title\" />\n          } @else { \n            {{ avatar.initials }} \n          }\n        </div>\n      } @else if (icon) {\n        <div class=\"card-icon-container\">\n          <img \n            class=\"card-icon-img\" \n            [src]=\"icon\" \n            [alt]=\"title\" />\n        </div>\n      }\n\n      <div class=\"card-content\">\n        @if (title) {\n          <span class=\"card-title\">{{ title }}</span>\n        }\n        @if (subtitle) {\n          <span class=\"card-subtitle\">{{ subtitle }}</span>\n        }\n        @if (detail) {\n          <span class=\"card-detail\" [ngClass]=\"detailColor ?? ''\">\n            {{ detail }}\n          </span>\n        }\n        <ng-content />\n      </div>\n\n      @if (badge || (meta && meta.length)) {\n        <div class=\"card-badge-wrapper\">\n          @if (badge) {\n            <div \n              class=\"card-badge\"\n              [ngClass]=\"[badge.color ?? '', badge.borderColor ?? '']\"\n              [style.background-color]=\"badge.bg\">\n              {{ badge.label }}\n            </div>\n          }\n          @if (meta && meta.length) {\n            <div class=\"card-meta-list\">\n              @for (m of meta; track m.label) {\n                <div class=\"card-meta-item\">\n                  <img \n                    class=\"card-meta-icon\" \n                    [src]=\"m.icon\" \n                    [alt]=\"m.label\" />\n                  <span>{{ m.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @case ('square') {\n    <div\n      class=\"card card-square\"\n      [class.card-clickable]=\"clickable\"\n      [class.card-hover-bg]=\"clickable\"\n      [class.card-hover-bold]=\"clickable\"\n      [class.card-selected]=\"selected\"\n      [class.card-selected-border-2]=\"selected\"\n      [attr.role]=\"clickable ? 'button' : null\"\n      [attr.tabindex]=\"clickable ? 0 : null\"\n      [matTooltip]=\"title\"\n      (click)=\"handleClick()\"\n      (keydown)=\"handleKeydown($event)\">\n      \n      <div class=\"card-square-content\">\n        <span class=\"card-square-title\">{{ title }}</span>\n        \n        @if (icon) {\n          <img \n            class=\"card-square-icon\" \n            [src]=\"icon\" \n            [alt]=\"title\" />\n        }\n      </div>\n    </div>\n  }\n}", styles: [":host{--radius-card: .5rem;--color-bg-main: #ffffff;--color-bg-gray: #f3f4f6;--color-border-gray: #d1d5db;--color-border-orange: #fb923c;--color-text-gray-400: #9ca3af;--color-text-gray-500: #6b7280;--color-text-gray-600: #4b5563;--color-text-gray-700: #374151;--color-text-gray-900: #111827;--color-white: #ffffff}.card{display:flex;position:relative;width:100%;height:100%;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.card-horizontal{border:1px solid var(--color-border-gray);border-radius:var(--radius-card);padding:1rem 1.25rem;align-items:center;gap:1rem}.card-square{background-color:var(--color-bg-main);border-radius:var(--radius-card);padding:1rem 5rem;flex-direction:column;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.card-clickable{cursor:pointer}.card-hover-shadow:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.card-hover-bg:hover{background-color:var(--color-bg-gray)}.card-hover-bold:hover{font-weight:700}.card-selected{border-color:var(--color-border-orange)}.card-selected-border-2{border-width:2px}.card-avatar-container{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-white);font-size:1.25rem;font-weight:700}.card-avatar-img{width:100%;height:100%;border-radius:9999px;object-fit:cover}.card-icon-container{width:3rem;height:3rem;border-radius:9999px;background-color:#e5e7eb;display:flex;align-items:center;justify-content:center;flex-shrink:0}.card-icon-img{width:1.5rem;height:1.5rem;opacity:.6}.card-content{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;gap:.125rem;height:100%}.card-title{font-size:.875rem;font-weight:600;color:var(--color-text-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-subtitle{font-size:.875rem;color:var(--color-text-gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-detail{font-size:.875rem;font-weight:500;color:var(--color-text-gray-700)}.card-badge-wrapper{display:flex;flex-direction:column;align-items:flex-end;gap:2rem;flex-shrink:0}.card-badge{padding:.5rem .75rem;border-radius:9999px;border:1px solid var(--color-border-gray);font-size:.875rem;font-weight:500;color:var(--color-text-gray-600)}.card-meta-list{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}.card-meta-item{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:var(--color-text-gray-400)}.card-meta-icon{width:1rem;height:1rem;opacity:.6}.card-square-content{width:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.card-square-title{font-size:1rem;color:var(--color-text-gray-900);text-align:center}.card-square-icon{width:3rem;height:3rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-center{text-align:center}@media(max-width:640px){.card-horizontal{padding:.75rem 1rem;gap:.75rem}.card-square{padding:1rem 2rem}.card-square-content{width:80%}.card-badge-wrapper{gap:1rem}.card-meta-list{gap:.75rem}}@media(max-width:480px){.card-horizontal{flex-wrap:wrap;justify-content:center;text-align:center}.card-content,.card-badge-wrapper{width:100%;align-items:center}.card-meta-list{justify-content:center}.card-square{padding:1rem}.card-square-content{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-card", imports: [CommonModule, MatTooltip], template: "@switch (variant) {\n  @case ('horizontal') {\n    <div\n      class=\"card card-horizontal\"\n      [class.card-clickable]=\"clickable\"\n      [class.card-hover-shadow]=\"clickable\"\n      [class.card-selected]=\"selected\"\n      [ngClass]=\"[bgColor, borderColor]\"\n      [attr.role]=\"clickable ? 'button' : null\"\n      [attr.tabindex]=\"clickable ? 0 : null\"\n      (click)=\"handleClick()\"\n      (keydown)=\"handleKeydown($event)\">\n      \n      @if (avatar) {\n        <div class=\"card-avatar-container\" [ngClass]=\"avatarBg\">\n          @if (avatar.src) {\n            <img \n              class=\"card-avatar-img\" \n              [src]=\"avatar.src\" \n              [alt]=\"title\" />\n          } @else { \n            {{ avatar.initials }} \n          }\n        </div>\n      } @else if (icon) {\n        <div class=\"card-icon-container\">\n          <img \n            class=\"card-icon-img\" \n            [src]=\"icon\" \n            [alt]=\"title\" />\n        </div>\n      }\n\n      <div class=\"card-content\">\n        @if (title) {\n          <span class=\"card-title\">{{ title }}</span>\n        }\n        @if (subtitle) {\n          <span class=\"card-subtitle\">{{ subtitle }}</span>\n        }\n        @if (detail) {\n          <span class=\"card-detail\" [ngClass]=\"detailColor ?? ''\">\n            {{ detail }}\n          </span>\n        }\n        <ng-content />\n      </div>\n\n      @if (badge || (meta && meta.length)) {\n        <div class=\"card-badge-wrapper\">\n          @if (badge) {\n            <div \n              class=\"card-badge\"\n              [ngClass]=\"[badge.color ?? '', badge.borderColor ?? '']\"\n              [style.background-color]=\"badge.bg\">\n              {{ badge.label }}\n            </div>\n          }\n          @if (meta && meta.length) {\n            <div class=\"card-meta-list\">\n              @for (m of meta; track m.label) {\n                <div class=\"card-meta-item\">\n                  <img \n                    class=\"card-meta-icon\" \n                    [src]=\"m.icon\" \n                    [alt]=\"m.label\" />\n                  <span>{{ m.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @case ('square') {\n    <div\n      class=\"card card-square\"\n      [class.card-clickable]=\"clickable\"\n      [class.card-hover-bg]=\"clickable\"\n      [class.card-hover-bold]=\"clickable\"\n      [class.card-selected]=\"selected\"\n      [class.card-selected-border-2]=\"selected\"\n      [attr.role]=\"clickable ? 'button' : null\"\n      [attr.tabindex]=\"clickable ? 0 : null\"\n      [matTooltip]=\"title\"\n      (click)=\"handleClick()\"\n      (keydown)=\"handleKeydown($event)\">\n      \n      <div class=\"card-square-content\">\n        <span class=\"card-square-title\">{{ title }}</span>\n        \n        @if (icon) {\n          <img \n            class=\"card-square-icon\" \n            [src]=\"icon\" \n            [alt]=\"title\" />\n        }\n      </div>\n    </div>\n  }\n}", styles: [":host{--radius-card: .5rem;--color-bg-main: #ffffff;--color-bg-gray: #f3f4f6;--color-border-gray: #d1d5db;--color-border-orange: #fb923c;--color-text-gray-400: #9ca3af;--color-text-gray-500: #6b7280;--color-text-gray-600: #4b5563;--color-text-gray-700: #374151;--color-text-gray-900: #111827;--color-white: #ffffff}.card{display:flex;position:relative;width:100%;height:100%;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.card-horizontal{border:1px solid var(--color-border-gray);border-radius:var(--radius-card);padding:1rem 1.25rem;align-items:center;gap:1rem}.card-square{background-color:var(--color-bg-main);border-radius:var(--radius-card);padding:1rem 5rem;flex-direction:column;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.card-clickable{cursor:pointer}.card-hover-shadow:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.card-hover-bg:hover{background-color:var(--color-bg-gray)}.card-hover-bold:hover{font-weight:700}.card-selected{border-color:var(--color-border-orange)}.card-selected-border-2{border-width:2px}.card-avatar-container{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-white);font-size:1.25rem;font-weight:700}.card-avatar-img{width:100%;height:100%;border-radius:9999px;object-fit:cover}.card-icon-container{width:3rem;height:3rem;border-radius:9999px;background-color:#e5e7eb;display:flex;align-items:center;justify-content:center;flex-shrink:0}.card-icon-img{width:1.5rem;height:1.5rem;opacity:.6}.card-content{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;gap:.125rem;height:100%}.card-title{font-size:.875rem;font-weight:600;color:var(--color-text-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-subtitle{font-size:.875rem;color:var(--color-text-gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-detail{font-size:.875rem;font-weight:500;color:var(--color-text-gray-700)}.card-badge-wrapper{display:flex;flex-direction:column;align-items:flex-end;gap:2rem;flex-shrink:0}.card-badge{padding:.5rem .75rem;border-radius:9999px;border:1px solid var(--color-border-gray);font-size:.875rem;font-weight:500;color:var(--color-text-gray-600)}.card-meta-list{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}.card-meta-item{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:var(--color-text-gray-400)}.card-meta-icon{width:1rem;height:1rem;opacity:.6}.card-square-content{width:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.card-square-title{font-size:1rem;color:var(--color-text-gray-900);text-align:center}.card-square-icon{width:3rem;height:3rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-center{text-align:center}@media(max-width:640px){.card-horizontal{padding:.75rem 1rem;gap:.75rem}.card-square{padding:1rem 2rem}.card-square-content{width:80%}.card-badge-wrapper{gap:1rem}.card-meta-list{gap:.75rem}}@media(max-width:480px){.card-horizontal{flex-wrap:wrap;justify-content:center;text-align:center}.card-content,.card-badge-wrapper{width:100%;align-items:center}.card-meta-list{justify-content:center}.card-square{padding:1rem}.card-square-content{width:100%}}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], detail: [{
+                type: Input
+            }], detailColor: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], avatar: [{
+                type: Input
+            }], meta: [{
+                type: Input
+            }], badge: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], cardClick: [{
+                type: Output
+            }] } });
+
+class CaoBaseToggleComponent {
+    type = "text";
+    placeholder = "";
+    inputClass = "";
+    value = "";
+    errorMessage = "";
+    isDisabled = false;
+    maxLength;
+    searchMode = false;
+    showBorder = false;
+    isLucideIcon = false;
+    iconColor = "";
+    mask;
+    control;
+    tooltip = "";
+    dataCy = "";
+    textareaRows = "";
+    decimalMarker = ",";
+    thousandSeparator = ".";
+    allowNegativeNumbers = false;
+    separatorLimit = "";
+    set leadingIcon(value) {
+        this._leadingIcon = value;
+        this.icon = true;
+    }
+    set trailingIcon(value) {
+        this._trailingIcon = value;
+        this.icon = true;
+    }
+    valueChange = new EventEmitter();
+    searchClick = new EventEmitter();
+    inputChange = new EventEmitter();
+    isFocused = false;
+    icon = false;
+    _leadingIcon;
+    _trailingIcon;
+    onChange = () => { };
+    onTouched = () => { };
+    get hasError() {
+        return !!this.errorMessage;
+    }
+    controlName = "";
+    get controlNameValue() {
+        return this.controlName;
+    }
+    onInput(event) {
+        const newValue = event.target.value;
+        this.value = newValue;
+        this.onChange(newValue);
+        this.valueChange.emit(newValue);
+    }
+    onInputChange(event) {
+        const newValue = event.target.value;
+        this.value = newValue;
+        this.inputChange.emit(newValue);
+    }
+    onFocus() {
+        this.isFocused = true;
+        this.onTouched();
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+        if (this.control?.touched && this.control?.valid && this.control?.value) {
+            setTimeout(() => {
+                const active = document.activeElement;
+                const current = document.querySelector(`[formcontrolname="${this.controlNameValue}"]`);
+                if (!current || !active || !current.contains(active)) {
+                    this.control?.markAsUntouched();
+                }
+            });
+        }
+    }
+    onSearchClick() {
+        this.searchClick.emit();
+    }
+    writeValue(value) {
+        this.value = value || "";
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    isChecked = false;
+    checkedTextPlaceholder = "";
+    uncheckedTextPlaceholder = "";
+    statusChanged = new EventEmitter();
+    checkboxInput;
+    onToggleCheckbox() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.isChecked = !this.isChecked;
+        this.statusChanged.emit(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseToggleComponent, isStandalone: true, selector: "cao-base-toggle", inputs: { type: "type", placeholder: "placeholder", inputClass: "inputClass", value: "value", errorMessage: "errorMessage", isDisabled: "isDisabled", maxLength: "maxLength", searchMode: "searchMode", showBorder: "showBorder", isLucideIcon: "isLucideIcon", iconColor: "iconColor", mask: "mask", control: "control", tooltip: "tooltip", dataCy: "dataCy", textareaRows: "textareaRows", decimalMarker: "decimalMarker", thousandSeparator: "thousandSeparator", allowNegativeNumbers: "allowNegativeNumbers", separatorLimit: "separatorLimit", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", controlName: "controlName", isChecked: "isChecked", checkedTextPlaceholder: "checkedTextPlaceholder", uncheckedTextPlaceholder: "uncheckedTextPlaceholder" }, outputs: { valueChange: "valueChange", searchClick: "searchClick", inputChange: "inputChange", statusChanged: "statusChanged" }, viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex col aic jcc base-toggle\">\n  <input #checkbox type=\"checkbox\" class=\"checkbox\" [checked]=\"isChecked\" [disabled]=\"isDisabled\" />\n  <div\n    class=\"d-flex checkbox-element aic jcsb\"\n    tabindex=\"0\"\n    role=\"button\"\n    [class.activated-toggle]=\"isChecked\"\n    (click)=\"onToggleCheckbox()\"\n    (keydown.enter)=\"onToggleCheckbox()\"\n    (keydown.space)=\"onToggleCheckbox(); $event.preventDefault()\">\n    @if (isChecked) {\n    <mat-icon class=\"eye-icon\" />\n    <div class=\"check-text\"> Ativada </div>\n    <div class=\"line\"></div>\n    <p class=\"unchecked\">Desativar</p>\n    }@else {\n    <mat-icon class=\"fa-circle\" />\n    <div class=\"check-text\"> N\u00E3o ativada </div>\n    <div class=\"line\"></div>\n    <p>Ativar</p>\n    }\n  </div>\n  @if(isChecked){\n  <span>{{ checkedTextPlaceholder }} ativada com sucesso</span>\n  } @else{\n  <span>Clique para ativar {{ uncheckedTextPlaceholder }}</span>\n  }\n</div>\n", styles: [".base-toggle input{display:none;visibility:hidden}.base-toggle .checkbox-element{border-radius:24px;cursor:pointer;gap:10px;padding:10px 20px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border-toggle);background-color:transparent}.base-toggle .checkbox-element .check-text{font-weight:700}.base-toggle .checkbox-element .line{height:24px;width:1px;background-color:var(--data-bg)}.base-toggle .checkbox-element.activated-toggle{border:2px solid var(--border-toggle-checked);background-color:var(--bg-toggle-checked)}.base-toggle .checkbox-element.activated-toggle .check-text{color:var(--text-toggle-checked)}.base-toggle .checkbox-element.activated-toggle .unchecked{color:var(--text-unselected-toggle-checked)}.base-toggle .checkbox-element p{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-base-toggle", standalone: true, imports: [CommonModule, MaterialModule], template: "<div class=\"d-flex col aic jcc base-toggle\">\n  <input #checkbox type=\"checkbox\" class=\"checkbox\" [checked]=\"isChecked\" [disabled]=\"isDisabled\" />\n  <div\n    class=\"d-flex checkbox-element aic jcsb\"\n    tabindex=\"0\"\n    role=\"button\"\n    [class.activated-toggle]=\"isChecked\"\n    (click)=\"onToggleCheckbox()\"\n    (keydown.enter)=\"onToggleCheckbox()\"\n    (keydown.space)=\"onToggleCheckbox(); $event.preventDefault()\">\n    @if (isChecked) {\n    <mat-icon class=\"eye-icon\" />\n    <div class=\"check-text\"> Ativada </div>\n    <div class=\"line\"></div>\n    <p class=\"unchecked\">Desativar</p>\n    }@else {\n    <mat-icon class=\"fa-circle\" />\n    <div class=\"check-text\"> N\u00E3o ativada </div>\n    <div class=\"line\"></div>\n    <p>Ativar</p>\n    }\n  </div>\n  @if(isChecked){\n  <span>{{ checkedTextPlaceholder }} ativada com sucesso</span>\n  } @else{\n  <span>Clique para ativar {{ uncheckedTextPlaceholder }}</span>\n  }\n</div>\n", styles: [".base-toggle input{display:none;visibility:hidden}.base-toggle .checkbox-element{border-radius:24px;cursor:pointer;gap:10px;padding:10px 20px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border-toggle);background-color:transparent}.base-toggle .checkbox-element .check-text{font-weight:700}.base-toggle .checkbox-element .line{height:24px;width:1px;background-color:var(--data-bg)}.base-toggle .checkbox-element.activated-toggle{border:2px solid var(--border-toggle-checked);background-color:var(--bg-toggle-checked)}.base-toggle .checkbox-element.activated-toggle .check-text{color:var(--text-toggle-checked)}.base-toggle .checkbox-element.activated-toggle .unchecked{color:var(--text-unselected-toggle-checked)}.base-toggle .checkbox-element p{margin:0}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], searchMode: [{
+                type: Input
+            }], showBorder: [{
+                type: Input
+            }], isLucideIcon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], textareaRows: [{
+                type: Input
+            }], decimalMarker: [{
+                type: Input
+            }], thousandSeparator: [{
+                type: Input
+            }], allowNegativeNumbers: [{
+                type: Input
+            }], separatorLimit: [{
+                type: Input
+            }], leadingIcon: [{
+                type: Input
+            }], trailingIcon: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], searchClick: [{
+                type: Output
+            }], inputChange: [{
+                type: Output
+            }], controlName: [{
+                type: Input
+            }], isChecked: [{
+                type: Input
+            }], checkedTextPlaceholder: [{
+                type: Input
+            }], uncheckedTextPlaceholder: [{
+                type: Input
+            }], statusChanged: [{
+                type: Output
+            }], checkboxInput: [{
+                type: ViewChild,
+                args: ["checkbox"]
+            }] } });
+
 class BaseModalService {
     constructor() { }
     toggleModalEvent = new EventEmitter();
@@ -2017,7 +2461,7 @@ class BaseDialogService {
     generateComponentPortal() {
         return BaseDialog;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, deps: [{ token: i1$5.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, providedIn: "root" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, decorators: [{
@@ -2025,7 +2469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: i1$4.Overlay }] });
+        }], ctorParameters: () => [{ type: i1$5.Overlay }] });
 
 class BaseFilterTableService {
     filterSubject = new Subject();
@@ -2447,7 +2891,7 @@ class BaseTable {
         this.totalItems = this.dataSource.data.length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTable, isStandalone: true, selector: "cao-table", inputs: { customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", isPaginatedByServer: "isPaginatedByServer" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n  @if (tableConfig) {\n  <div class=\"table-controls\">\n    <mat-menu #menuColunas=\"matMenu\">\n      @for (column of allColumns; track column) {\n      <button\n      mat-menu-item\n      [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n        <mat-checkbox\n          [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n          [checked]=\"isColumnVisible(column)\">\n          {{ getColumnHeader(column) }}\n        </mat-checkbox>\n      </button>\n      }\n    </mat-menu>\n  </div>\n\n  <table\n    mat-table\n    matSort\n    class=\"mat-elevation-z8\"\n    [dataSource]=\"dataSource\"\n    (matSortChange)=\"announceSortChange($event)\">\n    <ng-container matColumnDef=\"select\">\n      <th *matHeaderCellDef mat-header-cell>\n        <mat-checkbox\n          data-cy=\"checkbox-select-all\"\n          [checked]=\"selection.hasValue() && isAllSelected()\"\n          [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n          (change)=\"$event ? toggleAllRows() : null\" />\n      </th>\n      <td *matCellDef=\"let row\" mat-cell>\n        <mat-checkbox\n          [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n          [checked]=\"selection.isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? selection.toggle(row) : null\" />\n      </td>\n    </ng-container>\n\n    @for (column of displayedColumns; track column) {\n    <ng-container [matColumnDef]=\"column\">\n      <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n        <span>{{ getColumnHeader(column) }}</span>\n        <img\n          alt=\"icone\"\n          [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n          [fill]=\"true\"\n          [matMenuTriggerFor]=\"menuColunas\" />\n        <mat-menu #menuColunas=\"matMenu\">\n          @for (column of allColumns; track column) {\n          <button\n          mat-menu-item\n          [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n            <mat-checkbox\n              [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n              [checked]=\"isColumnVisible(column)\">\n              {{ getColumnHeader(column) }}\n            </mat-checkbox>\n          </button>\n          }\n        </mat-menu>\n      </th>\n      <td *matCellDef=\"let element\" mat-cell>\n        @switch (getColumnType(column)) { @case ('STRING') {\n        <span>{{ element[getColumnElement(column)] }}</span>\n        } @case ('BOOLEAN') {\n        <mat-checkbox\n          disabled\n          [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n          [checked]=\"element[getColumnElement(column)]\" />\n        } @case ('DATE') {\n        <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n        } @case ('NUMBER') {\n        <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n        } @case ('SINGLE_BUTTON') {\n        <div>\n          @for (btn of getColumnButtons(column); track btn) {\n          <button\n          mat-icon-button\n          [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          </button>\n          }\n        </div>\n        } @default {\n        <span>{{ element[getColumnElement(column)] }}</span>\n        } }\n      </td>\n    </ng-container>\n    }\n\n    <ng-container matColumnDef=\"footer\">\n      <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n        Total de Registros: {{ dataSource.data.length }}\n      </td>\n    </ng-container>\n\n    <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n    <tr\n      *matRowDef=\"let row; columns: getAllColumns();\"\n      mat-row\n      (click)=\"selection.toggle(row)\"></tr>\n    <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n  </table>\n  }\n</div>\n\n<mat-paginator\n  #paginator\n  aria-label=\"Select page\"\n  [length]=\"totalItems\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [pageIndex]=\"currentPage - 1\"\n  [hidePageSize]=\"false\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n  <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n  <p class=\"no-data-message\"\n    >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n  >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTable, isStandalone: true, selector: "cao-table", inputs: { customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", isPaginatedByServer: "isPaginatedByServer" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n  @if (tableConfig) {\n  <div class=\"table-controls\">\n    <mat-menu #menuColunas=\"matMenu\">\n      @for (column of allColumns; track column) {\n      <button\n      mat-menu-item\n      [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n        <mat-checkbox\n          [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n          [checked]=\"isColumnVisible(column)\">\n          {{ getColumnHeader(column) }}\n        </mat-checkbox>\n      </button>\n      }\n    </mat-menu>\n  </div>\n\n  <table\n    mat-table\n    matSort\n    class=\"mat-elevation-z8\"\n    [dataSource]=\"dataSource\"\n    (matSortChange)=\"announceSortChange($event)\">\n    <ng-container matColumnDef=\"select\">\n      <th *matHeaderCellDef mat-header-cell>\n        <mat-checkbox\n          data-cy=\"checkbox-select-all\"\n          [checked]=\"selection.hasValue() && isAllSelected()\"\n          [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n          (change)=\"$event ? toggleAllRows() : null\" />\n      </th>\n      <td *matCellDef=\"let row\" mat-cell>\n        <mat-checkbox\n          [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n          [checked]=\"selection.isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? selection.toggle(row) : null\" />\n      </td>\n    </ng-container>\n\n    @for (column of displayedColumns; track column) {\n    <ng-container [matColumnDef]=\"column\">\n      <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n        <span>{{ getColumnHeader(column) }}</span>\n        <img\n          alt=\"icone\"\n          [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n          [fill]=\"true\"\n          [matMenuTriggerFor]=\"menuColunas\" />\n        <mat-menu #menuColunas=\"matMenu\">\n          @for (column of allColumns; track column) {\n          <button\n          mat-menu-item\n          [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n            <mat-checkbox\n              [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n              [checked]=\"isColumnVisible(column)\">\n              {{ getColumnHeader(column) }}\n            </mat-checkbox>\n          </button>\n          }\n        </mat-menu>\n      </th>\n      <td *matCellDef=\"let element\" mat-cell>\n        @switch (getColumnType(column)) { @case ('STRING') {\n        <span>{{ element[getColumnElement(column)] }}</span>\n        } @case ('BOOLEAN') {\n        <mat-checkbox\n          disabled\n          [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n          [checked]=\"element[getColumnElement(column)]\" />\n        } @case ('DATE') {\n        <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n        } @case ('NUMBER') {\n        <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n        } @case ('SINGLE_BUTTON') {\n        <div>\n          @for (btn of getColumnButtons(column); track btn) {\n          <button\n          mat-icon-button\n          [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          </button>\n          }\n        </div>\n        } @default {\n        <span>{{ element[getColumnElement(column)] }}</span>\n        } }\n      </td>\n    </ng-container>\n    }\n\n    <ng-container matColumnDef=\"footer\">\n      <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n        Total de Registros: {{ dataSource.data.length }}\n      </td>\n    </ng-container>\n\n    <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n    <tr\n      *matRowDef=\"let row; columns: getAllColumns();\"\n      mat-row\n      (click)=\"selection.toggle(row)\"></tr>\n    <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n  </table>\n  }\n</div>\n\n<mat-paginator\n  #paginator\n  aria-label=\"Select page\"\n  [length]=\"totalItems\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [pageIndex]=\"currentPage - 1\"\n  [hidePageSize]=\"false\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n  <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n  <p class=\"no-data-message\"\n    >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n  >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, decorators: [{
             type: Component,
@@ -2910,7 +3354,7 @@ class BaseTablePaginated {
         return this.tableConfig.columnData[column].buttons || [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTablePaginated, isStandalone: true, selector: "cao-table-paginated", inputs: { getColumnCssClass: "getColumnCssClass", customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent", rowClicked: "rowClicked" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBasePaginated() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n  @if (tableConfig) {\n  <table mat-table matSort [dataSource]=\"dataSource\" (matSortChange)=\"announceSortChange($event)\">\n    @for (column of displayedColumns; track column) {\n    <ng-container [matColumnDef]=\"column\">\n      <th *matHeaderCellDef mat-header-cell mat-sort-header class=\"table-header\">\n        {{ getColumnHeader(column) }}\n      </th>\n      <td *matCellDef=\"let element\" mat-cell class=\"table-cell\">\n        @switch (getColumnType(column)) { @case ('STRING') { @if (getColumnCssClass &&\n        getColumnCssClass(column, element[getColumnElement(column)])) {\n        <span [class]=\"getColumnCssClass(column, element[getColumnElement(column)])\">\n          {{ element[getColumnElement(column)] }}\n        </span>\n        } @else {\n        <span>{{ element[getColumnElement(column)] }}</span>\n        } } @case ('BOOLEAN') {\n        <mat-checkbox disabled [checked]=\"element[getColumnElement(column)]\" />\n        } @case ('DATE') {\n        <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n        } @case ('NUMBER') {\n        <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n        } @case ('SINGLE_BUTTON') {\n        <div>\n          @for (btn of getColumnButtons(column); track btn) {\n          <button type=\"button\" mat-icon-button [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          </button>\n          }\n        </div>\n        } }\n      </td>\n    </ng-container>\n    }\n\n    <ng-container matColumnDef=\"footer\">\n      <td\n        *matFooterCellDef\n        mat-footer-cell\n        class=\"table-cell\"\n        [attr.colspan]=\"displayedColumns.length\">\n        Total de Registros: {{ totalItems }}\n      </td>\n    </ng-container>\n\n    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n    <tr *matRowDef=\"let row; columns: displayedColumns;\" mat-row (click)=\"onRowClick(row)\"></tr>\n    <tr *matFooterRowDef=\"['footer']\" mat-footer-row class=\"mat-row-footer\"></tr>\n  </table>\n  @if(totalItems > 0){\n\n  <mat-paginator\n    #paginator\n    aria-label=\"Select page\"\n    [length]=\"totalItems\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    [pageIndex]=\"currentPage - 1\"\n    [hidePageSize]=\"false\"\n    [showFirstLastButtons]=\"showFirstLastButtons\"\n    (page)=\"onPageEvent($event)\" />\n  } @else {\n  <div class=\"no-data-container\">\n    <h2>{{ tableConfig?.result?.noData ?? 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n    <p>{{ tableConfig?.result?.defaultMessage ?? 'Adicione alguns dados' }}</p>\n  </div>\n  } }\n</div>\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;overflow:hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px;justify-content:center}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px;margin:0 auto}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none;text-align:center}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:100%}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--data-bg);font-weight:600;color:var(--message-color);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem;text-align:center;padding:12px;vertical-align:middle}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell .mat-sort-header-container{justify-content:center}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease;background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(2n){background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(odd){background-color:var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--border-table-ligth);color:var(--gray-dark);border-bottom:1px solid var(--input-background);text-align:center;padding:12px;vertical-align:middle}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin:0 auto;display:block}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--text-color)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:center}.table-container .no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background-color:var(--table-background)}.table-container .no-data-container h2{color:var(--input-disabled-bg);margin-bottom:12px}.table-container .no-data-container p{color:var(--input-disabled-bg)}@media(width<=768px){.table-container .table-controls{flex-direction:column;align-items:center}.table-container .table-controls .filter-field{width:80%;margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTablePaginated, isStandalone: true, selector: "cao-table-paginated", inputs: { getColumnCssClass: "getColumnCssClass", customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent", rowClicked: "rowClicked" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBasePaginated() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n  @if (tableConfig) {\n  <table mat-table matSort [dataSource]=\"dataSource\" (matSortChange)=\"announceSortChange($event)\">\n    @for (column of displayedColumns; track column) {\n    <ng-container [matColumnDef]=\"column\">\n      <th *matHeaderCellDef mat-header-cell mat-sort-header class=\"table-header\">\n        {{ getColumnHeader(column) }}\n      </th>\n      <td *matCellDef=\"let element\" mat-cell class=\"table-cell\">\n        @switch (getColumnType(column)) { @case ('STRING') { @if (getColumnCssClass &&\n        getColumnCssClass(column, element[getColumnElement(column)])) {\n        <span [class]=\"getColumnCssClass(column, element[getColumnElement(column)])\">\n          {{ element[getColumnElement(column)] }}\n        </span>\n        } @else {\n        <span>{{ element[getColumnElement(column)] }}</span>\n        } } @case ('BOOLEAN') {\n        <mat-checkbox disabled [checked]=\"element[getColumnElement(column)]\" />\n        } @case ('DATE') {\n        <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n        } @case ('NUMBER') {\n        <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n        } @case ('SINGLE_BUTTON') {\n        <div>\n          @for (btn of getColumnButtons(column); track btn) {\n          <button type=\"button\" mat-icon-button [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          </button>\n          }\n        </div>\n        } }\n      </td>\n    </ng-container>\n    }\n\n    <ng-container matColumnDef=\"footer\">\n      <td\n        *matFooterCellDef\n        mat-footer-cell\n        class=\"table-cell\"\n        [attr.colspan]=\"displayedColumns.length\">\n        Total de Registros: {{ totalItems }}\n      </td>\n    </ng-container>\n\n    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n    <tr *matRowDef=\"let row; columns: displayedColumns;\" mat-row (click)=\"onRowClick(row)\"></tr>\n    <tr *matFooterRowDef=\"['footer']\" mat-footer-row class=\"mat-row-footer\"></tr>\n  </table>\n  @if(totalItems > 0){\n\n  <mat-paginator\n    #paginator\n    aria-label=\"Select page\"\n    [length]=\"totalItems\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    [pageIndex]=\"currentPage - 1\"\n    [hidePageSize]=\"false\"\n    [showFirstLastButtons]=\"showFirstLastButtons\"\n    (page)=\"onPageEvent($event)\" />\n  } @else {\n  <div class=\"no-data-container\">\n    <h2>{{ tableConfig?.result?.noData ?? 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n    <p>{{ tableConfig?.result?.defaultMessage ?? 'Adicione alguns dados' }}</p>\n  </div>\n  } }\n</div>\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;overflow:hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px;justify-content:center}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px;margin:0 auto}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none;text-align:center}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:100%}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--data-bg);font-weight:600;color:var(--message-color);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem;text-align:center;padding:12px;vertical-align:middle}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell .mat-sort-header-container{justify-content:center}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease;background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(2n){background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(odd){background-color:var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--border-table-ligth);color:var(--gray-dark);border-bottom:1px solid var(--input-background);text-align:center;padding:12px;vertical-align:middle}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin:0 auto;display:block}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--text-color)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:center}.table-container .no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background-color:var(--table-background)}.table-container .no-data-container h2{color:var(--input-disabled-bg);margin-bottom:12px}.table-container .no-data-container p{color:var(--input-disabled-bg)}@media(width<=768px){.table-container .table-controls{flex-direction:column;align-items:center}.table-container .table-controls .filter-field{width:80%;margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, decorators: [{
             type: Component,
@@ -2989,7 +3433,7 @@ class BaseAlertService {
     generateComponentPortal() {
         return BaseAlert;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, deps: [{ token: i1$5.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, providedIn: "root" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, decorators: [{
@@ -2997,11 +3441,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: i1$4.Overlay }] });
+        }], ctorParameters: () => [{ type: i1$5.Overlay }] });
 
 /**
  * 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, CaoKpi, 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, CaoBaseToggleComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map