ngx-opalbytes-components 1.17.0 → 1.19.0

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, Injectable } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, Injectable } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -12,20 +12,22 @@ import * as i2$1 from '@angular/material/datepicker';
 import { MatDatepickerModule, MatDateRangeInput } from '@angular/material/datepicker';
 import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
+import * as i3$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/autocomplete';
-import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { BehaviorSubject, combineLatest, startWith, map, Subscription, Subject } from 'rxjs';
-import * as i4$1 from '@angular/material/icon';
+import * as i1$4 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 { MatIconModule } from '@angular/material/icon';
 import { Router, ActivatedRoute } from '@angular/router';
-import * as i1$4 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
-import * as i2$2 from '@angular/material/button';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import * as i3$1 from '@angular/material/checkbox';
+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';
@@ -34,7 +36,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatListModule } from '@angular/material/list';
-import * as i5$1 from '@angular/material/menu';
+import * as i5 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i1$2 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
@@ -51,11 +53,10 @@ 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$2 from '@angular/material/timepicker';
+import * as i4$1 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
-import { ComponentPortal } from '@angular/cdk/portal';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
 
@@ -73,11 +74,12 @@ class CaoBaseButtonComponent {
     dataCy;
     iconColor;
     strokeWidthIcon = 1;
+    minTextToTooltip = 20;
     ngOnInit() {
         if (!this.dataCy) {
             this.dataCy = `btn-${this.buttonText.replace(/\s+/g, '-').toLowerCase()}`;
         }
-        if (!this.tooltip && this.buttonText.length >= 20) {
+        if (!this.tooltip && this.buttonText.length >= this.minTextToTooltip) {
             this.tooltip = this.buttonText;
         }
     }
@@ -87,7 +89,7 @@ class CaoBaseButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon", minTextToTooltip: "minTextToTooltip" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"base-button\"\n  matTooltipPosition=\"below\"\n  matTooltipClass=\"custom-arrow-tooltip\"\n  [matTooltip]=\"tooltip\"\n  [matTooltipDisabled]=\"!tooltip\"\n  [class.dark-mode]=\"isDarkMode\"\n  [class.disabled]=\"isDisabled\"\n  [class.loading]=\"isLoading\"\n  [disabled]=\"isDisabled || isLoading\"\n  [attr.data-cy]=\"dataCy\"\n  (click)=\"onClick()\">\n  @if (leadingIcon) {\n  <span class=\"leading-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"leadingIcon\" />\n    }\n  </span>\n  } {{ buttonText }} @if (trailingIcon) {\n  <span class=\"trailing-icon\">\n    @if (isLucideIcon) {\n    <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n    } @else {\n    <img alt=\"icon\" [src]=\"trailingIcon\" />\n    }\n  </span>\n  } @if (isLoading) {\n  <span class=\"loader\"></span>\n  }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, decorators: [{
             type: Component,
@@ -118,6 +120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], strokeWidthIcon: [{
                 type: Input
+            }], minTextToTooltip: [{
+                type: Input
             }] } });
 
 class CaoBaseInput {
@@ -368,103 +372,293 @@ class CaoAutocompleteComponent {
     autocompleteBgColor = 'white';
     strokeWidthIcon = 1;
     isDisabled = false;
+    inputHeigth = '50px';
+    checkIcon = '✓';
+    showCheckIcon = true;
+    isLucideCheckIcon = false;
     itemSelected = new EventEmitter();
     blurEvent = new EventEmitter();
     focusEvent = new EventEmitter();
     leadingIconClick = new EventEmitter();
     trailingIconClick = new EventEmitter();
-    autocompleteTrigger;
+    inputEl;
+    wrapperEl;
+    // CORREÇÃO: ViewChild para o ng-template
+    panelTemplate;
+    /** controla apenas o texto digitado / exibido no input */
     internalControl = new FormControl("");
     filteredOptions$;
+    filteredOptionsList = [];
     isFocused = false;
-    icon = false;
+    isPanelOpen = false;
+    activeIndex = -1;
+    static uidSeq = 0;
+    listboxId = `cao-autocomplete-listbox-${CaoAutocompleteComponent.uidSeq++}`;
     selectedOption = null;
     options$ = new BehaviorSubject([]);
-    el = inject(ElementRef);
+    /** indica se o valor atual do internalControl foi digitado pelo usuário (e não escrito programaticamente) */
+    isUserTyping = false;
+    el = inject((ElementRef));
+    cdr = inject(ChangeDetectorRef);
+    renderer = inject(Renderer2);
+    // Injeções do CDK Overlay
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    scrollDispatcher = inject(ScrollDispatcher);
+    sub = new Subscription();
+    overlayRef = null;
+    portal = null;
     onChange = () => { };
     onTouched = () => { };
     ngOnInit() {
+        this.setInputHeight();
         this.filteredOptions$ = combineLatest([
             this.internalControl.valueChanges.pipe(startWith("")),
             this.options$,
         ]).pipe(map(([value]) => this.filter(value || "")));
-        this.control.valueChanges.subscribe((value) => {
-            const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
-            this.internalControl.setValue(displayValue, { emitEvent: false });
+        this.sub.add(this.filteredOptions$.subscribe((list) => {
+            this.filteredOptionsList = list;
+            this.activeIndex = list.length ? 0 : -1;
+            // Atualiza o overlay se estiver aberto e anexado
+            if (this.isPanelOpen && this.portal && this.overlayRef?.hasAttached()) {
+                this.overlayRef?.updatePosition();
+            }
+        }));
+        this.sub.add(this.control.valueChanges.subscribe((value) => {
+            this.writeDisplayValue(value);
             this.selectedOption = value && typeof value === "object" ? value : null;
-        });
+        }));
         this.setStyle();
+        this.setupOverlay();
     }
-    setStyle() {
-        this.el.nativeElement.style.setProperty('--autocomplete-bg-color', this.autocompleteBgColor);
+    ngAfterViewInit() {
+        // CORREÇÃO: Usando o TemplateRef obtido do ViewChild
+        this.portal = new TemplatePortal(this.panelTemplate, this.viewContainerRef);
     }
     ngOnChanges(changes) {
         if (changes['options']) {
             this.options$.next(changes['options'].currentValue ?? []);
         }
     }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+        this.closeOverlay();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    setupOverlay() {
+        const scrollStrategy = this.overlay.scrollStrategies.reposition();
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position()
+                .flexibleConnectedTo(this.wrapperEl)
+                .withPositions([
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetY: 4,
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetY: -4,
+                }
+            ])
+                .withDefaultOffsetX(0)
+                .withFlexibleDimensions(false)
+                .withViewportMargin(8),
+            scrollStrategy: scrollStrategy,
+            hasBackdrop: false,
+            backdropClass: '',
+            minWidth: 200,
+            maxHeight: 260,
+        });
+        // Fecha o overlay quando houver scroll fora do elemento
+        this.scrollDispatcher.scrolled().subscribe((scrollable) => {
+            if (this.isPanelOpen) {
+                const overlayEl = this.overlayRef?.overlayElement;
+                if (scrollable instanceof CdkScrollable) {
+                    const scrollableEl = scrollable.getElementRef().nativeElement;
+                    if (overlayEl?.contains(scrollableEl)) {
+                        return;
+                    }
+                }
+                this.closePanel();
+            }
+        });
+    }
+    closeOverlay() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+        this.isPanelOpen = false;
+    }
+    openOverlay() {
+        if (!this.overlayRef || !this.portal) {
+            return;
+        }
+        this.overlayRef.updateSize({
+            width: this.wrapperEl.nativeElement.offsetWidth,
+        });
+        if (!this.overlayRef.hasAttached()) {
+            this.overlayRef.attach(this.portal);
+        }
+        this.overlayRef.updatePosition();
+        this.isPanelOpen = true;
+        this.cdr.markForCheck();
+    }
+    setStyle() {
+        this.renderer.setStyle(this.el.nativeElement, '--autocomplete-bg-color', this.autocompleteBgColor);
+    }
+    // ---------- Painel ----------
+    openPanel() {
+        if (this.isDisabled || this.isPanelOpen) {
+            return;
+        }
+        if (this.selectedOption && !this.isUserTyping) {
+            // Ao reabrir com uma opção já selecionada (e sem edição manual do usuário),
+            // exibe todas as opções, com a selecionada no topo.
+            this.filteredOptionsList = this.filter("");
+            const idx = this.filteredOptionsList.findIndex(o => o.id === this.selectedOption?.id);
+            this.activeIndex = idx >= 0 ? idx : (this.filteredOptionsList.length ? 0 : -1);
+        }
+        this.openOverlay();
+    }
+    closePanel() {
+        if (!this.isPanelOpen) {
+            return;
+        }
+        this.closeOverlay();
+        this.cdr.markForCheck();
+    }
+    onDocumentClick(event) {
+        if (!this.isPanelOpen) {
+            return;
+        }
+        const target = event.target;
+        const clickedInsideHost = this.el.nativeElement.contains(target);
+        const clickedInsideOverlay = this.overlayRef?.overlayElement?.contains(target);
+        if (!clickedInsideHost && !clickedInsideOverlay) {
+            this.closePanel();
+        }
+    }
+    // ---------- Eventos do input ----------
     onFocus() {
         this.isFocused = true;
         this.focusEvent.emit();
         this.onTouched();
-        const currentDisplay = this.internalControl.value;
-        this.internalControl.setValue("", { emitEvent: true });
-        if (currentDisplay) {
-            this.internalControl.setValue(currentDisplay, { emitEvent: false });
-        }
-        setTimeout(() => {
-            this.autocompleteTrigger?.openPanel();
-        }, 0);
+        this.openPanel();
     }
     onBlur() {
         this.isFocused = false;
         this.blurEvent.emit();
         this.onTouched();
-        if (this.selectedOption) {
-            this.internalControl.setValue(this.displayFn(this.selectedOption), { emitEvent: false });
+        // Não fecha o overlay imediatamente no blur para permitir seleção
+        setTimeout(() => {
+            if (!this.isPanelOpen) {
+                return;
+            }
+            const activeElement = document.activeElement;
+            const isOverlayElement = this.overlayRef?.overlayElement?.contains(activeElement);
+            const isInputElement = this.inputEl?.nativeElement === activeElement;
+            if (!isOverlayElement && !isInputElement) {
+                this.closePanel();
+            }
+        }, 150);
+    }
+    onInputKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isPanelOpen) {
+                    this.openPanel();
+                    return;
+                }
+                this.moveActiveIndex(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isPanelOpen) {
+                    this.openPanel();
+                    return;
+                }
+                this.moveActiveIndex(-1);
+                break;
+            case 'Enter':
+                if (this.isPanelOpen && this.activeIndex >= 0) {
+                    event.preventDefault();
+                    const option = this.filteredOptionsList[this.activeIndex];
+                    if (option) {
+                        this.selectItem(option);
+                    }
+                }
+                break;
+            case 'Escape':
+                if (this.isPanelOpen) {
+                    event.preventDefault();
+                    this.closePanel();
+                }
+                else {
+                    this.clearSelection();
+                }
+                break;
+            case 'Tab':
+                this.closePanel();
+                break;
+        }
+    }
+    moveActiveIndex(step) {
+        if (!this.filteredOptionsList.length) {
+            return;
         }
+        const total = this.filteredOptionsList.length;
+        this.activeIndex = (this.activeIndex + step + total) % total;
+        this.cdr.markForCheck();
     }
+    // ---------- Seleção ----------
     selectItem(option) {
         this.selectedOption = option;
-        this.internalControl.setValue(this.displayFn(option), { emitEvent: false });
+        this.writeDisplayValue(option, { emitEvent: false });
+        this.control.setValue(option, { emitEvent: false });
         this.onChange(option);
         this.itemSelected.emit(option);
-    }
-    onOptionSelected(event) {
-        this.selectItem(event.option.value);
-        this.onTouched();
+        // Reordena a lista filtrada para que a opção selecionada fique no topo
+        this.filteredOptionsList = this.moveSelectedToTop(this.filteredOptionsList, option);
         this.closePanel();
+        // Remove o foco do input após a seleção
+        this.inputEl?.nativeElement.blur();
+        this.isFocused = false;
+        this.cdr.markForCheck();
     }
     selectOption(option) {
         this.selectItem(option);
-        this.closePanel();
-    }
-    closePanel() {
-        setTimeout(() => {
-            this.autocompleteTrigger?.closePanel();
-            this.el.nativeElement.querySelector('input')?.blur();
-        }, 10);
     }
     clearSelection() {
         this.selectedOption = null;
-        this.internalControl.setValue("", { emitEvent: false });
+        this.writeDisplayValue("", { emitEvent: false });
         this.control.setValue(null, { emitEvent: true });
         this.onChange(null);
         this.onTouched();
-        setTimeout(() => {
-            this.autocompleteTrigger?.closePanel();
-        }, 0);
+        this.closePanel();
     }
     onLeadingIconClick(event) {
         event.stopPropagation();
+        this.onFocus();
         this.leadingIconClick.emit(event);
     }
     onTrailingIconClick(event) {
         event.stopPropagation();
+        this.onFocus();
         this.trailingIconClick.emit(event);
     }
+    // ---------- Filtro / display ----------
     filter(value) {
-        const filterValue = (typeof value === "string" ? value : value?.nome)?.toLowerCase() || "";
+        const filterValue = (value || "").toLowerCase();
         const currentOptions = this.options$.getValue();
         if (!currentOptions?.length) {
             return [];
@@ -474,19 +668,48 @@ class CaoAutocompleteComponent {
             const idMatch = option.id?.toString().toLowerCase().includes(filterValue);
             return nomeMatch || idMatch;
         });
-        if (!filterValue && this.selectedOption) {
-            const selectedId = this.selectedOption.id;
-            const selectedIndex = matched.findIndex((o) => o.id === selectedId);
-            if (selectedIndex > 0) {
-                const [selected] = matched.splice(selectedIndex, 1);
-                matched.unshift(selected);
-            }
+        return this.selectedOption ? this.moveSelectedToTop(matched, this.selectedOption) : matched;
+    }
+    /** Move a opção selecionada para o início da lista, mantendo a ordem das demais */
+    moveSelectedToTop(list, selected) {
+        const selectedIndex = list.findIndex((o) => o.id === selected.id);
+        if (selectedIndex <= 0) {
+            return list;
         }
-        return matched;
+        const reordered = [...list];
+        const [selectedItem] = reordered.splice(selectedIndex, 1);
+        reordered.unshift(selectedItem);
+        return reordered;
+    }
+    writeDisplayValue(value, options = { emitEvent: false }) {
+        const text = value && typeof value === "object" ? this.displayFn(value) : (value ?? "");
+        this.isUserTyping = false;
+        this.internalControl.setValue(text, options);
+    }
+    /** Marca que o usuário está digitando manualmente no campo (ativa o filtro por texto) */
+    onUserInput() {
+        this.isUserTyping = true;
     }
     displayFn(option) {
         return option && option.nome ? option.nome : "";
     }
+    isOptionSelected(option) {
+        return this.selectedOption?.id !== undefined && this.selectedOption?.id === option.id;
+    }
+    trackByOptionId(_, option) {
+        return option.id ?? option.nome;
+    }
+    optionId(option) {
+        const key = (option.id ?? option.nome).toString().replace(/[^a-zA-Z0-9_-]/g, '-');
+        return `${this.listboxId}-opt-${key}`;
+    }
+    get activeOptionId() {
+        if (!this.isPanelOpen || this.activeIndex < 0) {
+            return null;
+        }
+        const option = this.filteredOptionsList[this.activeIndex];
+        return option ? this.optionId(option) : null;
+    }
     get errorText() {
         if (!this.control) {
             return null;
@@ -528,8 +751,7 @@ class CaoAutocompleteComponent {
         return this.controlName;
     }
     writeValue(value) {
-        const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
-        this.internalControl.setValue(displayValue, { emitEvent: false });
+        this.writeDisplayValue(value, { emitEvent: false });
         this.selectedOption = value && typeof value === "object" ? value : null;
     }
     registerOnChange(fn) {
@@ -538,34 +760,37 @@ class CaoAutocompleteComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    setInputHeight(height) {
-        this.el.nativeElement.style.setProperty("--form-field-height", height);
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    setInputHeight() {
+        this.renderer.setStyle(this.el.nativeElement, "--form-field-height", this.inputHeigth);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled", inputHeigth: "inputHeigth", checkIcon: "checkIcon", showCheckIcon: "showCheckIcon", isLucideCheckIcon: "isLucideCheckIcon" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CaoAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"internalControl\">{{ label }}</label>\n  }\n  <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field autocomplete\">\n    <div\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\" \n          tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\"\n            >\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\" \n          tabindex=\"0\"\n          (click)=\"onLeadingIconClick($event)\"\n          (keydown.enter)=\"onLeadingIconClick($event)\"\n          >\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #trigger=\"matAutocompleteTrigger\"\n        type=\"text\"\n        matInput\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-cy]=\"dataCy\"\n        [ngClass]=\"[\n          control?.touched && control?.invalid ? 'invalid' : '',\n          control?.touched && control?.valid && control?.value ? 'valid' : ''\n        ]\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown.escape)=\"clearSelection()\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div \n          tabindex=\"0\"\n          class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n          (keydown.enter)=\"onTrailingIconClick($event)\"\n          >\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div \n          tabindex=\"0\"\n          class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n          (keydown.enter)=\"onTrailingIconClick($event)\"\n          >\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        autoActiveFirstOption\n        [displayWith]=\"displayFn\"\n        (optionSelected)=\"onOptionSelected($event)\">\n        @for (option of filteredOptions$ | async; track option.id) {\n          <mat-option class=\"option-item\" [value]=\"option\">\n            {{ option.nome }}\n            @if (optionIcon) {\n              @if (isLucideOptionIcon) {\n                <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"iconColor\"></svg>\n              } @else {\n                <img alt=\"\" [src]=\"optionIcon\" />\n              }\n            }\n          </mat-option>\n        }\n      </mat-autocomplete>\n\n    </div>\n  </mat-form-field>\n</div>", styles: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;--mat-autocomplete-background-color: var(--autocomplete-bg-color, white);display:block}::ng-deep .rnv-autocomplete-mat-form-field{--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent;--mat-form-field-outlined-focus-outline-color: transparent}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-mat-form-field{width:100%;flex:1;min-height:0}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{height:100%!important;flex:1;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-flex{height:100%;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;display:flex;align-items:center;flex:1}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-infix input{height:auto!important;flex:1;padding:12px 0}::ng-deep .rnv-autocomplete-mat-form-field .mdc-list-item__primary-text{width:100%;display:flex;align-items:center;justify-content:space-between}.input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:auto;height:auto;pointer-events:none;z-index:1}.input-wrapper.has-leading-icon input{padding-left:28px}.input-wrapper.has-trailing-icon input{padding-right:28px}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.mat-mdc-option{font-size:1rem;padding:6px 16px;text-transform:uppercase}.mat-mdc-autocomplete-panel{border-radius:8px;padding:12px 6px;box-shadow:0 2px 10px #0000001a}.trailing-icon{right:0}\n"], dependencies: [{ 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"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: "cao-autocomplete", standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatAutocompleteModule,
                         LucideDynamicIcon,
+                        OverlayModule,
+                        CdkScrollable
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CaoAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"internalControl\">{{ label }}</label>\n  }\n  <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field autocomplete\">\n    <div\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\" \n          tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\"\n            >\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\" \n          tabindex=\"0\"\n          (click)=\"onLeadingIconClick($event)\"\n          (keydown.enter)=\"onLeadingIconClick($event)\"\n          >\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #trigger=\"matAutocompleteTrigger\"\n        type=\"text\"\n        matInput\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-cy]=\"dataCy\"\n        [ngClass]=\"[\n          control?.touched && control?.invalid ? 'invalid' : '',\n          control?.touched && control?.valid && control?.value ? 'valid' : ''\n        ]\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown.escape)=\"clearSelection()\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div \n          tabindex=\"0\"\n          class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n          (keydown.enter)=\"onTrailingIconClick($event)\"\n          >\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div \n          tabindex=\"0\"\n          class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n          (keydown.enter)=\"onTrailingIconClick($event)\"\n          >\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        autoActiveFirstOption\n        [displayWith]=\"displayFn\"\n        (optionSelected)=\"onOptionSelected($event)\">\n        @for (option of filteredOptions$ | async; track option.id) {\n          <mat-option class=\"option-item\" [value]=\"option\">\n            {{ option.nome }}\n            @if (optionIcon) {\n              @if (isLucideOptionIcon) {\n                <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"iconColor\"></svg>\n              } @else {\n                <img alt=\"\" [src]=\"optionIcon\" />\n              }\n            }\n          </mat-option>\n        }\n      </mat-autocomplete>\n\n    </div>\n  </mat-form-field>\n</div>", styles: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;--mat-autocomplete-background-color: var(--autocomplete-bg-color, white);display:block}::ng-deep .rnv-autocomplete-mat-form-field{--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent;--mat-form-field-outlined-focus-outline-color: transparent}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-mat-form-field{width:100%;flex:1;min-height:0}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{height:100%!important;flex:1;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-flex{height:100%;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;display:flex;align-items:center;flex:1}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-infix input{height:auto!important;flex:1;padding:12px 0}::ng-deep .rnv-autocomplete-mat-form-field .mdc-list-item__primary-text{width:100%;display:flex;align-items:center;justify-content:space-between}.input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:auto;height:auto;pointer-events:none;z-index:1}.input-wrapper.has-leading-icon input{padding-left:28px}.input-wrapper.has-trailing-icon input{padding-right:28px}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.mat-mdc-option{font-size:1rem;padding:6px 16px;text-transform:uppercase}.mat-mdc-autocomplete-panel{border-radius:8px;padding:12px 6px;box-shadow:0 2px 10px #0000001a}.trailing-icon{right:0}\n"] }]
+                    ], template: "<div class=\"form-field\">\n  @if (label) {\n    <label [for]=\"dataCy\">{{ label }}</label>\n  }\n\n  <div class=\"rnv-autocomplete-field autocomplete\">\n    <div\n      #wrapper\n      class=\"input-wrapper\"\n      [class.has-leading-icon]=\"_leadingIcon\"\n      [class.has-trailing-icon]=\"_trailingIcon\"\n      [class.focused]=\"isFocused\"\n      [class.invalid]=\"control?.touched && control?.invalid\"\n      [class.valid]=\"control?.touched && control?.valid && control?.value\">\n\n      @if (_leadingIcon) {\n        @if (isLucideIcon) {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div class=\"icon\"\n            tabindex=\"0\"\n            (click)=\"onLeadingIconClick($event)\"\n            (keydown.enter)=\"onLeadingIconClick($event)\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n          </div>\n        }\n      }\n\n      <input\n        #inputEl\n        type=\"text\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isPanelOpen\"\n        [attr.aria-controls]=\"isPanelOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"activeOptionId\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"isDisabled\"\n        [formControl]=\"internalControl\"\n        [attr.data-cy]=\"dataCy\"\n        [id]=\"dataCy\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (input)=\"onUserInput()\"\n        (keydown)=\"onInputKeydown($event)\" />\n\n      @if (_trailingIcon) {\n        @if (isLucideIcon) {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n          </div>\n        } @else {\n          <div\n            tabindex=\"0\"\n            class=\"icon trailing-icon\"\n            (click)=\"onTrailingIconClick($event)\"\n            (keydown.enter)=\"onTrailingIconClick($event)\">\n            <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n          </div>\n        }\n      }\n    </div>\n\n    @if (errorText) {\n      <span class=\"error-text\">{{ errorText }}</span>\n    }\n  </div>\n</div>\n\n<ng-template #panel>\n  <div\n    class=\"autocomplete-panel\"\n    cdkScrollable\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [style.width]=\"'100%'\"\n    [style.max-height]=\"'260px'\"\n    [style.background]=\"autocompleteBgColor\">\n    \n    @if (!filteredOptionsList.length) {\n      <div class=\"empty-state\">Nenhum resultado encontrado</div>\n    }\n\n    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {\n      <div\n        class=\"option-item\"\n        role=\"option\"\n        [id]=\"optionId(option)\"\n        [class.active]=\"$index === activeIndex\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [attr.aria-selected]=\"$index === activeIndex\"\n        (mousedown)=\"$event.preventDefault(); selectOption(option)\"\n        (mouseenter)=\"activeIndex = $index\">\n        <span>{{ option.nome }}</span>\n\n        <div class=\"option-item-icons\">\n          @if (showCheckIcon && isOptionSelected(option)) {\n            @if (isLucideCheckIcon) {\n              <svg class=\"check-icon\" [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"checkIcon\" [style.color]=\"iconColor\"></svg>\n            } @else {\n              <span class=\"check-icon\">{{ checkIcon }}</span>\n            }\n          }\n\n          @if (optionIcon) {\n            @if (isLucideOptionIcon) {\n              <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"optionIConColor || iconColor\"></svg>\n            } @else {\n              <img alt=\"\" [src]=\"optionIcon\" />\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [":host{display:block;position:relative;--autocomplete-bg-color: white}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-field{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.input-wrapper{position:relative;width:100%;height:var(--form-field-height, 44px);display:flex;align-items:center;background-color:var(--autocomplete-bg-color, white);border:1px solid transparent;border-radius:4px;box-sizing:border-box}.input-wrapper.invalid{border-color:#d32f2f}.input-wrapper.valid{border-color:#2e7d32}input{width:100%;height:100%;border:none;outline:none;background:transparent;padding:12px;font-size:1rem;box-sizing:border-box}input:disabled{opacity:.5;cursor:not-allowed}.input-wrapper.has-leading-icon input{padding-left:36px}.input-wrapper.has-trailing-icon input{padding-right:28px}.icon{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:auto;height:auto;z-index:1;cursor:pointer}.trailing-icon{left:auto;right:6px}.error-text{color:#d32f2f;font-size:11px;margin-top:2px}.autocomplete-panel{background:var(--autocomplete-bg-color, white);border-radius:8px;padding:6px;box-shadow:0 2px 10px #00000026;max-height:260px;overflow-y:auto;box-sizing:border-box}.empty-state{padding:8px 12px;font-size:.9rem;color:#00000080}.option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:1rem;text-transform:uppercase;border-radius:4px;cursor:pointer;position:relative}.option-item:hover,.option-item.active{background-color:#0000000f}.option-item.selected{background-color:#1976d21f;font-weight:600}.option-item.selected.active{background-color:#1976d233}.option-item-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.check-icon{font-weight:700;font-size:.95rem;line-height:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -598,6 +823,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], isDisabled: [{
                 type: Input
+            }], inputHeigth: [{
+                type: Input
+            }], checkIcon: [{
+                type: Input
+            }], showCheckIcon: [{
+                type: Input
+            }], isLucideCheckIcon: [{
+                type: Input
             }], itemSelected: [{
                 type: Output
             }], blurEvent: [{
@@ -608,9 +841,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Output
             }], trailingIconClick: [{
                 type: Output
-            }], autocompleteTrigger: [{
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl']
+            }], wrapperEl: [{
+                type: ViewChild,
+                args: ['wrapper', { static: true }]
+            }], panelTemplate: [{
                 type: ViewChild,
-                args: [MatAutocompleteTrigger]
+                args: ['panel', { static: true }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class CaoDropDownComponent {
@@ -877,7 +1119,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$1.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: 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoDropDownComponent, decorators: [{
             type: Component,
@@ -1214,7 +1456,7 @@ class TimePicker {
         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: i4.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$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$2.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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePicker, decorators: [{
             type: Component,
@@ -2189,7 +2431,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$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.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: 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, decorators: [{
             type: Component,
@@ -2652,7 +2894,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$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.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$1.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: 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, decorators: [{
             type: Component,