ngx-opalbytes-components 1.16.1 → 1.18.0

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
-import { CommonModule, NgOptimizedImage, isPlatformBrowser, NgTemplateOutlet } 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, Injectable, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding } 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 * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -16,7 +16,7 @@ import * as i4 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, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest, startWith, map, Subscription, Subject } from 'rxjs';
 import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -73,11 +73,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 +88,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 +119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], strokeWidthIcon: [{
                 type: Input
+            }], minTextToTooltip: [{
+                type: Input
             }] } });
 
 class CaoBaseInput {
@@ -1233,696 +1236,559 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Output
             }] } });
 
-class BaseModalService {
-    constructor() { }
-    toggleModalEvent = new EventEmitter();
-    closeAllModalsEvent = new EventEmitter();
-    openModal = new EventEmitter();
-    modalResultSubject = new Subject();
-    emitModalResult(result) {
-        this.modalResultSubject.next(result);
-    }
-    onModalResult() {
-        return this.modalResultSubject.asObservable();
-    }
-    toggleModal(modalInfo) {
-        this.toggleModalEvent.emit(modalInfo);
-    }
-    closeAllModals() {
-        this.closeAllModalsEvent.emit(true);
-    }
-    showModal(_selectedModal, data) {
-        this.closeAllModals();
-        const modalInfo = {
-            type: _selectedModal,
-            data: data,
-            status: true,
-        };
-        this.openModal.emit(modalInfo);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, providedIn: "root" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [], propDecorators: { toggleModalEvent: [{
-                type: Output
-            }], closeAllModalsEvent: [{
-                type: Output
-            }], openModal: [{
-                type: Output
-            }] } });
-
-class BaseModal {
-    showModal = false;
+class StepComponent {
     title = "";
-    data;
-    modalTypeClass = "default";
-    modalClass = "modal-default";
-    modalSize = "w-70";
-    closeOnOverlayClick = false;
-    modalService = inject(BaseModalService);
-    closeModals() { }
-    closeModalsWithoutDialog() {
-        this.modalService.closeAllModals();
-    }
-    onOverlayClick() {
-        if (this.closeOnOverlayClick) {
-            this.closeModals();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BaseModal, isStandalone: true, selector: "cao-modal", inputs: { showModal: "showModal", title: "title", data: "data", modalTypeClass: "modalTypeClass", modalClass: "modalClass", modalSize: "modalSize", closeOnOverlayClick: "closeOnOverlayClick" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n  (click)=\"onOverlayClick()\">\n  <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n    (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    isActive = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: StepComponent, isStandalone: true, selector: "cao-step", inputs: { title: "title", isActive: "isActive" }, ngImport: i0, template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cao-modal', imports: [CommonModule], template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n  (click)=\"onOverlayClick()\">\n  <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n    (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"] }]
-        }], propDecorators: { showModal: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], modalTypeClass: [{
-                type: Input
-            }], modalClass: [{
-                type: Input
-            }], modalSize: [{
+            args: [{ selector: "cao-step", standalone: true, imports: [CommonModule], template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"] }]
+        }], propDecorators: { title: [{
                 type: Input
-            }], closeOnOverlayClick: [{
+            }], isActive: [{
                 type: Input
             }] } });
 
-class BaseDialog {
-    config;
-    closeDialog = this.noop;
-    iconPaths = {
-        success: "https://placehold.co/600x400",
-        error: "https://placehold.co/600x400",
-        info: "https://placehold.co/600x400",
-        warning: "https://placehold.co/600x400",
-    };
-    noop() {
-        return;
+class StepperComponent {
+    constructor() { }
+    steps;
+    title;
+    activeStepIndex = 0;
+    lengthStep = 0;
+    showLine = true;
+    maxReachedEvent = new EventEmitter();
+    ngAfterContentInit() {
+        if (this.steps.length > 0) {
+            this.steps.toArray()[0].isActive = true;
+            this.lengthStep = this.steps.length;
+        }
     }
-    getIconPath() {
-        return this.iconPaths[this.config.type];
+    nextStep() {
+        if (this.steps.length > 0) {
+            if (this.activeStepIndex < this.steps.length - 1) {
+                this.activeStepIndex++;
+                this.steps.toArray()[this.activeStepIndex].isActive = true;
+            }
+            else {
+                this.maxReachedEvent.emit(null);
+            }
+        }
     }
-    handleConfirm() {
-        this.config.onConfirm?.();
-        this.closeDialog();
+    prevStep() {
+        if (this.steps.length > 0) {
+            if (this.activeStepIndex > 0) {
+                this.steps.toArray()[this.activeStepIndex].isActive = false;
+                this.activeStepIndex--;
+                this.steps.toArray()[this.activeStepIndex].isActive = true;
+            }
+        }
     }
-    handleCancel() {
-        this.config.onCancel?.();
-        this.closeDialog();
+    resetStepper() {
+        this.activeStepIndex = 0;
+        this.steps.forEach((step) => (step.isActive = false));
+        if (this.steps.length > 0) {
+            this.steps.toArray()[0].isActive = true;
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseDialog, isStandalone: true, selector: "cao-dialog", inputs: { config: "config" }, ngImport: i0, template: "\n<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [fill]=\"true\" [ngSrc]=\"config.logoIcon ?? ''\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\" [ngClass]=\"config.type\">\n        <div class=\"title\">{{ config.title }}</div>\n        <div class=\"message\">{{ config.message }}</div>\n        <div class=\"button-container\">\n          @if (config.cancelButtonText) {\n          <button\n            type=\"button\"\n            class=\"cancel-button\"\n            [attr.data-cy]=\"config.cancelButtonText\"\n            (keydown)=\"handleCancel()\"\n            (click)=\"handleCancel()\">\n            {{ config.cancelButtonText }}\n          </button>\n          } @if (config.confirmButtonText) {\n          <button\n            type=\"button\"\n            class=\"confirm-button\"\n            [ngClass]=\"config.type\"\n            [attr.data-cy]=\"config.confirmButtonText\"\n            (click)=\"handleConfirm()\"\n            (keydown)=\"handleConfirm()\"\n            >\n            {{ config.confirmButtonText }}\n          </button>\n          }\n        </div>\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Dialog Icon\" class=\"alert-icon\" [fill]=\"true\" [ngSrc]=\"getIconPath()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: StepperComponent, isStandalone: true, selector: "cao-stepper", inputs: { title: "title" }, outputs: { maxReachedEvent: "maxReachedEvent" }, queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n  @if (showLine) {\n  <div class=\"line\"></div>\n  }\n  <div class=\"steps d-flex aic jcsb\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cao-dialog', imports: [CommonModule, NgOptimizedImage], template: "\n<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [fill]=\"true\" [ngSrc]=\"config.logoIcon ?? ''\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\" [ngClass]=\"config.type\">\n        <div class=\"title\">{{ config.title }}</div>\n        <div class=\"message\">{{ config.message }}</div>\n        <div class=\"button-container\">\n          @if (config.cancelButtonText) {\n          <button\n            type=\"button\"\n            class=\"cancel-button\"\n            [attr.data-cy]=\"config.cancelButtonText\"\n            (keydown)=\"handleCancel()\"\n            (click)=\"handleCancel()\">\n            {{ config.cancelButtonText }}\n          </button>\n          } @if (config.confirmButtonText) {\n          <button\n            type=\"button\"\n            class=\"confirm-button\"\n            [ngClass]=\"config.type\"\n            [attr.data-cy]=\"config.confirmButtonText\"\n            (click)=\"handleConfirm()\"\n            (keydown)=\"handleConfirm()\"\n            >\n            {{ config.confirmButtonText }}\n          </button>\n          }\n        </div>\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Dialog Icon\" class=\"alert-icon\" [fill]=\"true\" [ngSrc]=\"getIconPath()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\n"] }]
-        }], propDecorators: { config: [{
+            args: [{ selector: "cao-stepper", standalone: true, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n  @if (showLine) {\n  <div class=\"line\"></div>\n  }\n  <div class=\"steps d-flex aic jcsb\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{
+                type: ContentChildren,
+                args: [StepComponent]
+            }], title: [{
                 type: Input
+            }], maxReachedEvent: [{
+                type: Output
             }] } });
 
-class BaseDialogService {
-    overlay;
-    constructor(overlay) {
-        this.overlay = overlay;
-    }
-    open(config) {
-        const overlayRef = this.overlay.create({
-            hasBackdrop: true,
-            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            backdropClass: "dialog-backdrop",
-        });
-        const dialogPortal = new ComponentPortal(this.generateComponentPortal());
-        const componentRef = overlayRef.attach(dialogPortal);
-        componentRef.instance.config = config;
-        componentRef.instance.closeDialog = () => {
-            overlayRef.dispose();
-        };
-        return overlayRef;
-    }
-    generateComponentPortal() {
-        return BaseDialog;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, providedIn: "root" });
+class CaoTabContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabContentDirective, isStandalone: true, selector: "[caoTabContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: "root",
+                    selector: '[caoTabContent]',
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$4.Overlay }] });
+        }] });
 
-class BaseFilterTableService {
-    filterSubject = new Subject();
-    filter$ = this.filterSubject.asObservable();
-    updateFilter(filterValue) {
-        this.filterSubject.next(filterValue);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, providedIn: "root" });
+class CaoTabLabelDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabLabelDirective, isStandalone: true, selector: "[caoTabLabel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: "root",
+                    selector: '[caoTabLabel]',
+                    standalone: true,
                 }]
         }] });
 
-class BaseTableService {
-    tableConfigSubject = new BehaviorSubject(null);
-    dataSubject = new BehaviorSubject([]);
-    columnsSubject = new BehaviorSubject([]);
-    tableConfig$ = this.tableConfigSubject.asObservable();
-    columns$ = this.columnsSubject.asObservable();
-    data$ = this.dataSubject.asObservable();
-    visibleColumns$ = this.columns$.pipe(map((columns) => columns.filter((col) => col.visible).map((col) => col.key || col.element || "")));
-    createTable(data, columns, customConfig) {
-        const tableConfig = {
-            columns: columns ? columns.map((col) => col.key || col.element || "") : [],
-            data,
-            columnData: {},
-            result: {
-                noData: "Não há dados para o filtro selecionado.",
-                defaultMessage: "Nenhum resultado encontrado.",
-            },
-            ...customConfig,
-        };
-        if (data.length > 0 && columns) {
-            const columnData = {};
-            columns.forEach((col) => {
-                columnData[col.key || col.element || ""] = {
-                    ...col,
-                    type: col.type || this.inferColumnType(data[0][col.key || col.element || ""]),
-                    visible: col.visible !== undefined ? col.visible : true,
-                };
-            });
-            tableConfig.columnData = columnData;
-        }
-        else if (data.length === 0 && columns) {
-            const columnData = {};
-            columns.forEach((col) => {
-                columnData[col.key || col.element || ""] = {
-                    ...col,
-                    type: col.type || "STRING",
-                    visible: col.visible !== undefined ? col.visible : true,
-                };
-            });
-            tableConfig.columnData = columnData;
-        }
-        this.tableConfigSubject.next(tableConfig);
-        this.columnsSubject.next(columns || []);
-        this.dataSubject.next(data);
-    }
-    inferColumnType(value) {
-        if (value === null || value === undefined) {
-            return "STRING";
-        }
-        switch (typeof value) {
-            case "boolean":
-                return "BOOLEAN";
-            case "number":
-                return "NUMBER";
-            case "string":
-                return this.isValidDate(value) ? "DATE" : "STRING";
-            default:
-                return "STRING";
-        }
-    }
-    isValidDate(value) {
-        return !isNaN(Date.parse(value));
-    }
-    toggleColumnVisibility(columnKey) {
-        const currentColumns = this.columnsSubject.value;
-        const updatedColumns = currentColumns.map((col) => col.key === columnKey || col.element === columnKey ? { ...col, visible: !col.visible } : col);
-        const currentConfig = this.tableConfigSubject.value;
-        if (currentConfig) {
-            const updatedColumnData = { ...currentConfig.columnData };
-            const columnToUpdate = Object.keys(updatedColumnData).find((key) => key === columnKey);
-            if (columnToUpdate) {
-                updatedColumnData[columnToUpdate].visible = !updatedColumnData[columnToUpdate].visible;
-                this.tableConfigSubject.next({
-                    ...currentConfig,
-                    columnData: updatedColumnData,
-                });
-            }
-        }
-        this.columnsSubject.next(updatedColumns);
-    }
-    getVisibleColumns() {
-        return this.columnsSubject.value.filter((col) => col.visible);
-    }
-    setColumns(columns) {
-        const currentConfig = this.tableConfigSubject.value;
-        if (currentConfig) {
-            const columnData = {};
-            columns.forEach((col) => {
-                columnData[col.key || col.element || ""] = col;
-            });
-            this.tableConfigSubject.next({
-                ...currentConfig,
-                columns: columns.map((col) => col.key || col.element || ""),
-                columnData,
-            });
-        }
-        this.columnsSubject.next(columns);
-    }
-    setData(data) {
-        this.dataSubject.next(data);
-        const currentConfig = this.tableConfigSubject.value;
-        if (currentConfig) {
-            this.tableConfigSubject.next({
-                ...currentConfig,
-                data,
-            });
-        }
-    }
-    updateTableData(data) {
-        this.setData(data);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, providedIn: "root" });
+class CaoTabPanel {
+    label = '';
+    isLucideIcon = true;
+    trailingIcon = null;
+    leadingIcon = null;
+    isDisabled = false;
+    labelTemplate;
+    lazyContent;
+    content;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabPanel, isStandalone: true, selector: "cao-tab-panel", inputs: { label: "label", isLucideIcon: "isLucideIcon", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isDisabled: "isDisabled" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CaoTabLabelDirective, descendants: true, read: TemplateRef }, { propertyName: "lazyContent", first: true, predicate: CaoTabContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "content", first: true, predicate: ["implicitContent"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #implicitContent>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-tab-panel", imports: [], template: `
+    <ng-template #implicitContent>
+      <ng-content />
+    </ng-template>
+  ` }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], isLucideIcon: [{
+                type: Input
+            }], trailingIcon: [{
+                type: Input
+            }], leadingIcon: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], labelTemplate: [{
+                type: ContentChild,
+                args: [CaoTabLabelDirective, { read: TemplateRef }]
+            }], lazyContent: [{
+                type: ContentChild,
+                args: [CaoTabContentDirective, { read: TemplateRef }]
+            }], content: [{
+                type: ViewChild,
+                args: ['implicitContent', { static: true }]
+            }] } });
 
-function getPtBrPaginatorIntlBaseTable() {
-    const paginatorIntl = new MatPaginatorIntl();
-    paginatorIntl.itemsPerPageLabel = "Itens por página:";
-    paginatorIntl.nextPageLabel = "Próxima página";
-    paginatorIntl.previousPageLabel = "Página anterior";
-    paginatorIntl.firstPageLabel = "Primeira página";
-    paginatorIntl.lastPageLabel = "Última página";
-    paginatorIntl.getRangeLabel = (page, pageSize, length) => {
-        if (length === 0 || pageSize === 0) {
-            return `0 de ${length}`;
-        }
-        const startIndex = page * pageSize;
-        const endIndex = Math.min(startIndex + pageSize, length);
-        return `${startIndex + 1} – ${endIndex} de ${length}`;
-    };
-    return paginatorIntl;
-}
-class BaseTable {
-    customClass = "";
-    pageSizeOptions = [5, 10, 20, 50];
-    showFirstLastButtons = true;
-    isPaginatedByServer = false;
-    pageChanged = new EventEmitter();
-    pageSizeChanged = new EventEmitter();
-    firstPageClicked = new EventEmitter();
-    lastPageClicked = new EventEmitter();
-    selectionChanged = new EventEmitter();
-    pageEvent = new EventEmitter();
-    dataSource = new MatTableDataSource([]);
-    selection = new SelectionModel(true, []);
-    allColumns = [];
-    displayedColumns = [];
-    filterValue = "";
-    configSubscription = null;
-    visibleColumnsSubscription = null;
-    dataSubscription = null;
-    filterSubscription = null;
-    tableConfig = null;
-    sort;
-    paginator;
-    totalItems = 0;
-    pageSize = 10;
-    currentPage = 1;
-    previousPage = 1;
-    getAllColumns() {
-        return ["select", ...this.displayedColumns];
+class CaoTabGroup {
+    get _hostStyles() {
+        return {
+            '--cao-tab-label-height': this.labelHeight,
+            '--cao-tab-label-px': this.labelPaddingX,
+            '--cao-tab-label-gap': this.labelGap,
+            '--cao-tab-color-text': this.colorText,
+            '--cao-tab-color-active': this.colorActive,
+            '--cao-tab-color-hover-bg': this.colorHoverBg,
+            '--cao-tab-color-disabled': this.colorDisabled,
+            '--cao-tab-color-ink-bar': this.colorInkBar,
+            '--cao-tab-color-header-border': this.colorHeaderBorder,
+            '--cao-tab-ink-bar-height': this.inkBarHeight,
+            '--cao-tab-content-pt': this.contentPaddingTop,
+            '--cao-tab-radius': this.labelRadius,
+        };
     }
-    tableService = inject(BaseTableService);
-    liveAnnouncer = inject(LiveAnnouncer);
-    filterTableService = inject(BaseFilterTableService);
-    constructor() {
-        this.initializeSortingAccessor();
-        this.initializeFilterPredicate();
+    set selectedIndex(val) {
+        this.selectIndex(val, false);
     }
-    ngOnInit() {
-        this.configSubscription = this.tableService.tableConfig$.subscribe((config) => {
-            if (config) {
-                this.tableConfig = config;
-                this.allColumns = config.columns;
-            }
-        });
-        this.visibleColumnsSubscription = this.tableService.visibleColumns$.subscribe((visibleColumns) => {
-            this.displayedColumns = visibleColumns.filter((col) => col !== "select");
-        });
-        this.dataSubscription = this.tableService.data$.subscribe((data) => {
-            this.dataSource.data = data;
-            this.updateTotalItems();
-        });
-        this.filterSubscription = this.filterTableService.filter$.subscribe((filterValue) => {
-            this.filterValue = filterValue;
-            this.applyFilter();
-        });
+    get selectedIndex() {
+        return this.activeIndex();
     }
-    ngAfterViewInit() {
-        this.dataSource.sort = this.sort;
-        // Connect paginator if available
-        setTimeout(() => {
-            if (this.paginator) {
-                this.dataSource.paginator = this.paginator;
-                this.paginator.pageIndex = this.currentPage - 1;
-                this.paginator.pageSize = this.pageSize;
-                this.paginator.showFirstLastButtons = this.showFirstLastButtons;
-            }
-        });
-        this.selection.changed.subscribe(() => {
-            this.selectionChanged.emit(this.selection.selected);
-        });
+    labelHeight = '48px';
+    labelPaddingX = '16px';
+    labelGap = '6px';
+    colorText = '#6b7280';
+    colorActive = '#4f46e5';
+    colorHoverBg = '#f3f4f6';
+    colorDisabled = '#d1d5db';
+    colorInkBar = '#4f46e5';
+    colorHeaderBorder = '#e5e7eb';
+    inkBarHeight = '2px';
+    contentPaddingTop = '20px';
+    labelRadius = '4px';
+    animationDuration = '300ms';
+    dynamicHeight = false;
+    labelAlign = 'start';
+    iconColorActive = '';
+    iconColorInactive = '';
+    strokeWidthIcon = 1;
+    selectedTabChange = new EventEmitter();
+    focusChange = new EventEmitter();
+    tabs;
+    tabBtns;
+    inkBar;
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    activatedSet = new Set();
+    tabList = [];
+    subs = new Subscription();
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    ngAfterContentInit() {
+        this.tabList = this.tabs.toArray();
+        this.activatedSet.add(this.activeIndex());
+        this.subs.add(this.tabs.changes.subscribe(() => {
+            this.tabList = this.tabs.toArray();
+            const safe = Math.min(this.activeIndex(), this.tabList.length - 1);
+            this.activeIndex.set(Math.max(0, safe));
+            this.scheduleInkBar();
+        }));
+        this.scheduleInkBar();
     }
     ngOnDestroy() {
-        this.configSubscription?.unsubscribe();
-        this.visibleColumnsSubscription?.unsubscribe();
-        this.dataSubscription?.unsubscribe();
-        this.filterSubscription?.unsubscribe();
+        this.subs.unsubscribe();
     }
-    initializeSortingAccessor() {
-        this.dataSource.sortingDataAccessor = (item, property) => {
-            const value = item[property];
-            if (typeof value === "string") {
-                return value.toLowerCase();
-            }
-            else if (typeof value === "number") {
-                return value;
-            }
-            else if (typeof value === "boolean") {
-                return value ? 1 : 0;
-            }
-            else if (value instanceof Date) {
-                return value.valueOf();
-            }
-            else if (value === null) {
-                return "";
-            }
-            else if (value === undefined) {
-                return undefined;
-            }
-            else if (typeof value === "object") {
-                return value.toString();
-            }
-            return value;
-        };
+    selectTab(index) {
+        this.selectIndex(index, true);
     }
-    initializeFilterPredicate() {
-        this.dataSource.filterPredicate = (data, filter) => {
-            const searchTerms = filter.trim().toLowerCase();
-            if (!searchTerms) {
-                return true;
-            }
-            const dataStr = Object.keys(data).reduce((currentTerm, key) => {
-                const value = data[key];
-                return (currentTerm +
-                    (value !== null && value !== undefined ? value.toString().toLowerCase() : ""));
-            }, "");
-            return dataStr.indexOf(searchTerms) !== -1;
-        };
+    get activeTab() {
+        return this.tabList[this.activeIndex()] ?? null;
     }
-    applyFilter() {
-        const normalizedFilter = this.filterValue.trim().toLowerCase();
-        this.dataSource.filter = normalizedFilter;
+    isActive(index) {
+        return this.activeIndex() === index;
     }
-    toggleColumnVisibility(columnKey) {
-        this.tableService.toggleColumnVisibility(columnKey);
+    wasActivated(index) {
+        return this.activatedSet.has(index);
     }
-    isColumnVisible(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return true;
+    onTabClick(index) {
+        if (this.tabList[index]?.isDisabled) {
+            return;
         }
-        return this.tableConfig.columnData[column].visible !== false;
+        this.selectIndex(index, true);
     }
-    getColumnHeader(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return column;
+    onKeydown(event, currentIndex) {
+        let next = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = this.nextEnabled(currentIndex, 1);
+                break;
+            case 'ArrowLeft':
+                next = this.nextEnabled(currentIndex, -1);
+                break;
+            case 'Home':
+                next = this.nextEnabled(-1, 1);
+                break;
+            case 'End':
+                next = this.nextEnabled(this.tabList.length, -1);
+                break;
+            default: return;
         }
-        return this.tableConfig.columnData[column].header || column;
+        event.preventDefault();
+        this.selectIndex(next, true);
+        this.focusTab(next);
     }
-    getColumnType(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return "STRING";
-        }
-        return this.tableConfig.columnData[column].type || "STRING";
+    onFocus(index) {
+        this.focusChange.emit(index);
     }
-    getColumnElement(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return column;
+    nextEnabled(from, dir) {
+        const tabs = this.tabList;
+        let idx = from + dir;
+        while (idx >= 0 && idx < tabs.length) {
+            if (!tabs[idx].isDisabled) {
+                return idx;
+            }
+            idx += dir;
         }
-        return this.tableConfig.columnData[column].element || column;
+        return from;
     }
-    getColumnButtons(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return [];
+    selectIndex(index, emit) {
+        if (!this.tabList) {
+            this.activeIndex.set(Math.max(0, index));
+            return;
         }
-        return this.tableConfig.columnData[column].buttons || [];
-    }
-    isAllSelected() {
-        if (!this.paginator ||
-            !this.dataSource.filteredData ||
-            this.dataSource.filteredData.length === 0) {
-            return false;
+        const clamped = Math.max(0, Math.min(index, this.tabList.length - 1));
+        const previous = this.activeIndex();
+        if (clamped === previous && emit) {
+            return;
         }
-        const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-        const endIndex = Math.min(startIndex + this.paginator.pageSize, this.dataSource.filteredData.length);
-        const currentPageData = this.dataSource.filteredData.slice(startIndex, endIndex);
-        if (currentPageData.length === 0) {
-            return false;
+        this.activeIndex.set(clamped);
+        this.activatedSet.add(clamped);
+        if (emit) {
+            this.selectedTabChange.emit({
+                previousIndex: previous,
+                index: clamped,
+                tab: this.tabList[clamped],
+            });
         }
-        return currentPageData.every((row) => this.selection.isSelected(row));
+        this.scheduleInkBar();
     }
-    toggleAllRows() {
-        if (!this.paginator || !this.dataSource.filteredData) {
+    focusTab(index) {
+        this.tabBtns?.toArray()[index]?.nativeElement?.focus();
+    }
+    scheduleInkBar() {
+        if (!this.isBrowser) {
             return;
         }
-        if (this.isAllSelected()) {
-            this.selection.clear();
-        }
-        else {
-            const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-            const endIndex = Math.min(startIndex + this.paginator.pageSize, this.dataSource.filteredData.length);
-            const currentPageData = this.dataSource.filteredData.slice(startIndex, endIndex);
-            currentPageData.forEach((row) => this.selection.select(row));
-        }
+        requestAnimationFrame(() => this.updateInkBar());
     }
-    announceSortChange(sortState) {
-        if (sortState.direction) {
-            this.liveAnnouncer.announce(`Ordenado ${sortState.direction === "asc" ? "ascendente" : "descendente"}`);
+    updateInkBar() {
+        const btns = this.tabBtns?.toArray();
+        const bar = this.inkBar?.nativeElement;
+        if (!btns || !bar) {
+            return;
         }
-        else {
-            this.liveAnnouncer.announce("Ordenação removida");
+        const btn = btns[this.activeIndex()]?.nativeElement;
+        if (!btn) {
+            return;
         }
+        bar.style.width = `${btn.offsetWidth}px`;
+        bar.style.transform = `translateX(${btn.offsetLeft}px)`;
+        bar.style.transitionDuration = this.animationDuration;
     }
-    trackByFn(index, item) {
-        return item;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoTabGroup, isStandalone: true, selector: "cao-tab-group", inputs: { selectedIndex: "selectedIndex", labelHeight: "labelHeight", labelPaddingX: "labelPaddingX", labelGap: "labelGap", colorText: "colorText", colorActive: "colorActive", colorHoverBg: "colorHoverBg", colorDisabled: "colorDisabled", colorInkBar: "colorInkBar", colorHeaderBorder: "colorHeaderBorder", inkBarHeight: "inkBarHeight", contentPaddingTop: "contentPaddingTop", labelRadius: "labelRadius", animationDuration: "animationDuration", dynamicHeight: "dynamicHeight", labelAlign: "labelAlign", iconColorActive: "iconColorActive", iconColorInactive: "iconColorInactive", strokeWidthIcon: "strokeWidthIcon" }, outputs: { selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { properties: { "style": "this._hostStyles" }, classAttribute: "cao-tab-group" }, queries: [{ propertyName: "tabs", predicate: CaoTabPanel }], viewQueries: [{ propertyName: "inkBar", first: true, predicate: ["inkBar"], descendants: true }, { propertyName: "tabBtns", predicate: ["tabBtn"], descendants: true }], ngImport: i0, template: "<div\n  #header\n  [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n  <div class=\"cao-tab-label-list\" role=\"tablist\">\n    @for (tab of tabList; track $index; let i = $index) {\n      <button\n        #tabBtn\n        role=\"tab\"\n        type=\"button\"\n        class=\"cao-tab-label\"\n        [class.cao-tab-label--active]=\"isActive(i)\"\n        [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n        [attr.aria-selected]=\"isActive(i)\"\n        [attr.aria-disabled]=\"tab.isDisabled || null\"\n        [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n        [attr.id]=\"'cao-tab-label-' + i\"\n        [attr.aria-controls]=\"'cao-tab-content-' + i\"\n        (click)=\"onTabClick(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n        (focus)=\"onFocus(i)\"\n      >\n        @if (tab.leadingIcon) {\n        <span class=\"leading-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n            }\n        </span>\n        }\n\n        @if (tab.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n        } @else {\n          <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n        }\n\n        @if (tab.trailingIcon) {\n        <span class=\"trailing-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n            }\n        </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Ink bar animado -->\n  <div class=\"cao-tab-ink-bar-track\">\n    <div #inkBar class=\"cao-tab-ink-bar\"></div>\n  </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n  class=\"cao-tab-body-wrapper\"\n  [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n  @for (tab of tabList; track $index; let i = $index) {\n    <div\n      role=\"tabpanel\"\n      class=\"cao-tab-body\"\n      [class.cao-tab-body--active]=\"isActive(i)\"\n      [attr.id]=\"'cao-tab-content-' + i\"\n      [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n      [attr.aria-hidden]=\"!isActive(i)\"\n      [style.--cao-tab-anim-duration]=\"animationDuration\"\n    >\n      <div class=\"cao-tab-bodycontent\">\n        @if (tab.lazyContent) {\n          @if (isActive(i) || wasActivated(i)) {\n            <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n          }\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"tab.content\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--cao-tab-label-height: 48px;--cao-tab-Label-px: 16px;--cao-tab-Label-gap: 6px;--cao-tab-color-text: #6b7280;--cao-tab-color-active: #4f46e5;--cao-tab-color-hover-bg: #f3f4f6;--cao-tab-color-disabled: #d1d5db;--cao-tab-color-ink-bar: #4f46e5;--cao-tab-color-header-border: #e5e7eb;--cao-tab-ink-bar-height: 2px;--cao-tab-content-pt: 20px;--cao-tab-radius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{width:100%;display:inline-flex;justify-content:center;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-tab-group', standalone: true, imports: [NgTemplateOutlet, LucideDynamicIcon], host: { class: 'cao-tab-group' }, template: "<div\n  #header\n  [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n  <div class=\"cao-tab-label-list\" role=\"tablist\">\n    @for (tab of tabList; track $index; let i = $index) {\n      <button\n        #tabBtn\n        role=\"tab\"\n        type=\"button\"\n        class=\"cao-tab-label\"\n        [class.cao-tab-label--active]=\"isActive(i)\"\n        [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n        [attr.aria-selected]=\"isActive(i)\"\n        [attr.aria-disabled]=\"tab.isDisabled || null\"\n        [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n        [attr.id]=\"'cao-tab-label-' + i\"\n        [attr.aria-controls]=\"'cao-tab-content-' + i\"\n        (click)=\"onTabClick(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n        (focus)=\"onFocus(i)\"\n      >\n        @if (tab.leadingIcon) {\n        <span class=\"leading-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n            }\n        </span>\n        }\n\n        @if (tab.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n        } @else {\n          <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n        }\n\n        @if (tab.trailingIcon) {\n        <span class=\"trailing-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n            }\n        </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Ink bar animado -->\n  <div class=\"cao-tab-ink-bar-track\">\n    <div #inkBar class=\"cao-tab-ink-bar\"></div>\n  </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n  class=\"cao-tab-body-wrapper\"\n  [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n  @for (tab of tabList; track $index; let i = $index) {\n    <div\n      role=\"tabpanel\"\n      class=\"cao-tab-body\"\n      [class.cao-tab-body--active]=\"isActive(i)\"\n      [attr.id]=\"'cao-tab-content-' + i\"\n      [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n      [attr.aria-hidden]=\"!isActive(i)\"\n      [style.--cao-tab-anim-duration]=\"animationDuration\"\n    >\n      <div class=\"cao-tab-bodycontent\">\n        @if (tab.lazyContent) {\n          @if (isActive(i) || wasActivated(i)) {\n            <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n          }\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"tab.content\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--cao-tab-label-height: 48px;--cao-tab-Label-px: 16px;--cao-tab-Label-gap: 6px;--cao-tab-color-text: #6b7280;--cao-tab-color-active: #4f46e5;--cao-tab-color-hover-bg: #f3f4f6;--cao-tab-color-disabled: #d1d5db;--cao-tab-color-ink-bar: #4f46e5;--cao-tab-color-header-border: #e5e7eb;--cao-tab-ink-bar-height: 2px;--cao-tab-content-pt: 20px;--cao-tab-radius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{width:100%;display:inline-flex;justify-content:center;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"] }]
+        }], propDecorators: { _hostStyles: [{
+                type: HostBinding,
+                args: ['style']
+            }], selectedIndex: [{
+                type: Input
+            }], labelHeight: [{
+                type: Input
+            }], labelPaddingX: [{
+                type: Input
+            }], labelGap: [{
+                type: Input
+            }], colorText: [{
+                type: Input
+            }], colorActive: [{
+                type: Input
+            }], colorHoverBg: [{
+                type: Input
+            }], colorDisabled: [{
+                type: Input
+            }], colorInkBar: [{
+                type: Input
+            }], colorHeaderBorder: [{
+                type: Input
+            }], inkBarHeight: [{
+                type: Input
+            }], contentPaddingTop: [{
+                type: Input
+            }], labelRadius: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], dynamicHeight: [{
+                type: Input
+            }], labelAlign: [{
+                type: Input
+            }], iconColorActive: [{
+                type: Input
+            }], iconColorInactive: [{
+                type: Input
+            }], strokeWidthIcon: [{
+                type: Input
+            }], selectedTabChange: [{
+                type: Output
+            }], focusChange: [{
+                type: Output
+            }], tabs: [{
+                type: ContentChildren,
+                args: [CaoTabPanel]
+            }], tabBtns: [{
+                type: ViewChildren,
+                args: ['tabBtn']
+            }], inkBar: [{
+                type: ViewChild,
+                args: ['inkBar']
+            }] } });
+
+class CaoBaseIcon {
+    imgSource = "";
+    isLucideIcon = true;
+    strokeWidthIcon = 1;
+    iconColor = "";
+    size = 32;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseIcon, isStandalone: true, selector: "cao-base-icon", inputs: { imgSource: "imgSource", isLucideIcon: "isLucideIcon", strokeWidthIcon: "strokeWidthIcon", iconColor: "iconColor", size: "size" }, ngImport: i0, template: "@if (imgSource) {\n    @if (isLucideIcon) {\n        <div class=\"icon\">\n            <svg [lucideIcon]=\"imgSource\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\" [size]=\"size\"></svg>\n        </div>\n    } @else {\n        <div class=\"icon\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"imgSource\" />\n        </div>\n    }\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-base-icon', imports: [CommonModule, LucideDynamicIcon], template: "@if (imgSource) {\n    @if (isLucideIcon) {\n        <div class=\"icon\">\n            <svg [lucideIcon]=\"imgSource\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\" [size]=\"size\"></svg>\n        </div>\n    } @else {\n        <div class=\"icon\">\n            <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"imgSource\" />\n        </div>\n    }\n}" }]
+        }], propDecorators: { imgSource: [{
+                type: Input
+            }], isLucideIcon: [{
+                type: Input
+            }], strokeWidthIcon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class BaseModalService {
+    constructor() { }
+    toggleModalEvent = new EventEmitter();
+    closeAllModalsEvent = new EventEmitter();
+    openModal = new EventEmitter();
+    modalResultSubject = new Subject();
+    emitModalResult(result) {
+        this.modalResultSubject.next(result);
     }
-    onPageChanged(page) {
-        this.currentPage = page;
-        this.pageChanged.emit(page);
-        if (this.paginator && this.paginator.pageIndex !== page - 1) {
-            this.paginator.pageIndex = page - 1;
-        }
+    onModalResult() {
+        return this.modalResultSubject.asObservable();
     }
-    onPageSizeChanged(pageSize) {
-        this.pageSize = pageSize;
-        this.pageSizeChanged.emit(pageSize);
-        if (this.paginator && this.paginator.pageSize !== pageSize) {
-            this.paginator.pageSize = pageSize;
-        }
+    toggleModal(modalInfo) {
+        this.toggleModalEvent.emit(modalInfo);
     }
-    /**
-     * Handle pagination events from Mat Paginator
-     */
-    onPageEvent(event) {
-        const newPage = event.pageIndex + 1;
-        const isFirstPage = newPage === 1 && this.previousPage !== 1;
-        const isLastPage = newPage === Math.ceil(this.totalItems / event.pageSize) && newPage !== this.previousPage;
-        // Handle page size changes
-        if (event.pageSize !== this.pageSize) {
-            this.onPageSizeChanged(event.pageSize);
-        }
-        // Handle page changes
-        if (newPage !== this.currentPage) {
-            this.previousPage = this.currentPage; // Store previous page for first/last detection
-            this.onPageChanged(newPage);
-            // Emit specific events for first/last page navigation
-            if (isFirstPage) {
-                this.firstPageClicked.emit();
-                this.liveAnnouncer.announce("Primeira página");
-            }
-            else if (isLastPage) {
-                this.lastPageClicked.emit();
-                this.liveAnnouncer.announce("Última página");
-            }
-        }
-        this.pageEvent.emit(event);
+    closeAllModals() {
+        this.closeAllModalsEvent.emit(true);
     }
-    /**
-     * Navigate to first page programmatically
-     */
-    goToFirstPage() {
-        if (this.currentPage !== 1) {
-            this.onPageChanged(1);
-            this.firstPageClicked.emit();
-            this.liveAnnouncer.announce("Primeira página");
-        }
+    showModal(_selectedModal, data) {
+        this.closeAllModals();
+        const modalInfo = {
+            type: _selectedModal,
+            data: data,
+            status: true,
+        };
+        this.openModal.emit(modalInfo);
     }
-    /**
-     * Navigate to last page programmatically
-     */
-    goToLastPage() {
-        const lastPage = Math.max(1, Math.ceil(this.totalItems / this.pageSize));
-        if (this.currentPage !== lastPage) {
-            this.onPageChanged(lastPage);
-            this.lastPageClicked.emit();
-            this.liveAnnouncer.announce("Última página");
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [], propDecorators: { toggleModalEvent: [{
+                type: Output
+            }], closeAllModalsEvent: [{
+                type: Output
+            }], openModal: [{
+                type: Output
+            }] } });
+
+class BaseModal {
+    showModal = false;
+    title = "";
+    data;
+    modalTypeClass = "default";
+    modalClass = "modal-default";
+    modalSize = "w-70";
+    closeOnOverlayClick = false;
+    modalService = inject(BaseModalService);
+    closeModals() { }
+    closeModalsWithoutDialog() {
+        this.modalService.closeAllModals();
     }
-    /**
-     * Update total items when data changes
-     */
-    updateTotalItems() {
-        if (this.isPaginatedByServer) {
-            return;
+    onOverlayClick() {
+        if (this.closeOnOverlayClick) {
+            this.closeModals();
         }
-        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BaseModal, isStandalone: true, selector: "cao-modal", inputs: { showModal: "showModal", title: "title", data: "data", modalTypeClass: "modalTypeClass", modalClass: "modalClass", modalSize: "modalSize", closeOnOverlayClick: "closeOnOverlayClick" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n  (click)=\"onOverlayClick()\">\n  <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n    (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, decorators: [{
             type: Component,
-            args: [{ selector: "cao-table", imports: [CommonModule, MaterialModule, NgOptimizedImage], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], 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"] }]
-        }], ctorParameters: () => [], propDecorators: { customClass: [{
+            args: [{ selector: 'cao-modal', imports: [CommonModule], template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n  (click)=\"onOverlayClick()\">\n  <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n    (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"] }]
+        }], propDecorators: { showModal: [{
                 type: Input
-            }], pageSizeOptions: [{
+            }], title: [{
                 type: Input
-            }], showFirstLastButtons: [{
+            }], data: [{
                 type: Input
-            }], isPaginatedByServer: [{
+            }], modalTypeClass: [{
+                type: Input
+            }], modalClass: [{
+                type: Input
+            }], modalSize: [{
+                type: Input
+            }], closeOnOverlayClick: [{
                 type: Input
-            }], pageChanged: [{
-                type: Output
-            }], pageSizeChanged: [{
-                type: Output
-            }], firstPageClicked: [{
-                type: Output
-            }], lastPageClicked: [{
-                type: Output
-            }], selectionChanged: [{
-                type: Output
-            }], pageEvent: [{
-                type: Output
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort]
-            }], paginator: [{
-                type: ViewChild,
-                args: [MatPaginator]
             }] } });
 
-class BaseFilterTablePaginatedService {
-    filterSubject = new Subject();
-    filter$ = this.filterSubject.asObservable();
-    updateFilter(filterValue) {
-        this.filterSubject.next(filterValue);
+class BaseDialog {
+    config;
+    closeDialog = this.noop;
+    iconPaths = {
+        success: "https://placehold.co/600x400",
+        error: "https://placehold.co/600x400",
+        info: "https://placehold.co/600x400",
+        warning: "https://placehold.co/600x400",
+    };
+    noop() {
+        return;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, providedIn: "root" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }] });
-
-class BasePaginationService {
-    pageSubject = new BehaviorSubject(1);
-    pageSizeSubject = new BehaviorSubject(10);
-    totalItemsSubject = new BehaviorSubject(0);
-    currentPage$ = this.pageSubject.asObservable();
-    pageSize$ = this.pageSizeSubject.asObservable();
-    totalItems$ = this.totalItemsSubject.asObservable();
-    constructor() { }
-    /**
-     * Sets the current page number
-     * @param page The page number to set
-     */
-    setPage(page) {
-        if (page !== this.pageSubject.value) {
-            this.pageSubject.next(page);
-        }
+    getIconPath() {
+        return this.iconPaths[this.config.type];
     }
-    /**
-     * Sets the page size
-     * @param size The page size to set
-     */
-    setPageSize(size) {
-        if (size !== this.pageSizeSubject.value) {
-            this.pageSizeSubject.next(size);
-        }
+    handleConfirm() {
+        this.config.onConfirm?.();
+        this.closeDialog();
     }
-    /**
-     * Sets the total number of items
-     * @param total The total number of items
-     */
-    setTotalItems(total) {
-        if (total !== this.totalItemsSubject.value) {
-            this.totalItemsSubject.next(total);
-        }
+    handleCancel() {
+        this.config.onCancel?.();
+        this.closeDialog();
     }
-    /**
-     * Gets the current page
-     */
-    getCurrentPage() {
-        return this.pageSubject.value;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseDialog, isStandalone: true, selector: "cao-dialog", inputs: { config: "config" }, ngImport: i0, template: "\n<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [fill]=\"true\" [ngSrc]=\"config.logoIcon ?? ''\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\" [ngClass]=\"config.type\">\n        <div class=\"title\">{{ config.title }}</div>\n        <div class=\"message\">{{ config.message }}</div>\n        <div class=\"button-container\">\n          @if (config.cancelButtonText) {\n          <button\n            type=\"button\"\n            class=\"cancel-button\"\n            [attr.data-cy]=\"config.cancelButtonText\"\n            (keydown)=\"handleCancel()\"\n            (click)=\"handleCancel()\">\n            {{ config.cancelButtonText }}\n          </button>\n          } @if (config.confirmButtonText) {\n          <button\n            type=\"button\"\n            class=\"confirm-button\"\n            [ngClass]=\"config.type\"\n            [attr.data-cy]=\"config.confirmButtonText\"\n            (click)=\"handleConfirm()\"\n            (keydown)=\"handleConfirm()\"\n            >\n            {{ config.confirmButtonText }}\n          </button>\n          }\n        </div>\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Dialog Icon\" class=\"alert-icon\" [fill]=\"true\" [ngSrc]=\"getIconPath()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-dialog', imports: [CommonModule, NgOptimizedImage], template: "\n<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [fill]=\"true\" [ngSrc]=\"config.logoIcon ?? ''\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\" [ngClass]=\"config.type\">\n        <div class=\"title\">{{ config.title }}</div>\n        <div class=\"message\">{{ config.message }}</div>\n        <div class=\"button-container\">\n          @if (config.cancelButtonText) {\n          <button\n            type=\"button\"\n            class=\"cancel-button\"\n            [attr.data-cy]=\"config.cancelButtonText\"\n            (keydown)=\"handleCancel()\"\n            (click)=\"handleCancel()\">\n            {{ config.cancelButtonText }}\n          </button>\n          } @if (config.confirmButtonText) {\n          <button\n            type=\"button\"\n            class=\"confirm-button\"\n            [ngClass]=\"config.type\"\n            [attr.data-cy]=\"config.confirmButtonText\"\n            (click)=\"handleConfirm()\"\n            (keydown)=\"handleConfirm()\"\n            >\n            {{ config.confirmButtonText }}\n          </button>\n          }\n        </div>\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Dialog Icon\" class=\"alert-icon\" [fill]=\"true\" [ngSrc]=\"getIconPath()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class BaseDialogService {
+    overlay;
+    constructor(overlay) {
+        this.overlay = overlay;
     }
-    /**
-     * Gets the current page size
-     */
-    getPageSize() {
-        return this.pageSizeSubject.value;
+    open(config) {
+        const overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            backdropClass: "dialog-backdrop",
+        });
+        const dialogPortal = new ComponentPortal(this.generateComponentPortal());
+        const componentRef = overlayRef.attach(dialogPortal);
+        componentRef.instance.config = config;
+        componentRef.instance.closeDialog = () => {
+            overlayRef.dispose();
+        };
+        return overlayRef;
     }
-    /**
-     * Gets the total number of items
-     */
-    getTotalItems() {
-        return this.totalItemsSubject.value;
+    generateComponentPortal() {
+        return BaseDialog;
     }
-    /**
-     * Resets pagination to default values
-     */
-    reset() {
-        this.pageSubject.next(1);
-        this.pageSizeSubject.next(10);
-        this.totalItemsSubject.next(0);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1$4.Overlay }] });
+
+class BaseFilterTableService {
+    filterSubject = new Subject();
+    filter$ = this.filterSubject.asObservable();
+    updateFilter(filterValue) {
+        this.filterSubject.next(filterValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class TablePaginatedService {
+class BaseTableService {
     tableConfigSubject = new BehaviorSubject(null);
     dataSubject = new BehaviorSubject([]);
     columnsSubject = new BehaviorSubject([]);
@@ -2033,17 +1899,17 @@ class TablePaginatedService {
     updateTableData(data) {
         this.setData(data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
                 }]
         }] });
 
-function getPtBrPaginatorIntlBasePaginated() {
+function getPtBrPaginatorIntlBaseTable() {
     const paginatorIntl = new MatPaginatorIntl();
     paginatorIntl.itemsPerPageLabel = "Itens por página:";
     paginatorIntl.nextPageLabel = "Próxima página";
@@ -2060,19 +1926,17 @@ function getPtBrPaginatorIntlBasePaginated() {
     };
     return paginatorIntl;
 }
-class BaseTablePaginated {
-    paginationSubscriptions = [];
-    getColumnCssClass;
+class BaseTable {
     customClass = "";
     pageSizeOptions = [5, 10, 20, 50];
     showFirstLastButtons = true;
+    isPaginatedByServer = false;
     pageChanged = new EventEmitter();
     pageSizeChanged = new EventEmitter();
     firstPageClicked = new EventEmitter();
     lastPageClicked = new EventEmitter();
     selectionChanged = new EventEmitter();
     pageEvent = new EventEmitter();
-    rowClicked = new EventEmitter();
     dataSource = new MatTableDataSource([]);
     selection = new SelectionModel(true, []);
     allColumns = [];
@@ -2089,21 +1953,16 @@ class BaseTablePaginated {
     pageSize = 10;
     currentPage = 1;
     previousPage = 1;
-    paginationService = inject(BasePaginationService);
-    tableService = inject(TablePaginatedService);
+    getAllColumns() {
+        return ["select", ...this.displayedColumns];
+    }
+    tableService = inject(BaseTableService);
     liveAnnouncer = inject(LiveAnnouncer);
-    filterTableService = inject(BaseFilterTablePaginatedService);
+    filterTableService = inject(BaseFilterTableService);
     constructor() {
         this.initializeSortingAccessor();
         this.initializeFilterPredicate();
     }
-    onPageChanged(page) {
-        this.currentPage = page;
-        this.pageChanged.emit(page);
-        if (this.paginator && this.paginator.pageIndex !== page - 1) {
-            this.paginator.pageIndex = page - 1;
-        }
-    }
     ngOnInit() {
         this.configSubscription = this.tableService.tableConfig$.subscribe((config) => {
             if (config) {
@@ -2122,73 +1981,27 @@ class BaseTablePaginated {
             this.filterValue = filterValue;
             this.applyFilter();
         });
-        this.paginationSubscriptions.push(this.paginationService.currentPage$.subscribe((page) => {
-            if (this.currentPage !== page) {
-                this.onPageChanged(page);
-            }
-        }), this.paginationService.pageSize$.subscribe((size) => {
-            if (this.pageSize !== size) {
-                this.onPageSizeChanged(size);
+    }
+    ngAfterViewInit() {
+        this.dataSource.sort = this.sort;
+        // Connect paginator if available
+        setTimeout(() => {
+            if (this.paginator) {
+                this.dataSource.paginator = this.paginator;
+                this.paginator.pageIndex = this.currentPage - 1;
+                this.paginator.pageSize = this.pageSize;
+                this.paginator.showFirstLastButtons = this.showFirstLastButtons;
             }
-        }));
+        });
+        this.selection.changed.subscribe(() => {
+            this.selectionChanged.emit(this.selection.selected);
+        });
     }
     ngOnDestroy() {
         this.configSubscription?.unsubscribe();
         this.visibleColumnsSubscription?.unsubscribe();
         this.dataSubscription?.unsubscribe();
         this.filterSubscription?.unsubscribe();
-        this.paginationSubscriptions.forEach((sub) => sub.unsubscribe());
-    }
-    updateTotalItems(newTotalItens) {
-        this.totalItems = newTotalItens ?? this.totalItems;
-        this.paginationService.setTotalItems(this.totalItems);
-        const lastPage = this.pageSize > 0 ? Math.ceil(this.totalItems / this.pageSize) : 1;
-        const lastValidPage = lastPage > 0 ? lastPage : 1;
-        if (this.currentPage > lastValidPage) {
-            this.paginationService.setPage(1);
-        }
-    }
-    onPageSizeChanged(pageSize) {
-        this.pageSize = pageSize;
-        this.pageSizeChanged.emit(pageSize);
-        if (this.paginator && this.paginator.pageSize !== pageSize) {
-            this.paginator.pageSize = pageSize;
-        }
-    }
-    getColumnHeader(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return column;
-        }
-        return this.tableConfig.columnData[column].header || column;
-    }
-    getColumnElement(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return column;
-        }
-        return this.tableConfig.columnData[column].element || column;
-    }
-    getColumnType(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return "STRING";
-        }
-        return this.tableConfig.columnData[column].type || "STRING";
-    }
-    announceSortChange(sortState) {
-        if (sortState.direction) {
-            this.liveAnnouncer.announce(`Ordenado ${sortState.direction === "asc" ? "ascendente" : "descendente"}`);
-        }
-        else {
-            this.liveAnnouncer.announce("Ordenação removida");
-        }
-    }
-    handlePageChange(event) {
-        this.pageSize = event.pageSize;
-        this.paginationService.setPageSize(event.pageSize);
-        this.pageChanged.emit(event.pageIndex);
-    }
-    applyFilter() {
-        const normalizedFilter = this.filterValue.trim().toLowerCase();
-        this.dataSource.filter = normalizedFilter;
     }
     initializeSortingAccessor() {
         this.dataSource.sortingDataAccessor = (item, property) => {
@@ -2231,9 +2044,99 @@ class BaseTablePaginated {
             return dataStr.indexOf(searchTerms) !== -1;
         };
     }
-    onRowClick(row) {
-        this.rowClicked.emit(row);
+    applyFilter() {
+        const normalizedFilter = this.filterValue.trim().toLowerCase();
+        this.dataSource.filter = normalizedFilter;
+    }
+    toggleColumnVisibility(columnKey) {
+        this.tableService.toggleColumnVisibility(columnKey);
+    }
+    isColumnVisible(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return true;
+        }
+        return this.tableConfig.columnData[column].visible !== false;
+    }
+    getColumnHeader(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return column;
+        }
+        return this.tableConfig.columnData[column].header || column;
+    }
+    getColumnType(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return "STRING";
+        }
+        return this.tableConfig.columnData[column].type || "STRING";
+    }
+    getColumnElement(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return column;
+        }
+        return this.tableConfig.columnData[column].element || column;
+    }
+    getColumnButtons(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return [];
+        }
+        return this.tableConfig.columnData[column].buttons || [];
+    }
+    isAllSelected() {
+        if (!this.paginator ||
+            !this.dataSource.filteredData ||
+            this.dataSource.filteredData.length === 0) {
+            return false;
+        }
+        const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+        const endIndex = Math.min(startIndex + this.paginator.pageSize, this.dataSource.filteredData.length);
+        const currentPageData = this.dataSource.filteredData.slice(startIndex, endIndex);
+        if (currentPageData.length === 0) {
+            return false;
+        }
+        return currentPageData.every((row) => this.selection.isSelected(row));
+    }
+    toggleAllRows() {
+        if (!this.paginator || !this.dataSource.filteredData) {
+            return;
+        }
+        if (this.isAllSelected()) {
+            this.selection.clear();
+        }
+        else {
+            const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+            const endIndex = Math.min(startIndex + this.paginator.pageSize, this.dataSource.filteredData.length);
+            const currentPageData = this.dataSource.filteredData.slice(startIndex, endIndex);
+            currentPageData.forEach((row) => this.selection.select(row));
+        }
+    }
+    announceSortChange(sortState) {
+        if (sortState.direction) {
+            this.liveAnnouncer.announce(`Ordenado ${sortState.direction === "asc" ? "ascendente" : "descendente"}`);
+        }
+        else {
+            this.liveAnnouncer.announce("Ordenação removida");
+        }
+    }
+    trackByFn(index, item) {
+        return item;
+    }
+    onPageChanged(page) {
+        this.currentPage = page;
+        this.pageChanged.emit(page);
+        if (this.paginator && this.paginator.pageIndex !== page - 1) {
+            this.paginator.pageIndex = page - 1;
+        }
+    }
+    onPageSizeChanged(pageSize) {
+        this.pageSize = pageSize;
+        this.pageSizeChanged.emit(pageSize);
+        if (this.paginator && this.paginator.pageSize !== pageSize) {
+            this.paginator.pageSize = pageSize;
+        }
     }
+    /**
+     * Handle pagination events from Mat Paginator
+     */
     onPageEvent(event) {
         const newPage = event.pageIndex + 1;
         const isFirstPage = newPage === 1 && this.previousPage !== 1;
@@ -2258,26 +2161,50 @@ class BaseTablePaginated {
         }
         this.pageEvent.emit(event);
     }
-    getColumnButtons(column) {
-        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
-            return [];
+    /**
+     * Navigate to first page programmatically
+     */
+    goToFirstPage() {
+        if (this.currentPage !== 1) {
+            this.onPageChanged(1);
+            this.firstPageClicked.emit();
+            this.liveAnnouncer.announce("Primeira página");
         }
-        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 });
+    /**
+     * Navigate to last page programmatically
+     */
+    goToLastPage() {
+        const lastPage = Math.max(1, Math.ceil(this.totalItems / this.pageSize));
+        if (this.currentPage !== lastPage) {
+            this.onPageChanged(lastPage);
+            this.lastPageClicked.emit();
+            this.liveAnnouncer.announce("Última página");
+        }
+    }
+    /**
+     * Update total items when data changes
+     */
+    updateTotalItems() {
+        if (this.isPaginatedByServer) {
+            return;
+        }
+        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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, decorators: [{
             type: Component,
-            args: [{ selector: "cao-table-paginated", encapsulation: ViewEncapsulation.None, imports: [CommonModule, MaterialModule], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBasePaginated() }], 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"] }]
-        }], ctorParameters: () => [], propDecorators: { getColumnCssClass: [{
-                type: Input
-            }], customClass: [{
+            args: [{ selector: "cao-table", imports: [CommonModule, MaterialModule, NgOptimizedImage], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { customClass: [{
                 type: Input
             }], pageSizeOptions: [{
                 type: Input
             }], showFirstLastButtons: [{
                 type: Input
+            }], isPaginatedByServer: [{
+                type: Input
             }], pageChanged: [{
                 type: Output
             }], pageSizeChanged: [{
@@ -2290,8 +2217,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Output
             }], pageEvent: [{
                 type: Output
-            }], rowClicked: [{
-                type: Output
             }], sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -2300,430 +2225,528 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: [MatPaginator]
             }] } });
 
-class BaseAlert {
-    data;
-    iconPath;
-    titleClass;
-    iconPaths = {
-        success: "https://placehold.co/600x400",
-        error: "https://placehold.co/600x400",
-        info: "https://placehold.co/600x400",
-        warning: "https://placehold.co/600x400",
-    };
-    ngOnInit() {
-        this.iconPath = this.iconPaths[this.data.type];
-        this.titleClass = `title-${this.data.type}`;
+class BaseFilterTablePaginatedService {
+    filterSubject = new Subject();
+    filter$ = this.filterSubject.asObservable();
+    updateFilter(filterValue) {
+        this.filterSubject.next(filterValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class BasePaginationService {
+    pageSubject = new BehaviorSubject(1);
+    pageSizeSubject = new BehaviorSubject(10);
+    totalItemsSubject = new BehaviorSubject(0);
+    currentPage$ = this.pageSubject.asObservable();
+    pageSize$ = this.pageSizeSubject.asObservable();
+    totalItems$ = this.totalItemsSubject.asObservable();
+    constructor() { }
+    /**
+     * Sets the current page number
+     * @param page The page number to set
+     */
+    setPage(page) {
+        if (page !== this.pageSubject.value) {
+            this.pageSubject.next(page);
+        }
+    }
+    /**
+     * Sets the page size
+     * @param size The page size to set
+     */
+    setPageSize(size) {
+        if (size !== this.pageSizeSubject.value) {
+            this.pageSizeSubject.next(size);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseAlert, isStandalone: true, selector: "cao-alert", ngImport: i0, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [ngSrc]=\"data.alertIcon ?? ''\" [fill]=\"true\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\">\n        @if (data.title) {\n        <div class=\"title\" [ngClass]=\"titleClass\">{{ data.title }}</div>\n        } @if (data.title && data.message) {\n        <div class=\"message-spacer\"></div>\n        } @if (data.message) {\n        <div class=\"message\">{{ data.message }}</div>\n        }\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Alert Icon\" class=\"alert-icon\" [ngSrc]=\"iconPath\" [fill]=\"true\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:10%;left:55%;transform:translate(-50%);z-index:1000;display:block;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white)}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.text-content{flex-grow:1;margin:20px;padding-right:20px}.title{font-family:Lato,sans-serif;font-weight:700;font-size:24px;color:var(--primary);margin-bottom:5px}.title.success{color:var(--primary)}.title.error{color:var(--error-color)}.title.warning{color:var(--support-orange)}.title.info,.title.title-success{color:var(--primary)}.title.title-error{color:var(--error)}.title.title-warning{color:var(--support-orange)}.title.title-info{color:var(--primary)}.message-spacer{height:16px}.message{font-family:Lato,sans-serif;font-weight:400;font-size:26px;line-height:100%;color:var(--message-color)}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){:host{left:55%;max-width:95%}.dialog-container{max-width:90%;width:400px}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, decorators: [{
-            type: Component,
-            args: [{ selector: 'cao-alert', imports: [CommonModule, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [ngSrc]=\"data.alertIcon ?? ''\" [fill]=\"true\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\">\n        @if (data.title) {\n        <div class=\"title\" [ngClass]=\"titleClass\">{{ data.title }}</div>\n        } @if (data.title && data.message) {\n        <div class=\"message-spacer\"></div>\n        } @if (data.message) {\n        <div class=\"message\">{{ data.message }}</div>\n        }\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Alert Icon\" class=\"alert-icon\" [ngSrc]=\"iconPath\" [fill]=\"true\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:10%;left:55%;transform:translate(-50%);z-index:1000;display:block;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white)}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.text-content{flex-grow:1;margin:20px;padding-right:20px}.title{font-family:Lato,sans-serif;font-weight:700;font-size:24px;color:var(--primary);margin-bottom:5px}.title.success{color:var(--primary)}.title.error{color:var(--error-color)}.title.warning{color:var(--support-orange)}.title.info,.title.title-success{color:var(--primary)}.title.title-error{color:var(--error)}.title.title-warning{color:var(--support-orange)}.title.title-info{color:var(--primary)}.message-spacer{height:16px}.message{font-family:Lato,sans-serif;font-weight:400;font-size:26px;line-height:100%;color:var(--message-color)}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){:host{left:55%;max-width:95%}.dialog-container{max-width:90%;width:400px}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}}\n"] }]
-        }] });
-
-class BaseAlertService {
-    overlay;
-    constructor(overlay) {
-        this.overlay = overlay;
+    /**
+     * Sets the total number of items
+     * @param total The total number of items
+     */
+    setTotalItems(total) {
+        if (total !== this.totalItemsSubject.value) {
+            this.totalItemsSubject.next(total);
+        }
     }
-    defaultTime = 3000;
-    show(config) {
-        const overlayRef = this.overlay.create({
-            hasBackdrop: false,
-            positionStrategy: this.overlay.position().global().centerHorizontally().top("10%"),
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-        });
-        const alertPortal = new ComponentPortal(this.generateComponentPortal());
-        const componentRef = overlayRef.attach(alertPortal);
-        componentRef.instance.data = config;
-        setTimeout(() => {
-            overlayRef.dispose();
-        }, this.defaultTime);
+    /**
+     * Gets the current page
+     */
+    getCurrentPage() {
+        return this.pageSubject.value;
     }
-    generateComponentPortal() {
-        return BaseAlert;
+    /**
+     * Gets the current page size
+     */
+    getPageSize() {
+        return this.pageSizeSubject.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, providedIn: "root" });
+    /**
+     * Gets the total number of items
+     */
+    getTotalItems() {
+        return this.totalItemsSubject.value;
+    }
+    /**
+     * Resets pagination to default values
+     */
+    reset() {
+        this.pageSubject.next(1);
+        this.pageSizeSubject.next(10);
+        this.totalItemsSubject.next(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: i1$4.Overlay }] });
-
-class StepComponent {
-    title = "";
-    isActive = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: StepComponent, isStandalone: true, selector: "cao-step", inputs: { title: "title", isActive: "isActive" }, ngImport: i0, template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "cao-step", standalone: true, imports: [CommonModule], template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], isActive: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
-class StepperComponent {
-    constructor() { }
-    steps;
-    title;
-    activeStepIndex = 0;
-    lengthStep = 0;
-    showLine = true;
-    maxReachedEvent = new EventEmitter();
-    ngAfterContentInit() {
-        if (this.steps.length > 0) {
-            this.steps.toArray()[0].isActive = true;
-            this.lengthStep = this.steps.length;
+class TablePaginatedService {
+    tableConfigSubject = new BehaviorSubject(null);
+    dataSubject = new BehaviorSubject([]);
+    columnsSubject = new BehaviorSubject([]);
+    tableConfig$ = this.tableConfigSubject.asObservable();
+    columns$ = this.columnsSubject.asObservable();
+    data$ = this.dataSubject.asObservable();
+    visibleColumns$ = this.columns$.pipe(map((columns) => columns.filter((col) => col.visible).map((col) => col.key || col.element || "")));
+    createTable(data, columns, customConfig) {
+        const tableConfig = {
+            columns: columns ? columns.map((col) => col.key || col.element || "") : [],
+            data,
+            columnData: {},
+            result: {
+                noData: "Não há dados para o filtro selecionado.",
+                defaultMessage: "Nenhum resultado encontrado.",
+            },
+            ...customConfig,
+        };
+        if (data.length > 0 && columns) {
+            const columnData = {};
+            columns.forEach((col) => {
+                columnData[col.key || col.element || ""] = {
+                    ...col,
+                    type: col.type || this.inferColumnType(data[0][col.key || col.element || ""]),
+                    visible: col.visible !== undefined ? col.visible : true,
+                };
+            });
+            tableConfig.columnData = columnData;
+        }
+        else if (data.length === 0 && columns) {
+            const columnData = {};
+            columns.forEach((col) => {
+                columnData[col.key || col.element || ""] = {
+                    ...col,
+                    type: col.type || "STRING",
+                    visible: col.visible !== undefined ? col.visible : true,
+                };
+            });
+            tableConfig.columnData = columnData;
         }
+        this.tableConfigSubject.next(tableConfig);
+        this.columnsSubject.next(columns || []);
+        this.dataSubject.next(data);
     }
-    nextStep() {
-        if (this.steps.length > 0) {
-            if (this.activeStepIndex < this.steps.length - 1) {
-                this.activeStepIndex++;
-                this.steps.toArray()[this.activeStepIndex].isActive = true;
-            }
-            else {
-                this.maxReachedEvent.emit(null);
-            }
+    inferColumnType(value) {
+        if (value === null || value === undefined) {
+            return "STRING";
+        }
+        switch (typeof value) {
+            case "boolean":
+                return "BOOLEAN";
+            case "number":
+                return "NUMBER";
+            case "string":
+                return this.isValidDate(value) ? "DATE" : "STRING";
+            default:
+                return "STRING";
         }
     }
-    prevStep() {
-        if (this.steps.length > 0) {
-            if (this.activeStepIndex > 0) {
-                this.steps.toArray()[this.activeStepIndex].isActive = false;
-                this.activeStepIndex--;
-                this.steps.toArray()[this.activeStepIndex].isActive = true;
+    isValidDate(value) {
+        return !isNaN(Date.parse(value));
+    }
+    toggleColumnVisibility(columnKey) {
+        const currentColumns = this.columnsSubject.value;
+        const updatedColumns = currentColumns.map((col) => col.key === columnKey || col.element === columnKey ? { ...col, visible: !col.visible } : col);
+        const currentConfig = this.tableConfigSubject.value;
+        if (currentConfig) {
+            const updatedColumnData = { ...currentConfig.columnData };
+            const columnToUpdate = Object.keys(updatedColumnData).find((key) => key === columnKey);
+            if (columnToUpdate) {
+                updatedColumnData[columnToUpdate].visible = !updatedColumnData[columnToUpdate].visible;
+                this.tableConfigSubject.next({
+                    ...currentConfig,
+                    columnData: updatedColumnData,
+                });
             }
         }
+        this.columnsSubject.next(updatedColumns);
     }
-    resetStepper() {
-        this.activeStepIndex = 0;
-        this.steps.forEach((step) => (step.isActive = false));
-        if (this.steps.length > 0) {
-            this.steps.toArray()[0].isActive = true;
+    getVisibleColumns() {
+        return this.columnsSubject.value.filter((col) => col.visible);
+    }
+    setColumns(columns) {
+        const currentConfig = this.tableConfigSubject.value;
+        if (currentConfig) {
+            const columnData = {};
+            columns.forEach((col) => {
+                columnData[col.key || col.element || ""] = col;
+            });
+            this.tableConfigSubject.next({
+                ...currentConfig,
+                columns: columns.map((col) => col.key || col.element || ""),
+                columnData,
+            });
         }
+        this.columnsSubject.next(columns);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: StepperComponent, isStandalone: true, selector: "cao-stepper", inputs: { title: "title" }, outputs: { maxReachedEvent: "maxReachedEvent" }, queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n  @if (showLine) {\n  <div class=\"line\"></div>\n  }\n  <div class=\"steps d-flex aic jcsb\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "cao-stepper", standalone: true, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n  @if (showLine) {\n  <div class=\"line\"></div>\n  }\n  <div class=\"steps d-flex aic jcsb\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { steps: [{
-                type: ContentChildren,
-                args: [StepComponent]
-            }], title: [{
-                type: Input
-            }], maxReachedEvent: [{
-                type: Output
-            }] } });
-
-class CaoTabContentDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabContentDirective, isStandalone: true, selector: "[caoTabContent]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[caoTabContent]',
-                    standalone: true,
-                }]
-        }] });
-
-class CaoTabLabelDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabLabelDirective, isStandalone: true, selector: "[caoTabLabel]", ngImport: i0 });
+    setData(data) {
+        this.dataSubject.next(data);
+        const currentConfig = this.tableConfigSubject.value;
+        if (currentConfig) {
+            this.tableConfigSubject.next({
+                ...currentConfig,
+                data,
+            });
+        }
+    }
+    updateTableData(data) {
+        this.setData(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[caoTabLabel]',
-                    standalone: true,
+                    providedIn: "root",
                 }]
         }] });
 
-class CaoTabPanel {
-    label = '';
-    isLucideIcon = true;
-    trailingIcon = null;
-    leadingIcon = null;
-    isDisabled = false;
-    labelTemplate;
-    lazyContent;
-    content;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabPanel, isStandalone: true, selector: "cao-tab-panel", inputs: { label: "label", isLucideIcon: "isLucideIcon", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isDisabled: "isDisabled" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CaoTabLabelDirective, descendants: true, read: TemplateRef }, { propertyName: "lazyContent", first: true, predicate: CaoTabContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "content", first: true, predicate: ["implicitContent"], descendants: true, static: true }], ngImport: i0, template: `
-    <ng-template #implicitContent>
-      <ng-content />
-    </ng-template>
-  `, isInline: true, styles: [""] });
+function getPtBrPaginatorIntlBasePaginated() {
+    const paginatorIntl = new MatPaginatorIntl();
+    paginatorIntl.itemsPerPageLabel = "Itens por página:";
+    paginatorIntl.nextPageLabel = "Próxima página";
+    paginatorIntl.previousPageLabel = "Página anterior";
+    paginatorIntl.firstPageLabel = "Primeira página";
+    paginatorIntl.lastPageLabel = "Última página";
+    paginatorIntl.getRangeLabel = (page, pageSize, length) => {
+        if (length === 0 || pageSize === 0) {
+            return `0 de ${length}`;
+        }
+        const startIndex = page * pageSize;
+        const endIndex = Math.min(startIndex + pageSize, length);
+        return `${startIndex + 1} – ${endIndex} de ${length}`;
+    };
+    return paginatorIntl;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, decorators: [{
-            type: Component,
-            args: [{ selector: "cao-tab-panel", imports: [], template: `
-    <ng-template #implicitContent>
-      <ng-content />
-    </ng-template>
-  ` }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], isLucideIcon: [{
-                type: Input
-            }], trailingIcon: [{
-                type: Input
-            }], leadingIcon: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], labelTemplate: [{
-                type: ContentChild,
-                args: [CaoTabLabelDirective, { read: TemplateRef }]
-            }], lazyContent: [{
-                type: ContentChild,
-                args: [CaoTabContentDirective, { read: TemplateRef }]
-            }], content: [{
-                type: ViewChild,
-                args: ['implicitContent', { static: true }]
-            }] } });
-
-class CaoTabGroup {
-    get _hostStyles() {
-        return {
-            '--cao-tab-label-height': this.labelHeight,
-            '--cao-tab-label-px': this.labelPaddingX,
-            '--cao-tab-label-gap': this.labelGap,
-            '--cao-tab-color-text': this.colorText,
-            '--cao-tab-color-active': this.colorActive,
-            '--cao-tab-color-hover-bg': this.colorHoverBg,
-            '--cao-tab-color-disabled': this.colorDisabled,
-            '--cao-tab-color-ink-bar': this.colorInkBar,
-            '--cao-tab-color-header-border': this.colorHeaderBorder,
-            '--cao-tab-ink-bar-height': this.inkBarHeight,
-            '--cao-tab-content-pt': this.contentPaddingTop,
-            '--cao-tab-radius': this.labelRadius,
-        };
-    }
-    set selectedIndex(val) {
-        this.selectIndex(val, false);
+class BaseTablePaginated {
+    paginationSubscriptions = [];
+    getColumnCssClass;
+    customClass = "";
+    pageSizeOptions = [5, 10, 20, 50];
+    showFirstLastButtons = true;
+    pageChanged = new EventEmitter();
+    pageSizeChanged = new EventEmitter();
+    firstPageClicked = new EventEmitter();
+    lastPageClicked = new EventEmitter();
+    selectionChanged = new EventEmitter();
+    pageEvent = new EventEmitter();
+    rowClicked = new EventEmitter();
+    dataSource = new MatTableDataSource([]);
+    selection = new SelectionModel(true, []);
+    allColumns = [];
+    displayedColumns = [];
+    filterValue = "";
+    configSubscription = null;
+    visibleColumnsSubscription = null;
+    dataSubscription = null;
+    filterSubscription = null;
+    tableConfig = null;
+    sort;
+    paginator;
+    totalItems = 0;
+    pageSize = 10;
+    currentPage = 1;
+    previousPage = 1;
+    paginationService = inject(BasePaginationService);
+    tableService = inject(TablePaginatedService);
+    liveAnnouncer = inject(LiveAnnouncer);
+    filterTableService = inject(BaseFilterTablePaginatedService);
+    constructor() {
+        this.initializeSortingAccessor();
+        this.initializeFilterPredicate();
     }
-    get selectedIndex() {
-        return this.activeIndex();
+    onPageChanged(page) {
+        this.currentPage = page;
+        this.pageChanged.emit(page);
+        if (this.paginator && this.paginator.pageIndex !== page - 1) {
+            this.paginator.pageIndex = page - 1;
+        }
     }
-    labelHeight = '48px';
-    labelPaddingX = '16px';
-    labelGap = '6px';
-    colorText = '#6b7280';
-    colorActive = '#4f46e5';
-    colorHoverBg = '#f3f4f6';
-    colorDisabled = '#d1d5db';
-    colorInkBar = '#4f46e5';
-    colorHeaderBorder = '#e5e7eb';
-    inkBarHeight = '2px';
-    contentPaddingTop = '20px';
-    labelRadius = '4px';
-    animationDuration = '300ms';
-    dynamicHeight = false;
-    labelAlign = 'start';
-    iconColorActive = '';
-    iconColorInactive = '';
-    strokeWidthIcon = 1;
-    selectedTabChange = new EventEmitter();
-    focusChange = new EventEmitter();
-    tabs;
-    tabBtns;
-    inkBar;
-    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
-    activatedSet = new Set();
-    tabList = [];
-    subs = new Subscription();
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    ngAfterContentInit() {
-        this.tabList = this.tabs.toArray();
-        this.activatedSet.add(this.activeIndex());
-        this.subs.add(this.tabs.changes.subscribe(() => {
-            this.tabList = this.tabs.toArray();
-            const safe = Math.min(this.activeIndex(), this.tabList.length - 1);
-            this.activeIndex.set(Math.max(0, safe));
-            this.scheduleInkBar();
+    ngOnInit() {
+        this.configSubscription = this.tableService.tableConfig$.subscribe((config) => {
+            if (config) {
+                this.tableConfig = config;
+                this.allColumns = config.columns;
+            }
+        });
+        this.visibleColumnsSubscription = this.tableService.visibleColumns$.subscribe((visibleColumns) => {
+            this.displayedColumns = visibleColumns.filter((col) => col !== "select");
+        });
+        this.dataSubscription = this.tableService.data$.subscribe((data) => {
+            this.dataSource.data = data;
+            this.updateTotalItems();
+        });
+        this.filterSubscription = this.filterTableService.filter$.subscribe((filterValue) => {
+            this.filterValue = filterValue;
+            this.applyFilter();
+        });
+        this.paginationSubscriptions.push(this.paginationService.currentPage$.subscribe((page) => {
+            if (this.currentPage !== page) {
+                this.onPageChanged(page);
+            }
+        }), this.paginationService.pageSize$.subscribe((size) => {
+            if (this.pageSize !== size) {
+                this.onPageSizeChanged(size);
+            }
         }));
-        this.scheduleInkBar();
     }
     ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    selectTab(index) {
-        this.selectIndex(index, true);
-    }
-    get activeTab() {
-        return this.tabList[this.activeIndex()] ?? null;
-    }
-    isActive(index) {
-        return this.activeIndex() === index;
-    }
-    wasActivated(index) {
-        return this.activatedSet.has(index);
+        this.configSubscription?.unsubscribe();
+        this.visibleColumnsSubscription?.unsubscribe();
+        this.dataSubscription?.unsubscribe();
+        this.filterSubscription?.unsubscribe();
+        this.paginationSubscriptions.forEach((sub) => sub.unsubscribe());
     }
-    onTabClick(index) {
-        if (this.tabList[index]?.isDisabled) {
-            return;
+    updateTotalItems(newTotalItens) {
+        this.totalItems = newTotalItens ?? this.totalItems;
+        this.paginationService.setTotalItems(this.totalItems);
+        const lastPage = this.pageSize > 0 ? Math.ceil(this.totalItems / this.pageSize) : 1;
+        const lastValidPage = lastPage > 0 ? lastPage : 1;
+        if (this.currentPage > lastValidPage) {
+            this.paginationService.setPage(1);
         }
-        this.selectIndex(index, true);
     }
-    onKeydown(event, currentIndex) {
-        let next = currentIndex;
-        switch (event.key) {
-            case 'ArrowRight':
-                next = this.nextEnabled(currentIndex, 1);
-                break;
-            case 'ArrowLeft':
-                next = this.nextEnabled(currentIndex, -1);
-                break;
-            case 'Home':
-                next = this.nextEnabled(-1, 1);
-                break;
-            case 'End':
-                next = this.nextEnabled(this.tabList.length, -1);
-                break;
-            default: return;
+    onPageSizeChanged(pageSize) {
+        this.pageSize = pageSize;
+        this.pageSizeChanged.emit(pageSize);
+        if (this.paginator && this.paginator.pageSize !== pageSize) {
+            this.paginator.pageSize = pageSize;
         }
-        event.preventDefault();
-        this.selectIndex(next, true);
-        this.focusTab(next);
     }
-    onFocus(index) {
-        this.focusChange.emit(index);
+    getColumnHeader(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return column;
+        }
+        return this.tableConfig.columnData[column].header || column;
     }
-    nextEnabled(from, dir) {
-        const tabs = this.tabList;
-        let idx = from + dir;
-        while (idx >= 0 && idx < tabs.length) {
-            if (!tabs[idx].isDisabled) {
-                return idx;
-            }
-            idx += dir;
+    getColumnElement(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return column;
         }
-        return from;
+        return this.tableConfig.columnData[column].element || column;
     }
-    selectIndex(index, emit) {
-        if (!this.tabList) {
-            this.activeIndex.set(Math.max(0, index));
-            return;
+    getColumnType(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return "STRING";
         }
-        const clamped = Math.max(0, Math.min(index, this.tabList.length - 1));
-        const previous = this.activeIndex();
-        if (clamped === previous && emit) {
-            return;
+        return this.tableConfig.columnData[column].type || "STRING";
+    }
+    announceSortChange(sortState) {
+        if (sortState.direction) {
+            this.liveAnnouncer.announce(`Ordenado ${sortState.direction === "asc" ? "ascendente" : "descendente"}`);
         }
-        this.activeIndex.set(clamped);
-        this.activatedSet.add(clamped);
-        if (emit) {
-            this.selectedTabChange.emit({
-                previousIndex: previous,
-                index: clamped,
-                tab: this.tabList[clamped],
-            });
+        else {
+            this.liveAnnouncer.announce("Ordenação removida");
         }
-        this.scheduleInkBar();
     }
-    focusTab(index) {
-        this.tabBtns?.toArray()[index]?.nativeElement?.focus();
+    handlePageChange(event) {
+        this.pageSize = event.pageSize;
+        this.paginationService.setPageSize(event.pageSize);
+        this.pageChanged.emit(event.pageIndex);
     }
-    scheduleInkBar() {
-        if (!this.isBrowser) {
-            return;
-        }
-        requestAnimationFrame(() => this.updateInkBar());
+    applyFilter() {
+        const normalizedFilter = this.filterValue.trim().toLowerCase();
+        this.dataSource.filter = normalizedFilter;
     }
-    updateInkBar() {
-        const btns = this.tabBtns?.toArray();
-        const bar = this.inkBar?.nativeElement;
-        if (!btns || !bar) {
-            return;
+    initializeSortingAccessor() {
+        this.dataSource.sortingDataAccessor = (item, property) => {
+            const value = item[property];
+            if (typeof value === "string") {
+                return value.toLowerCase();
+            }
+            else if (typeof value === "number") {
+                return value;
+            }
+            else if (typeof value === "boolean") {
+                return value ? 1 : 0;
+            }
+            else if (value instanceof Date) {
+                return value.valueOf();
+            }
+            else if (value === null) {
+                return "";
+            }
+            else if (value === undefined) {
+                return undefined;
+            }
+            else if (typeof value === "object") {
+                return value.toString();
+            }
+            return value;
+        };
+    }
+    initializeFilterPredicate() {
+        this.dataSource.filterPredicate = (data, filter) => {
+            const searchTerms = filter.trim().toLowerCase();
+            if (!searchTerms) {
+                return true;
+            }
+            const dataStr = Object.keys(data).reduce((currentTerm, key) => {
+                const value = data[key];
+                return (currentTerm +
+                    (value !== null && value !== undefined ? value.toString().toLowerCase() : ""));
+            }, "");
+            return dataStr.indexOf(searchTerms) !== -1;
+        };
+    }
+    onRowClick(row) {
+        this.rowClicked.emit(row);
+    }
+    onPageEvent(event) {
+        const newPage = event.pageIndex + 1;
+        const isFirstPage = newPage === 1 && this.previousPage !== 1;
+        const isLastPage = newPage === Math.ceil(this.totalItems / event.pageSize) && newPage !== this.previousPage;
+        // Handle page size changes
+        if (event.pageSize !== this.pageSize) {
+            this.onPageSizeChanged(event.pageSize);
         }
-        const btn = btns[this.activeIndex()]?.nativeElement;
-        if (!btn) {
-            return;
+        // Handle page changes
+        if (newPage !== this.currentPage) {
+            this.previousPage = this.currentPage; // Store previous page for first/last detection
+            this.onPageChanged(newPage);
+            // Emit specific events for first/last page navigation
+            if (isFirstPage) {
+                this.firstPageClicked.emit();
+                this.liveAnnouncer.announce("Primeira página");
+            }
+            else if (isLastPage) {
+                this.lastPageClicked.emit();
+                this.liveAnnouncer.announce("Última página");
+            }
         }
-        bar.style.width = `${btn.offsetWidth}px`;
-        bar.style.transform = `translateX(${btn.offsetLeft}px)`;
-        bar.style.transitionDuration = this.animationDuration;
+        this.pageEvent.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoTabGroup, isStandalone: true, selector: "cao-tab-group", inputs: { selectedIndex: "selectedIndex", labelHeight: "labelHeight", labelPaddingX: "labelPaddingX", labelGap: "labelGap", colorText: "colorText", colorActive: "colorActive", colorHoverBg: "colorHoverBg", colorDisabled: "colorDisabled", colorInkBar: "colorInkBar", colorHeaderBorder: "colorHeaderBorder", inkBarHeight: "inkBarHeight", contentPaddingTop: "contentPaddingTop", labelRadius: "labelRadius", animationDuration: "animationDuration", dynamicHeight: "dynamicHeight", labelAlign: "labelAlign", iconColorActive: "iconColorActive", iconColorInactive: "iconColorInactive", strokeWidthIcon: "strokeWidthIcon" }, outputs: { selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { properties: { "style": "this._hostStyles" }, classAttribute: "cao-tab-group" }, queries: [{ propertyName: "tabs", predicate: CaoTabPanel }], viewQueries: [{ propertyName: "inkBar", first: true, predicate: ["inkBar"], descendants: true }, { propertyName: "tabBtns", predicate: ["tabBtn"], descendants: true }], ngImport: i0, template: "<div\n  #header\n  [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n  <div class=\"cao-tab-label-list\" role=\"tablist\">\n    @for (tab of tabList; track $index; let i = $index) {\n      <button\n        #tabBtn\n        role=\"tab\"\n        type=\"button\"\n        class=\"cao-tab-label\"\n        [class.cao-tab-label--active]=\"isActive(i)\"\n        [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n        [attr.aria-selected]=\"isActive(i)\"\n        [attr.aria-disabled]=\"tab.isDisabled || null\"\n        [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n        [attr.id]=\"'cao-tab-label-' + i\"\n        [attr.aria-controls]=\"'cao-tab-content-' + i\"\n        (click)=\"onTabClick(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n        (focus)=\"onFocus(i)\"\n      >\n        @if (tab.leadingIcon) {\n        <span class=\"leading-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n            }\n        </span>\n        }\n\n        @if (tab.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n        } @else {\n          <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n        }\n\n        @if (tab.trailingIcon) {\n        <span class=\"trailing-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n            }\n        </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Ink bar animado -->\n  <div class=\"cao-tab-ink-bar-track\">\n    <div #inkBar class=\"cao-tab-ink-bar\"></div>\n  </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n  class=\"cao-tab-body-wrapper\"\n  [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n  @for (tab of tabList; track $index; let i = $index) {\n    <div\n      role=\"tabpanel\"\n      class=\"cao-tab-body\"\n      [class.cao-tab-body--active]=\"isActive(i)\"\n      [attr.id]=\"'cao-tab-content-' + i\"\n      [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n      [attr.aria-hidden]=\"!isActive(i)\"\n      [style.--cao-tab-anim-duration]=\"animationDuration\"\n    >\n      <div class=\"cao-tab-bodycontent\">\n        @if (tab.lazyContent) {\n          @if (isActive(i) || wasActivated(i)) {\n            <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n          }\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"tab.content\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--cao-tab-label-height: 48px;--cao-tab-Label-px: 16px;--cao-tab-Label-gap: 6px;--cao-tab-color-text: #6b7280;--cao-tab-color-active: #4f46e5;--cao-tab-color-hover-bg: #f3f4f6;--cao-tab-color-disabled: #d1d5db;--cao-tab-color-ink-bar: #4f46e5;--cao-tab-color-header-border: #e5e7eb;--cao-tab-ink-bar-height: 2px;--cao-tab-content-pt: 20px;--cao-tab-radius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{display:inline-flex;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+    getColumnButtons(column) {
+        if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
+            return [];
+        }
+        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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, decorators: [{
             type: Component,
-            args: [{ selector: 'cao-tab-group', standalone: true, imports: [NgTemplateOutlet, LucideDynamicIcon], host: { class: 'cao-tab-group' }, template: "<div\n  #header\n  [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n  <div class=\"cao-tab-label-list\" role=\"tablist\">\n    @for (tab of tabList; track $index; let i = $index) {\n      <button\n        #tabBtn\n        role=\"tab\"\n        type=\"button\"\n        class=\"cao-tab-label\"\n        [class.cao-tab-label--active]=\"isActive(i)\"\n        [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n        [attr.aria-selected]=\"isActive(i)\"\n        [attr.aria-disabled]=\"tab.isDisabled || null\"\n        [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n        [attr.id]=\"'cao-tab-label-' + i\"\n        [attr.aria-controls]=\"'cao-tab-content-' + i\"\n        (click)=\"onTabClick(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n        (focus)=\"onFocus(i)\"\n      >\n        @if (tab.leadingIcon) {\n        <span class=\"leading-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n            }\n        </span>\n        }\n\n        @if (tab.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n        } @else {\n          <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n        }\n\n        @if (tab.trailingIcon) {\n        <span class=\"trailing-icon\">\n            @if (tab.isLucideIcon) {\n            <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n            } @else {\n            <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n            }\n        </span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Ink bar animado -->\n  <div class=\"cao-tab-ink-bar-track\">\n    <div #inkBar class=\"cao-tab-ink-bar\"></div>\n  </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n  class=\"cao-tab-body-wrapper\"\n  [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n  @for (tab of tabList; track $index; let i = $index) {\n    <div\n      role=\"tabpanel\"\n      class=\"cao-tab-body\"\n      [class.cao-tab-body--active]=\"isActive(i)\"\n      [attr.id]=\"'cao-tab-content-' + i\"\n      [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n      [attr.aria-hidden]=\"!isActive(i)\"\n      [style.--cao-tab-anim-duration]=\"animationDuration\"\n    >\n      <div class=\"cao-tab-bodycontent\">\n        @if (tab.lazyContent) {\n          @if (isActive(i) || wasActivated(i)) {\n            <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n          }\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"tab.content\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--cao-tab-label-height: 48px;--cao-tab-Label-px: 16px;--cao-tab-Label-gap: 6px;--cao-tab-color-text: #6b7280;--cao-tab-color-active: #4f46e5;--cao-tab-color-hover-bg: #f3f4f6;--cao-tab-color-disabled: #d1d5db;--cao-tab-color-ink-bar: #4f46e5;--cao-tab-color-header-border: #e5e7eb;--cao-tab-ink-bar-height: 2px;--cao-tab-content-pt: 20px;--cao-tab-radius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{display:inline-flex;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"] }]
-        }], propDecorators: { _hostStyles: [{
-                type: HostBinding,
-                args: ['style']
-            }], selectedIndex: [{
-                type: Input
-            }], labelHeight: [{
-                type: Input
-            }], labelPaddingX: [{
-                type: Input
-            }], labelGap: [{
-                type: Input
-            }], colorText: [{
-                type: Input
-            }], colorActive: [{
-                type: Input
-            }], colorHoverBg: [{
-                type: Input
-            }], colorDisabled: [{
-                type: Input
-            }], colorInkBar: [{
-                type: Input
-            }], colorHeaderBorder: [{
-                type: Input
-            }], inkBarHeight: [{
-                type: Input
-            }], contentPaddingTop: [{
-                type: Input
-            }], labelRadius: [{
-                type: Input
-            }], animationDuration: [{
-                type: Input
-            }], dynamicHeight: [{
-                type: Input
-            }], labelAlign: [{
+            args: [{ selector: "cao-table-paginated", encapsulation: ViewEncapsulation.None, imports: [CommonModule, MaterialModule], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBasePaginated() }], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { getColumnCssClass: [{
                 type: Input
-            }], iconColorActive: [{
+            }], customClass: [{
                 type: Input
-            }], iconColorInactive: [{
+            }], pageSizeOptions: [{
                 type: Input
-            }], strokeWidthIcon: [{
+            }], showFirstLastButtons: [{
                 type: Input
-            }], selectedTabChange: [{
+            }], pageChanged: [{
                 type: Output
-            }], focusChange: [{
+            }], pageSizeChanged: [{
                 type: Output
-            }], tabs: [{
-                type: ContentChildren,
-                args: [CaoTabPanel]
-            }], tabBtns: [{
-                type: ViewChildren,
-                args: ['tabBtn']
-            }], inkBar: [{
+            }], firstPageClicked: [{
+                type: Output
+            }], lastPageClicked: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }], pageEvent: [{
+                type: Output
+            }], rowClicked: [{
+                type: Output
+            }], sort: [{
                 type: ViewChild,
-                args: ['inkBar']
+                args: [MatSort]
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
             }] } });
 
-/*
- * Public API Surface of ngx-opalbytes-components
- */
+class BaseAlert {
+    data;
+    iconPath;
+    titleClass;
+    iconPaths = {
+        success: "https://placehold.co/600x400",
+        error: "https://placehold.co/600x400",
+        info: "https://placehold.co/600x400",
+        warning: "https://placehold.co/600x400",
+    };
+    ngOnInit() {
+        this.iconPath = this.iconPaths[this.data.type];
+        this.titleClass = `title-${this.data.type}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseAlert, isStandalone: true, selector: "cao-alert", ngImport: i0, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [ngSrc]=\"data.alertIcon ?? ''\" [fill]=\"true\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\">\n        @if (data.title) {\n        <div class=\"title\" [ngClass]=\"titleClass\">{{ data.title }}</div>\n        } @if (data.title && data.message) {\n        <div class=\"message-spacer\"></div>\n        } @if (data.message) {\n        <div class=\"message\">{{ data.message }}</div>\n        }\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Alert Icon\" class=\"alert-icon\" [ngSrc]=\"iconPath\" [fill]=\"true\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:10%;left:55%;transform:translate(-50%);z-index:1000;display:block;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white)}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.text-content{flex-grow:1;margin:20px;padding-right:20px}.title{font-family:Lato,sans-serif;font-weight:700;font-size:24px;color:var(--primary);margin-bottom:5px}.title.success{color:var(--primary)}.title.error{color:var(--error-color)}.title.warning{color:var(--support-orange)}.title.info,.title.title-success{color:var(--primary)}.title.title-error{color:var(--error)}.title.title-warning{color:var(--support-orange)}.title.title-info{color:var(--primary)}.message-spacer{height:16px}.message{font-family:Lato,sans-serif;font-weight:400;font-size:26px;line-height:100%;color:var(--message-color)}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){:host{left:55%;max-width:95%}.dialog-container{max-width:90%;width:400px}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-alert', imports: [CommonModule, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [ngSrc]=\"data.alertIcon ?? ''\" [fill]=\"true\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\">\n        @if (data.title) {\n        <div class=\"title\" [ngClass]=\"titleClass\">{{ data.title }}</div>\n        } @if (data.title && data.message) {\n        <div class=\"message-spacer\"></div>\n        } @if (data.message) {\n        <div class=\"message\">{{ data.message }}</div>\n        }\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Alert Icon\" class=\"alert-icon\" [ngSrc]=\"iconPath\" [fill]=\"true\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:10%;left:55%;transform:translate(-50%);z-index:1000;display:block;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white)}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.text-content{flex-grow:1;margin:20px;padding-right:20px}.title{font-family:Lato,sans-serif;font-weight:700;font-size:24px;color:var(--primary);margin-bottom:5px}.title.success{color:var(--primary)}.title.error{color:var(--error-color)}.title.warning{color:var(--support-orange)}.title.info,.title.title-success{color:var(--primary)}.title.title-error{color:var(--error)}.title.title-warning{color:var(--support-orange)}.title.title-info{color:var(--primary)}.message-spacer{height:16px}.message{font-family:Lato,sans-serif;font-weight:400;font-size:26px;line-height:100%;color:var(--message-color)}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){:host{left:55%;max-width:95%}.dialog-container{max-width:90%;width:400px}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}}\n"] }]
+        }] });
+
+class BaseAlertService {
+    overlay;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    defaultTime = 3000;
+    show(config) {
+        const overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.overlay.position().global().centerHorizontally().top("10%"),
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+        });
+        const alertPortal = new ComponentPortal(this.generateComponentPortal());
+        const componentRef = overlayRef.attach(alertPortal);
+        componentRef.instance.data = config;
+        setTimeout(() => {
+            overlayRef.dispose();
+        }, this.defaultTime);
+    }
+    generateComponentPortal() {
+        return BaseAlert;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1$4.Overlay }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseInput, CaoDropDownComponent, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoDropDownComponent, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map