@ngx-smz/core 19.2.0 → 19.2.2

package/fesm2022/ngx-smz-core.mjs

@@ -9,6 +9,7 @@ import * as i8$1 from 'primeng/table';
 import { ColumnFilter as ColumnFilter$1, TableModule as TableModule$1 } from 'primeng/table';
 import * as i4$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
+import * as i3$2 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as i8 from 'primeng/toolbar';
@@ -38,8 +39,6 @@ import groupBy from 'lodash-es/groupBy';
 import mapValues from 'lodash-es/mapValues';
 import * as i1$2 from '@ngxs/store';
 import { Store, Actions, ofActionSuccessful, ofActionDispatched, ofActionErrored, Action, State, createSelector, Selector, NgxsModule } from '@ngxs/store';
-import * as i3$2 from 'primeng/messages';
-import { MessagesModule } from 'primeng/messages';
 import * as i1$1 from '@angular/platform-browser';
 import { __decorate } from 'tslib';
 import * as i4$1 from 'primeng/api';
@@ -3241,11 +3240,11 @@ class FileUploadComponent {
         return '.' + file.name.split('.').pop();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.Store }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: FileUploadComponent, isStandalone: false, selector: "smz-file-upload", inputs: { input: "input", form: "form", control: "control", behaviors: "behaviors" }, outputs: { selectChange: "selectChange" }, ngImport: i0, template: "\r\n\r\n<label *ngIf=\"input.hideLabel != true\" class=\"smz__input_name\" [innerHTML]=\"input.name\"></label>\r\n\r\n<!-- ZONA DE DROPPING -->\r\n<div *ngIf=\"input._file == null\" SmzDragDrop (fileDropped)=\"input.isDisabled ? notAllowed() : onFilesDropped($event, true, true, this.cdf)\" class=\"file_upload__drag-container grid grid-nogutter items-center justify-center mt-1  mb-1\">\r\n    <div class=\"grid grid-nogutter flex-col items-center justify-center pt-3 pb-3\">\r\n        <!-- ICONE DE UPLOAD -->\r\n        <i [ngClass]=\"input.dragIconClass\" class=\"text-4xl mb-2\"></i>\r\n        <span class=\"grid grid-nogutter gap-2\">\r\n            <!-- INPUT DE UPLOAD MANUAL -->\r\n            <input type=\"file\" [name]=\"uploadControl\" class=\"upload_manual_control\" [attr.disabled]=\"input.isDisabled\" [accept]=\"input.fileAccept\" [id]=\"uploadControl\" (change)=\"onInputFiles($event)\" />\r\n            <!-- BOT\u00C3O PARA SELECIONAR ARQUIVO -->\r\n            <label [for]=\"uploadControl\" [ngClass]=\"{ 'text-gray-500' : input.isDisabled,'clickable upload_manual_label hvr hvr-grow': !input.isDisabled }\">{{ input.inputMessage }}</label>\r\n            <!-- MENSAGEM PARA ARRASTAR -->\r\n            <span class=\"upload_field-drag-message\">ou {{ input.dragMessage }}</span>\r\n        </span>\r\n\r\n        <!-- MENSAGEM DE ERRO PARA SELE\u00C7\u00C3O DE ARQUIVO -->\r\n        <p-messages [(value)]=\"errors\" [enableService]=\"false\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\"></p-messages>\r\n    </div>\r\n</div>\r\n\r\n<!-- CONTE\u00DADO COM ARQUIVO CARREGADO -->\r\n<div *ngIf=\"input._file != null\" class=\"grid grid-nogutter items-center justify-start flex-nowrap mt-1 mb-1 file_upload-container\">\r\n    <div class=\"upload_field\" [style.height]=\"input.thumbnailSize\" [style.width]=\"input.thumbnailSize\">\r\n        <ng-container [ngSwitch]=\"input._fileType\">\r\n\r\n            <!-- IMAGENS -->\r\n            <ng-container *ngSwitchCase=\"'image'\">\r\n\r\n                <!-- THUMBNAIL DE IMAGENS -->\r\n                <img *ngIf=\"input.base64\" class=\"upload_field-img mr-3\" [src]=\"input.base64 | safeUrl\"/>\r\n\r\n                <!-- ZOOM PARA IMAGENS -->\r\n                <div class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- APLICA\u00C7\u00D5ES -->\r\n            <ng-container *ngSwitchCase=\"'application'\">\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n\r\n                    <!-- THUMBNAIL DE APLICA\u00C7\u00D5ES -->\r\n                    <ng-container [ngSwitch]=\"input._fileExtension\">\r\n                        <i *ngSwitchCase=\"'.pdf'\" class=\"fa-solid fa-file-pdf\"></i>\r\n                        <i *ngSwitchCase=\"'.doc'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.docx'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.ppt'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.pptx'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.xls'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.xlsx'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.7zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.rar'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.txt'\" class=\"fa-solid fa-file-lines\"></i>\r\n                        <i *ngSwitchDefault class=\"fa-solid fa-file\"></i>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!-- ZOOM PARA PDF -->\r\n                <div *ngIf=\"input._fileExtension === '.pdf'\" class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- V\u00CDDEOS -->\r\n            <ng-container *ngSwitchCase=\"'video'\">\r\n\r\n                <!-- THUMBNAIL DE V\u00CDDEOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-video\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- AUDIOS -->\r\n            <ng-container *ngSwitchCase=\"'audio'\">\r\n\r\n                <!-- THUMBNAIL DE AUDIOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-audio\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- OUTROS -->\r\n            <ng-container *ngSwitchDefault>\r\n\r\n                <!-- THUMBNAIL GENERICOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n    </div>\r\n\r\n    <!-- NOME E TAMANHO DO ARQUIVO -->\r\n    <div class=\"grid grid-nogutter flex-col items-start justify-end ml-3\">\r\n        <span>{{ input._file.name | fileNameShorten : input.shortenLength : input.shortenSeparator }} <i class=\"far fa-trash-alt hvr hvr-grow text-red-500 clickable ml-2 mb-1 cursor-pointer\" (click)=\"clear(true)\"></i></span>\r\n        <span *ngIf=\"input.showFileSize\"><small>{{ formatBytes(input._file.size) }}</small></span>\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O DO FORM -->\r\n<smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n\r\n<div *ngIf=\"isZoomActive\" class=\"upload_field__fullscreen-image\">\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE PDF -->\r\n    <ng-container *ngIf=\"input._fileExtension === '.pdf'; else imageTemplate\">\r\n        <iframe *ngIf=\"input.base64\" [src]=\"input.base64 | safeUrl\" class=\"animate__animated animate__zoomIn animate__faster\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>\r\n    </ng-container>\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE IMAGENS -->\r\n    <ng-template #imageTemplate>\r\n        <img *ngIf=\"input.base64\" class=\"animate__animated animate__zoomIn animate__faster\" [src]=\"input.base64 | safeUrl\" height=\"100%\" width=\"100%\"/>\r\n    </ng-template>\r\n\r\n    <!-- ICONE DE SAIR DO FULLSCREEN -->\r\n    <i class=\"far fa-times-circle clickable m-4 hvr hvr-grow text-4xl text-white\" (click)=\"restoreZoom()\"></i>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: ValidationMessagesComponent, selector: "smz-validation-messages", inputs: ["input", "control", "behaviors", "extraMessages"] }, { kind: "directive", type: FileDragDropDirective, selector: "[SmzDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: SafeUrlPipe$1, name: "safeUrl" }, { kind: "pipe", type: FileNameShortenPipe, name: "fileNameShorten" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FileUploadComponent, isStandalone: false, selector: "smz-file-upload", inputs: { input: "input", form: "form", control: "control", behaviors: "behaviors" }, outputs: { selectChange: "selectChange" }, ngImport: i0, template: "\r\n\r\n<label *ngIf=\"input.hideLabel != true\" class=\"smz__input_name\" [innerHTML]=\"input.name\"></label>\r\n\r\n<!-- ZONA DE DROPPING -->\r\n<div *ngIf=\"input._file == null\" SmzDragDrop (fileDropped)=\"input.isDisabled ? notAllowed() : onFilesDropped($event, true, true, this.cdf)\" class=\"file_upload__drag-container grid grid-nogutter items-center justify-center mt-1  mb-1\">\r\n    <div class=\"grid grid-nogutter flex-col items-center justify-center pt-3 pb-3\">\r\n        <!-- ICONE DE UPLOAD -->\r\n        <i [ngClass]=\"input.dragIconClass\" class=\"text-4xl mb-2\"></i>\r\n        <span class=\"grid grid-nogutter gap-2\">\r\n            <!-- INPUT DE UPLOAD MANUAL -->\r\n            <input type=\"file\" [name]=\"uploadControl\" class=\"upload_manual_control\" [attr.disabled]=\"input.isDisabled\" [accept]=\"input.fileAccept\" [id]=\"uploadControl\" (change)=\"onInputFiles($event)\" />\r\n            <!-- BOT\u00C3O PARA SELECIONAR ARQUIVO -->\r\n            <label [for]=\"uploadControl\" [ngClass]=\"{ 'text-gray-500' : input.isDisabled,'clickable upload_manual_label hvr hvr-grow': !input.isDisabled }\">{{ input.inputMessage }}</label>\r\n            <!-- MENSAGEM PARA ARRASTAR -->\r\n            <span class=\"upload_field-drag-message\">ou {{ input.dragMessage }}</span>\r\n        </span>\r\n\r\n        <!-- MENSAGEM DE ERRO PARA SELE\u00C7\u00C3O DE ARQUIVO -->\r\n         @for (error of errors; track error) {\r\n            <p-message [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\">\r\n                {{error}}\r\n            </p-message>\r\n         }\r\n    </div>\r\n</div>\r\n\r\n<!-- CONTE\u00DADO COM ARQUIVO CARREGADO -->\r\n<div *ngIf=\"input._file != null\" class=\"grid grid-nogutter items-center justify-start flex-nowrap mt-1 mb-1 file_upload-container\">\r\n    <div class=\"upload_field\" [style.height]=\"input.thumbnailSize\" [style.width]=\"input.thumbnailSize\">\r\n        <ng-container [ngSwitch]=\"input._fileType\">\r\n\r\n            <!-- IMAGENS -->\r\n            <ng-container *ngSwitchCase=\"'image'\">\r\n\r\n                <!-- THUMBNAIL DE IMAGENS -->\r\n                <img *ngIf=\"input.base64\" class=\"upload_field-img mr-3\" [src]=\"input.base64 | safeUrl\"/>\r\n\r\n                <!-- ZOOM PARA IMAGENS -->\r\n                <div class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- APLICA\u00C7\u00D5ES -->\r\n            <ng-container *ngSwitchCase=\"'application'\">\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n\r\n                    <!-- THUMBNAIL DE APLICA\u00C7\u00D5ES -->\r\n                    <ng-container [ngSwitch]=\"input._fileExtension\">\r\n                        <i *ngSwitchCase=\"'.pdf'\" class=\"fa-solid fa-file-pdf\"></i>\r\n                        <i *ngSwitchCase=\"'.doc'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.docx'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.ppt'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.pptx'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.xls'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.xlsx'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.7zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.rar'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.txt'\" class=\"fa-solid fa-file-lines\"></i>\r\n                        <i *ngSwitchDefault class=\"fa-solid fa-file\"></i>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!-- ZOOM PARA PDF -->\r\n                <div *ngIf=\"input._fileExtension === '.pdf'\" class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- V\u00CDDEOS -->\r\n            <ng-container *ngSwitchCase=\"'video'\">\r\n\r\n                <!-- THUMBNAIL DE V\u00CDDEOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-video\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- AUDIOS -->\r\n            <ng-container *ngSwitchCase=\"'audio'\">\r\n\r\n                <!-- THUMBNAIL DE AUDIOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-audio\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- OUTROS -->\r\n            <ng-container *ngSwitchDefault>\r\n\r\n                <!-- THUMBNAIL GENERICOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n    </div>\r\n\r\n    <!-- NOME E TAMANHO DO ARQUIVO -->\r\n    <div class=\"grid grid-nogutter flex-col items-start justify-end ml-3\">\r\n        <span>{{ input._file.name | fileNameShorten : input.shortenLength : input.shortenSeparator }} <i class=\"far fa-trash-alt hvr hvr-grow text-red-500 clickable ml-2 mb-1 cursor-pointer\" (click)=\"clear(true)\"></i></span>\r\n        <span *ngIf=\"input.showFileSize\"><small>{{ formatBytes(input._file.size) }}</small></span>\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O DO FORM -->\r\n<smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n\r\n<div *ngIf=\"isZoomActive\" class=\"upload_field__fullscreen-image\">\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE PDF -->\r\n    <ng-container *ngIf=\"input._fileExtension === '.pdf'; else imageTemplate\">\r\n        <iframe *ngIf=\"input.base64\" [src]=\"input.base64 | safeUrl\" class=\"animate__animated animate__zoomIn animate__faster\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>\r\n    </ng-container>\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE IMAGENS -->\r\n    <ng-template #imageTemplate>\r\n        <img *ngIf=\"input.base64\" class=\"animate__animated animate__zoomIn animate__faster\" [src]=\"input.base64 | safeUrl\" height=\"100%\" width=\"100%\"/>\r\n    </ng-template>\r\n\r\n    <!-- ICONE DE SAIR DO FULLSCREEN -->\r\n    <i class=\"far fa-times-circle clickable m-4 hvr hvr-grow text-4xl text-white\" (click)=\"restoreZoom()\"></i>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: ValidationMessagesComponent, selector: "smz-validation-messages", inputs: ["input", "control", "behaviors", "extraMessages"] }, { kind: "directive", type: FileDragDropDirective, selector: "[SmzDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: SafeUrlPipe$1, name: "safeUrl" }, { kind: "pipe", type: FileNameShortenPipe, name: "fileNameShorten" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-file-upload', standalone: false, template: "\r\n\r\n<label *ngIf=\"input.hideLabel != true\" class=\"smz__input_name\" [innerHTML]=\"input.name\"></label>\r\n\r\n<!-- ZONA DE DROPPING -->\r\n<div *ngIf=\"input._file == null\" SmzDragDrop (fileDropped)=\"input.isDisabled ? notAllowed() : onFilesDropped($event, true, true, this.cdf)\" class=\"file_upload__drag-container grid grid-nogutter items-center justify-center mt-1  mb-1\">\r\n    <div class=\"grid grid-nogutter flex-col items-center justify-center pt-3 pb-3\">\r\n        <!-- ICONE DE UPLOAD -->\r\n        <i [ngClass]=\"input.dragIconClass\" class=\"text-4xl mb-2\"></i>\r\n        <span class=\"grid grid-nogutter gap-2\">\r\n            <!-- INPUT DE UPLOAD MANUAL -->\r\n            <input type=\"file\" [name]=\"uploadControl\" class=\"upload_manual_control\" [attr.disabled]=\"input.isDisabled\" [accept]=\"input.fileAccept\" [id]=\"uploadControl\" (change)=\"onInputFiles($event)\" />\r\n            <!-- BOT\u00C3O PARA SELECIONAR ARQUIVO -->\r\n            <label [for]=\"uploadControl\" [ngClass]=\"{ 'text-gray-500' : input.isDisabled,'clickable upload_manual_label hvr hvr-grow': !input.isDisabled }\">{{ input.inputMessage }}</label>\r\n            <!-- MENSAGEM PARA ARRASTAR -->\r\n            <span class=\"upload_field-drag-message\">ou {{ input.dragMessage }}</span>\r\n        </span>\r\n\r\n        <!-- MENSAGEM DE ERRO PARA SELE\u00C7\u00C3O DE ARQUIVO -->\r\n        <p-messages [(value)]=\"errors\" [enableService]=\"false\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\"></p-messages>\r\n    </div>\r\n</div>\r\n\r\n<!-- CONTE\u00DADO COM ARQUIVO CARREGADO -->\r\n<div *ngIf=\"input._file != null\" class=\"grid grid-nogutter items-center justify-start flex-nowrap mt-1 mb-1 file_upload-container\">\r\n    <div class=\"upload_field\" [style.height]=\"input.thumbnailSize\" [style.width]=\"input.thumbnailSize\">\r\n        <ng-container [ngSwitch]=\"input._fileType\">\r\n\r\n            <!-- IMAGENS -->\r\n            <ng-container *ngSwitchCase=\"'image'\">\r\n\r\n                <!-- THUMBNAIL DE IMAGENS -->\r\n                <img *ngIf=\"input.base64\" class=\"upload_field-img mr-3\" [src]=\"input.base64 | safeUrl\"/>\r\n\r\n                <!-- ZOOM PARA IMAGENS -->\r\n                <div class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- APLICA\u00C7\u00D5ES -->\r\n            <ng-container *ngSwitchCase=\"'application'\">\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n\r\n                    <!-- THUMBNAIL DE APLICA\u00C7\u00D5ES -->\r\n                    <ng-container [ngSwitch]=\"input._fileExtension\">\r\n                        <i *ngSwitchCase=\"'.pdf'\" class=\"fa-solid fa-file-pdf\"></i>\r\n                        <i *ngSwitchCase=\"'.doc'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.docx'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.ppt'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.pptx'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.xls'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.xlsx'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.7zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.rar'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.txt'\" class=\"fa-solid fa-file-lines\"></i>\r\n                        <i *ngSwitchDefault class=\"fa-solid fa-file\"></i>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!-- ZOOM PARA PDF -->\r\n                <div *ngIf=\"input._fileExtension === '.pdf'\" class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- V\u00CDDEOS -->\r\n            <ng-container *ngSwitchCase=\"'video'\">\r\n\r\n                <!-- THUMBNAIL DE V\u00CDDEOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-video\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- AUDIOS -->\r\n            <ng-container *ngSwitchCase=\"'audio'\">\r\n\r\n                <!-- THUMBNAIL DE AUDIOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-audio\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- OUTROS -->\r\n            <ng-container *ngSwitchDefault>\r\n\r\n                <!-- THUMBNAIL GENERICOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n    </div>\r\n\r\n    <!-- NOME E TAMANHO DO ARQUIVO -->\r\n    <div class=\"grid grid-nogutter flex-col items-start justify-end ml-3\">\r\n        <span>{{ input._file.name | fileNameShorten : input.shortenLength : input.shortenSeparator }} <i class=\"far fa-trash-alt hvr hvr-grow text-red-500 clickable ml-2 mb-1 cursor-pointer\" (click)=\"clear(true)\"></i></span>\r\n        <span *ngIf=\"input.showFileSize\"><small>{{ formatBytes(input._file.size) }}</small></span>\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O DO FORM -->\r\n<smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n\r\n<div *ngIf=\"isZoomActive\" class=\"upload_field__fullscreen-image\">\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE PDF -->\r\n    <ng-container *ngIf=\"input._fileExtension === '.pdf'; else imageTemplate\">\r\n        <iframe *ngIf=\"input.base64\" [src]=\"input.base64 | safeUrl\" class=\"animate__animated animate__zoomIn animate__faster\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>\r\n    </ng-container>\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE IMAGENS -->\r\n    <ng-template #imageTemplate>\r\n        <img *ngIf=\"input.base64\" class=\"animate__animated animate__zoomIn animate__faster\" [src]=\"input.base64 | safeUrl\" height=\"100%\" width=\"100%\"/>\r\n    </ng-template>\r\n\r\n    <!-- ICONE DE SAIR DO FULLSCREEN -->\r\n    <i class=\"far fa-times-circle clickable m-4 hvr hvr-grow text-4xl text-white\" (click)=\"restoreZoom()\"></i>\r\n</div>" }]
+            args: [{ selector: 'smz-file-upload', standalone: false, template: "\r\n\r\n<label *ngIf=\"input.hideLabel != true\" class=\"smz__input_name\" [innerHTML]=\"input.name\"></label>\r\n\r\n<!-- ZONA DE DROPPING -->\r\n<div *ngIf=\"input._file == null\" SmzDragDrop (fileDropped)=\"input.isDisabled ? notAllowed() : onFilesDropped($event, true, true, this.cdf)\" class=\"file_upload__drag-container grid grid-nogutter items-center justify-center mt-1  mb-1\">\r\n    <div class=\"grid grid-nogutter flex-col items-center justify-center pt-3 pb-3\">\r\n        <!-- ICONE DE UPLOAD -->\r\n        <i [ngClass]=\"input.dragIconClass\" class=\"text-4xl mb-2\"></i>\r\n        <span class=\"grid grid-nogutter gap-2\">\r\n            <!-- INPUT DE UPLOAD MANUAL -->\r\n            <input type=\"file\" [name]=\"uploadControl\" class=\"upload_manual_control\" [attr.disabled]=\"input.isDisabled\" [accept]=\"input.fileAccept\" [id]=\"uploadControl\" (change)=\"onInputFiles($event)\" />\r\n            <!-- BOT\u00C3O PARA SELECIONAR ARQUIVO -->\r\n            <label [for]=\"uploadControl\" [ngClass]=\"{ 'text-gray-500' : input.isDisabled,'clickable upload_manual_label hvr hvr-grow': !input.isDisabled }\">{{ input.inputMessage }}</label>\r\n            <!-- MENSAGEM PARA ARRASTAR -->\r\n            <span class=\"upload_field-drag-message\">ou {{ input.dragMessage }}</span>\r\n        </span>\r\n\r\n        <!-- MENSAGEM DE ERRO PARA SELE\u00C7\u00C3O DE ARQUIVO -->\r\n         @for (error of errors; track error) {\r\n            <p-message [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\">\r\n                {{error}}\r\n            </p-message>\r\n         }\r\n    </div>\r\n</div>\r\n\r\n<!-- CONTE\u00DADO COM ARQUIVO CARREGADO -->\r\n<div *ngIf=\"input._file != null\" class=\"grid grid-nogutter items-center justify-start flex-nowrap mt-1 mb-1 file_upload-container\">\r\n    <div class=\"upload_field\" [style.height]=\"input.thumbnailSize\" [style.width]=\"input.thumbnailSize\">\r\n        <ng-container [ngSwitch]=\"input._fileType\">\r\n\r\n            <!-- IMAGENS -->\r\n            <ng-container *ngSwitchCase=\"'image'\">\r\n\r\n                <!-- THUMBNAIL DE IMAGENS -->\r\n                <img *ngIf=\"input.base64\" class=\"upload_field-img mr-3\" [src]=\"input.base64 | safeUrl\"/>\r\n\r\n                <!-- ZOOM PARA IMAGENS -->\r\n                <div class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- APLICA\u00C7\u00D5ES -->\r\n            <ng-container *ngSwitchCase=\"'application'\">\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n\r\n                    <!-- THUMBNAIL DE APLICA\u00C7\u00D5ES -->\r\n                    <ng-container [ngSwitch]=\"input._fileExtension\">\r\n                        <i *ngSwitchCase=\"'.pdf'\" class=\"fa-solid fa-file-pdf\"></i>\r\n                        <i *ngSwitchCase=\"'.doc'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.docx'\" class=\"fa-solid fa-file-word\"></i>\r\n                        <i *ngSwitchCase=\"'.ppt'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.pptx'\" class=\"fa-solid fa-file-powerpoint\"></i>\r\n                        <i *ngSwitchCase=\"'.xls'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.xlsx'\" class=\"fa-solid fa-file-excel\"></i>\r\n                        <i *ngSwitchCase=\"'.zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.7zip'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.rar'\" class=\"fa-solid fa-file-zipper\"></i>\r\n                        <i *ngSwitchCase=\"'.txt'\" class=\"fa-solid fa-file-lines\"></i>\r\n                        <i *ngSwitchDefault class=\"fa-solid fa-file\"></i>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!-- ZOOM PARA PDF -->\r\n                <div *ngIf=\"input._fileExtension === '.pdf'\" class=\"upload_field__actions\">\r\n                    <div class=\"grid grid-nogutter items-center justify-end mr-2 mt-2\">\r\n                        <i *ngIf=\"input.allowZoom\" class=\"fa-solid fa-magnifying-glass-plus upload_field__actions_icon hvr hvr-grow text-white clickable\" (click)=\"applyZoom()\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- V\u00CDDEOS -->\r\n            <ng-container *ngSwitchCase=\"'video'\">\r\n\r\n                <!-- THUMBNAIL DE V\u00CDDEOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-video\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- AUDIOS -->\r\n            <ng-container *ngSwitchCase=\"'audio'\">\r\n\r\n                <!-- THUMBNAIL DE AUDIOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file-audio\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n            <!-- OUTROS -->\r\n            <ng-container *ngSwitchDefault>\r\n\r\n                <!-- THUMBNAIL GENERICOS -->\r\n                <div class=\"upload_field-generic h-full w-full grid grid-nogutter items-center text-5xl justify-center mr-3\">\r\n                    <i class=\"fa-solid fa-file\"></i>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n    </div>\r\n\r\n    <!-- NOME E TAMANHO DO ARQUIVO -->\r\n    <div class=\"grid grid-nogutter flex-col items-start justify-end ml-3\">\r\n        <span>{{ input._file.name | fileNameShorten : input.shortenLength : input.shortenSeparator }} <i class=\"far fa-trash-alt hvr hvr-grow text-red-500 clickable ml-2 mb-1 cursor-pointer\" (click)=\"clear(true)\"></i></span>\r\n        <span *ngIf=\"input.showFileSize\"><small>{{ formatBytes(input._file.size) }}</small></span>\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O DO FORM -->\r\n<smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n\r\n<div *ngIf=\"isZoomActive\" class=\"upload_field__fullscreen-image\">\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE PDF -->\r\n    <ng-container *ngIf=\"input._fileExtension === '.pdf'; else imageTemplate\">\r\n        <iframe *ngIf=\"input.base64\" [src]=\"input.base64 | safeUrl\" class=\"animate__animated animate__zoomIn animate__faster\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>\r\n    </ng-container>\r\n\r\n    <!-- VISUALIZA\u00C7\u00C3O FULLSCREEN DE IMAGENS -->\r\n    <ng-template #imageTemplate>\r\n        <img *ngIf=\"input.base64\" class=\"animate__animated animate__zoomIn animate__faster\" [src]=\"input.base64 | safeUrl\" height=\"100%\" width=\"100%\"/>\r\n    </ng-template>\r\n\r\n    <!-- ICONE DE SAIR DO FULLSCREEN -->\r\n    <i class=\"far fa-times-circle clickable m-4 hvr hvr-grow text-4xl text-white\" (click)=\"restoreZoom()\"></i>\r\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.Store }], propDecorators: { input: [{
                 type: Input
             }], form: [{
@@ -7272,7 +7271,7 @@ class NgxSmzFormsModule {
             ReactiveFormsModule,
             SmzTemplatesPipeModule,
             TooltipModule,
-            MessagesModule,
+            MessageModule,
             SafeContentPipeModule,
             SmzInputTagAreaModule,
             NgxSmzDataPipesModule,
@@ -7329,7 +7328,7 @@ class NgxSmzFormsModule {
             ReactiveFormsModule,
             SmzTemplatesPipeModule,
             TooltipModule,
-            MessagesModule,
+            MessageModule,
             SafeContentPipeModule,
             SmzInputTagAreaModule,
             NgxSmzDataPipesModule,
@@ -7430,7 +7429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         ReactiveFormsModule,
                         SmzTemplatesPipeModule,
                         TooltipModule,
-                        MessagesModule,
+                        MessageModule,
                         SafeContentPipeModule,
                         SmzInputTagAreaModule,
                         NgxSmzDataPipesModule,
@@ -7511,11 +7510,11 @@ class DialogContentManagerComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogContentManagerComponent, deps: [{ token: DynamicDialogRef }, { token: SmzDynamicDialogConfig }, { token: SmzDialogsVisibilityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogContentManagerComponent, isStandalone: false, selector: "smz-dialog-content-manager", ngImport: i0, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n    <div class=\"container\">\r\n        <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-nogutter items-start justify-start'\">\r\n\r\n            <!-- <p-progressBar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-loading\"></p-progressBar> -->\r\n            <p-messages [(value)]=\"config.data._context.apiErrors\" [enableService]=\"false\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\"></p-messages>\r\n\r\n            <ng-container *ngFor=\"let feature of config.data._context.injectables\">\r\n                <div class=\"col\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn != null\">\r\n                            <ng-container *ngIf=\"(visibility.observers[feature.componentId + feature.component.name].visibility$ | async) as visibilityState\">\r\n                                <ng-container *ngIf=\"!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state\">\r\n                                    <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn == null\">\r\n                        <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InjectComponentDirective, selector: "[appInjectComponent]", inputs: ["appInjectComponent", "context"] }, { kind: "component", type: i3$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SetTemplateClassesPipe, name: "setTemplateClasses" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: DialogContentManagerComponent, isStandalone: false, selector: "smz-dialog-content-manager", ngImport: i0, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n    <div class=\"smz-dialog-container\">\r\n        <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-nogutter items-start justify-start'\">\r\n\r\n            <!-- <p-progressBar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-loading\"></p-progressBar> -->\r\n            @for (error of config.data._context.apiErrors; track error) {\r\n                <p-message [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\">\r\n                    {{error}}\r\n                </p-message>\r\n            }\r\n\r\n            <ng-container *ngFor=\"let feature of config.data._context.injectables\">\r\n                <div class=\"col\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn != null\">\r\n                            <ng-container *ngIf=\"(visibility.observers[feature.componentId + feature.component.name].visibility$ | async) as visibilityState\">\r\n                                <ng-container *ngIf=\"!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state\">\r\n                                    <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn == null\">\r\n                        <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: InjectComponentDirective, selector: "[appInjectComponent]", inputs: ["appInjectComponent", "context"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SetTemplateClassesPipe, name: "setTemplateClasses" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogContentManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-dialog-content-manager', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n    <div class=\"container\">\r\n        <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-nogutter items-start justify-start'\">\r\n\r\n            <!-- <p-progressBar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-loading\"></p-progressBar> -->\r\n            <p-messages [(value)]=\"config.data._context.apiErrors\" [enableService]=\"false\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\"></p-messages>\r\n\r\n            <ng-container *ngFor=\"let feature of config.data._context.injectables\">\r\n                <div class=\"col\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn != null\">\r\n                            <ng-container *ngIf=\"(visibility.observers[feature.componentId + feature.component.name].visibility$ | async) as visibilityState\">\r\n                                <ng-container *ngIf=\"!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state\">\r\n                                    <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn == null\">\r\n                        <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"] }]
+            args: [{ selector: 'smz-dialog-content-manager', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n    <div class=\"smz-dialog-container\">\r\n        <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-nogutter items-start justify-start'\">\r\n\r\n            <!-- <p-progressBar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-loading\"></p-progressBar> -->\r\n            @for (error of config.data._context.apiErrors; track error) {\r\n                <p-message [ngStyle]=\"{ 'width': '100%;' }\" styleClass=\"dialog-messages\">\r\n                    {{error}}\r\n                </p-message>\r\n            }\r\n\r\n            <ng-container *ngFor=\"let feature of config.data._context.injectables\">\r\n                <div class=\"col\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn != null\">\r\n                            <ng-container *ngIf=\"(visibility.observers[feature.componentId + feature.component.name].visibility$ | async) as visibilityState\">\r\n                                <ng-container *ngIf=\"!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state\">\r\n                                    <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"feature.visibilityDependsOn == null\">\r\n                        <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"] }]
         }], ctorParameters: () => [{ type: DynamicDialogRef }, { type: SmzDynamicDialogConfig }, { type: SmzDialogsVisibilityService }] });
 
 class MessageContentComponent {
@@ -8718,11 +8717,11 @@ class DialogFooterComponent {
         return response;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogFooterComponent, deps: [{ token: DynamicDialogRef }, { token: SmzDynamicDialogConfig }, { token: SmzDialogsVisibilityService }, { token: InjectComponentService }, { token: i0.ChangeDetectorRef }, { token: i1$2.Actions }, { token: i1$2.Store }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogFooterComponent, isStandalone: false, selector: "smz-dialog-footer", ngImport: i0, template: "<ng-container *ngIf=\"dialogConfig.data._context as context\">\r\n\r\n    <p-toolbar class=\"smz-dialog-footer\">\r\n        <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder == null || context.customButtonsOrder === 'first'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [ngClass]=\"customButton.class\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showCancelButton\"\r\n                [label]=\"context.builtInButtons.cancelName\"\r\n                [ngClass]=\"context.builtInButtons.cancelClass\"\r\n                [styleClass]=\"context.builtInButtons.cancelClass\"\r\n                (onClick)=\"close()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showConfirmButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.confirmName\"\r\n                [ngClass]=\"context.builtInButtons.confirmClass\"\r\n                [styleClass]=\"context.builtInButtons.confirmClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"confirm()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showOkButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.okName\"\r\n                [ngClass]=\"context.builtInButtons.okClass\"\r\n                [styleClass]=\"context.builtInButtons.okClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"ok()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showSaveButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.saveName\"\r\n                [ngClass]=\"context.builtInButtons.saveClass\"\r\n                [styleClass]=\"context.builtInButtons.saveClass\"\r\n                [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"save()\">\r\n            </p-button>\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder === 'last'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n\r\n                    <!-- DependsOnValidation -->\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [ngClass]=\"customButton.class\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </p-toolbar>\r\n\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => i4$2.Button), selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => i8.Toolbar), selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i0.forwardRef(() => i2.Tooltip), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i0.forwardRef(() => ConfirmOnEnterDirective), selector: "[confirmOnEnter]", inputs: ["confirmOnEnter", "clickEvent", "delayConfirmation", "disabled", "dialogId"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DialogFooterComponent, isStandalone: false, selector: "smz-dialog-footer", ngImport: i0, template: "<ng-container *ngIf=\"dialogConfig.data._context as context\">\r\n\r\n    <p-toolbar class=\"smz-dialog-footer\">\r\n        <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder == null || context.customButtonsOrder === 'first'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showCancelButton\"\r\n                [label]=\"context.builtInButtons.cancelName\"\r\n                [styleClass]=\"context.builtInButtons.cancelClass\"\r\n                (onClick)=\"close()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showConfirmButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.confirmName\"\r\n                [styleClass]=\"context.builtInButtons.confirmClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"confirm()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showOkButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.okName\"\r\n                [styleClass]=\"context.builtInButtons.okClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"ok()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showSaveButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.saveName\"\r\n                [styleClass]=\"context.builtInButtons.saveClass\"\r\n                [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"save()\">\r\n            </p-button>\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder === 'last'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n\r\n                    <!-- DependsOnValidation -->\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </p-toolbar>\r\n\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => i4$2.Button), selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => i8.Toolbar), selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i0.forwardRef(() => i2.Tooltip), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i0.forwardRef(() => ConfirmOnEnterDirective), selector: "[confirmOnEnter]", inputs: ["confirmOnEnter", "clickEvent", "delayConfirmation", "disabled", "dialogId"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-dialog-footer', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container *ngIf=\"dialogConfig.data._context as context\">\r\n\r\n    <p-toolbar class=\"smz-dialog-footer\">\r\n        <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder == null || context.customButtonsOrder === 'first'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [ngClass]=\"customButton.class\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showCancelButton\"\r\n                [label]=\"context.builtInButtons.cancelName\"\r\n                [ngClass]=\"context.builtInButtons.cancelClass\"\r\n                [styleClass]=\"context.builtInButtons.cancelClass\"\r\n                (onClick)=\"close()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showConfirmButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.confirmName\"\r\n                [ngClass]=\"context.builtInButtons.confirmClass\"\r\n                [styleClass]=\"context.builtInButtons.confirmClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"confirm()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showOkButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.okName\"\r\n                [ngClass]=\"context.builtInButtons.okClass\"\r\n                [styleClass]=\"context.builtInButtons.okClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"ok()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showSaveButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.saveName\"\r\n                [ngClass]=\"context.builtInButtons.saveClass\"\r\n                [styleClass]=\"context.builtInButtons.saveClass\"\r\n                [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"save()\">\r\n            </p-button>\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder === 'last'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n\r\n                    <!-- DependsOnValidation -->\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [ngClass]=\"customButton.class\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </p-toolbar>\r\n\r\n</ng-container>" }]
+            args: [{ selector: 'smz-dialog-footer', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container *ngIf=\"dialogConfig.data._context as context\">\r\n\r\n    <p-toolbar class=\"smz-dialog-footer\">\r\n        <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder == null || context.customButtonsOrder === 'first'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showCancelButton\"\r\n                [label]=\"context.builtInButtons.cancelName\"\r\n                [styleClass]=\"context.builtInButtons.cancelClass\"\r\n                (onClick)=\"close()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showConfirmButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.confirmName\"\r\n                [styleClass]=\"context.builtInButtons.confirmClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"confirm()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showOkButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.okName\"\r\n                [styleClass]=\"context.builtInButtons.okClass\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"ok()\">\r\n            </p-button>\r\n\r\n            <!-- DependsOnValidation -->\r\n            <p-button\r\n                *ngIf=\"context.behaviors.showSaveButton\"\r\n                [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\"\r\n                [dialogId]=\"context.id\"\r\n                [label]=\"context.builtInButtons.saveName\"\r\n                [styleClass]=\"context.builtInButtons.saveClass\"\r\n                [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\"\r\n                [disabled]=\"context.isGlobalDisabled\"\r\n                (onClick)=\"save()\">\r\n            </p-button>\r\n\r\n            <ng-container *ngIf=\"context.customButtonsOrder === 'last'\">\r\n                <ng-container *ngFor=\"let customButton of context.customButtons\">\r\n\r\n                    <!-- DependsOnValidation -->\r\n                    <p-button\r\n                        *ngIf=\"customButton.visible == null || customButton.visible\"\r\n                        [label]=\"customButton.name\"\r\n                        [styleClass]=\"customButton.class\"\r\n                        [disabled]=\"context.isGlobalDisabled || customButton.disabled\"\r\n                        [pTooltip]=\"customButton.tooltip\"\r\n                        appendTo=\"body\"\r\n                        tooltipPosition=\"top\"\r\n                        (onClick)=\"customClick(customButton)\">\r\n                    </p-button>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </p-toolbar>\r\n\r\n</ng-container>" }]
         }], ctorParameters: () => [{ type: DynamicDialogRef }, { type: SmzDynamicDialogConfig }, { type: SmzDialogsVisibilityService }, { type: InjectComponentService }, { type: i0.ChangeDetectorRef }, { type: i1$2.Actions }, { type: i1$2.Store }] });
 class ConfirmOnEnterDirective {
     el;
@@ -16708,11 +16707,11 @@ class SmzTableComponent {
         this.tableHelper.clear(this.tableKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SmzTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableEditableService }, { token: TableFormsService }, { token: TableHelperService }, { token: i1$2.Store }, { token: SmzExcelService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SmzTableComponent, isStandalone: false, selector: "smz-ui-table", inputs: { state: "state", items: "items", loading: "loading" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange", create: "create", update: "update", delete: "delete" }, providers: [TableEditableService, TableFormsService], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }, { propertyName: "columnMultiselect", first: true, predicate: ["columnMultiselect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"state | tableContext as context; else noStateTemplate\">\r\n\r\n    <ng-container *ngIf=\"(context.state.emptyFeedback != null && (context.state.emptyFeedback.extraInfo || context.state.emptyFeedback.image || context.state.emptyFeedback.actionButtons)) && (items != null && items.length === 0) && context.state.emptyFeedback.isFeatured; else tableTemplate\">\r\n        <smz-data-info\r\n            [image]=\"context.state.emptyFeedback.image\"\r\n            [message]=\"context.state.emptyFeedback.message\"\r\n            [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\r\n            [actions]=\"context.state.emptyFeedback.actionButtons\">\r\n\r\n            <ng-template pTemplate=\"actions\">\r\n                <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n            </ng-template>\r\n\r\n        </smz-data-info>\r\n    </ng-container>\r\n\r\n    <ng-template #tableTemplate>\r\n\r\n        <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as source\">\r\n\r\n        <ng-container *ngIf=\"(source ?? items | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize) as clonedData\">\r\n        <p-table #dt\r\n            dataKey=\"id\"\r\n            editMode=\"row\"\r\n            [stripedRows]=\"context.state.styles.striped\"\r\n            [value]=\"clonedData.items\"\r\n            [(selection)]=\"selectedItems\"\r\n            [tableStyleClass]=\"context.state.styles.tableStyleClass\"\r\n            [styleClass]=\"'p-datatable-smz-ui-table' + (context.state.styles.showGrid ? ' p-datatable-gridlines' : '') + (context.state.styles.size === 'extra-small' ? ' p-datatable-xs' : '') + (context.state.styles.size === 'small' ? ' p-datatable-sm' : '') + (context.state.styles.size === 'large' ? ' p-datatable-lg' : '')\"\r\n            [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\r\n            [rows]=\"context.state.pagination.rows\"\r\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\r\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\r\n            [loading]=\"loading\"\r\n            [paginator]=\"context.state.pagination.isVisible\"\r\n            [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\r\n            [sortField]=\"context.state.sort.field\"\r\n            [sortMode]=\"context.state.sort.mode\"\r\n            [sortOrder]=\"context.state.sort.order\"\r\n            [multiSortMeta]=\"context.state.sort.multiSortMeta\"\r\n\r\n            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [scrollDirection]=\"context.state.viewport.scrollDirection\"\r\n\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\r\n\r\n            [columns]=\"context.visibleColumns\"\r\n            [frozenColumns]=\"context.frozenColumns\"\r\n            [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\r\n            [resizableColumns]=\"context.state.viewport.resizableColumns\"\r\n            [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\r\n\r\n            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n\r\n            <ng-template pTemplate=\"caption\" *ngIf=\"context.state.caption.isVisible\">\r\n\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <div *ngIf=\"context.state.caption.title != null\" class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                    <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n\r\n                    <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n\r\n                    <button *ngIf=\"context.state.caption.exportToPdf.isButtonVisible\" pButton [label]=\"context.state.locale.exportToPdf.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.exportToExcel.isButtonVisible\" pButton [label]=\"context.state.locale.exportToExcel.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.editable.creation.isButtonVisible\" pButton [label]=\"context.state.editable.creation.buttonLabel\" class=\"p-button-outlined\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\"></button>\r\n                    <button *ngIf=\"context.state.caption.rowSelection.isButtonVisible\" pButton [label]=\"context.state.locale.rowSelection.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.clearFilters.isButtonVisible\" pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n\r\n                    <p-multiSelect\r\n                        #columnMultiselect\r\n                        *ngIf=\"context.state.caption.columnVisibility.showDropdownSelector\"\r\n                        class=\"ml-2 col-12 md:col-2\"\r\n                        styleClass=\"w-full\"\r\n                        [options]=\"context.hideableColumns\"\r\n                        [(ngModel)]=\"selectedColumns\"\r\n                        [placeholder]=\"context.state.locale.columnVisibility.placeholder\"\r\n                        [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\"\r\n                        optionLabel=\"name\"\r\n                        dataKey=\"field\"\r\n                        optionLabel=\"header\"\r\n                        [filter]=\"true\"\r\n                        (onPanelHide)=\"updateColumnsVisibility(true)\"\r\n                        [pTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\r\n                    </p-multiSelect>\r\n\r\n                    <p-iconfield *ngIf=\"context.state.caption.globalFilter.isVisible\" class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\r\n                        <p-inputicon styleClass=\"pi pi-search\" />\r\n                        <input #inputGlobal [(ngModel)]=\"globalSearchInput\" pInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" />\r\n                    </p-iconfield>\r\n\r\n                </div>\r\n\r\n                <div *ngIf=\"toolbarTemplate != null\" class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"header\" let-columns>\r\n                <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\r\n\r\n                    <th *ngIf=\"context.state.caption.rowSelection.isEnabled\" [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                        <ng-container *ngIf=\"!context.state.actions.batchActions.isVisible\">\r\n                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                        </ng-container>\r\n                    </th>\r\n\r\n                    <th *ngIf=\"context.state.rowExpansion.isEnabled\" [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"context.state.viewport.resizableColumns; else nonResizable\">\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #nonResizable>\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-template>\r\n\r\n                        <ng-template #headerContent>\r\n                            <div class=\"flex justify-start items-center\">\r\n                                <span class=\"mr-1\">{{ col.header }}</span>\r\n\r\n                                <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" *ngIf=\"col.showHeaderActions\" [col]=\"col\"></smz-table-header-actions>\r\n\r\n                                <p-sortIcon [field]=\"col.sortField\" *ngIf=\"!clonedData.showSkeleton && col.isOrderable\"></p-sortIcon>\r\n\r\n                                <ng-container *ngIf=\"!clonedData.showSkeleton\">\r\n                                    <ng-container [ngSwitch]=\"col.filter.type\">\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.currency\">\r\n                                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.numeric\">\r\n                                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.date\">\r\n                                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.text\">\r\n                                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.boolean\">\r\n                                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.dropdown\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-select>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_array\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_string\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <button *ngIf=\"context.state.caption.columnVisibility.showColumnHideButton\" pButton type=\"button\" icon=\"fa-solid fa-eye-slash\" class=\"p-button-rounded p-button-text p-button-plain\" (click)=\"hideColumn(col, context)\"></button>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <th *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable\" [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"context.state.actions.batchActions.isVisible\">\r\n                    <th [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\"\r\n                    [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                        <div class=\"grid grid-nogutter items-center justify-start\">\r\n                            <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\r\n                            <ng-container *ngIf=\"selectedItems?.length > 0\">\r\n                                <ng-container *ngFor=\"let batchItem of context.state.actions.batchActions.items\">\r\n                                    <button *ngIf=\"batchItem.visible\" pButton [label]=\"batchItem.label\" class=\"p-button-rounded p-button-text p-button-plain animate__animated animate__fadeIn\" [ngClass]=\"batchItem.styleClass\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [pTooltip]=\"batchItem.tooltip\"></button>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\r\n                <tr #editableRowElement\r\n                    [pEditableRow]=\"item\"\r\n                    tableItemAction\r\n                    [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\r\n                    [callback]=\"context.state.actions.rowBehavior.clickCallback\"\r\n                    [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\r\n                    [item]=\"item\"\r\n                    class=\"p-selectable-row\"\r\n                    [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\r\n                    >\r\n\r\n                    <td *ngIf=\"context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\r\n                        [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\r\n                        >\r\n                        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n                    </td>\r\n\r\n                    <td *ngIf=\"context.state.rowExpansion.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading, 'grid grid-nogutter justify-start items-center gap-2': context.state.rowExpansion.highlightNewItems && item._isNew }\"\r\n                        [ngStyle]=\"context.state.rowExpansion.ngStyle\"\r\n                        >\r\n                        <p-toggleButton [(ngModel)]=\"item._isExpanded\" [onIcon]=\"'fa-solid fa-chevron-down'\" [offIcon]=\"'fa-solid fa-chevron-right'\" (onChange)=\"item._isNew = false\"></p-toggleButton>\r\n                        <div *ngIf=\"context.state.rowExpansion.highlightNewItems && item._isNew\" class=\"rounded bg-cyan-400 text-sm text-white px-2 py-0 smz-table-new-tag\" (click)=\"item._isNew = false\">{{ context.state.rowExpansion.highlightLabel }}</div>\r\n                    </td>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"clonedData.showSkeleton; else dataTemplate\">\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                        </ng-container>\r\n\r\n                        <ng-template #dataTemplate>\r\n\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\r\n                                <span class=\"p-column-title\">{{ col.header }}</span>\r\n\r\n                                <p-cellEditor>\r\n\r\n                                    <!-- CELULAR COM EDITOR -->\r\n                                    <ng-template pTemplate=\"input\">\r\n                                        <ng-container [ngSwitch]=\"col.editable.type\">\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.none\">\r\n                                                <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.custom\">\r\n                                                <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.text\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <input pInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT NUMBER -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.number\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputNumber\r\n                                                                *ngVar=\"col.editable.data as numberData\"\r\n                                                                [formControl]=\"$any(control)\"\r\n                                                                [mode]=\"numberData.mode\"\r\n                                                                [minFractionDigits]=\"numberData.minFractionDigits\"\r\n                                                                [maxFractionDigits]=\"numberData.maxFractionDigits\"\r\n                                                                [currency]=\"numberData.currency\"\r\n                                                                [useGrouping]=\"numberData.useGrouping\"\r\n                                                                [allowEmpty]=\"numberData.allowEmpty\"\r\n                                                                [showClear]=\"numberData.showClear\"\r\n                                                                [showButtons]=\"numberData.showButtons\"\r\n                                                                [prefix]=\"numberData.prefix\"\r\n                                                                [suffix]=\"numberData.suffix\">\r\n                                                            </p-inputNumber>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT SWITCH -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.switch\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputSwitch [formControl]=\"$any(control)\"></p-inputSwitch>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT AREA -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.area\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <textarea pInputTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT DROPDOWN -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.dropdown\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-select appendTo=\"body\" [formControl]=\"$any(control)\" styleClass=\"w-full\" [options]=\"col.editable.data | editableSource\" optionLabel=\"name\" dataKey=\"id\" [placeholder]=\"$any(col.editable.data).placeholder\" [showClear]=\"!col.editable.validatorsPreset?.isRequired\" [filter]=\"true\"></p-select>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                             <!-- INPUT CALENDAR -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.calendar\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-datepicker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></p-datepicker>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-template>\r\n\r\n                                    <!-- CELULAR COM CONTE\u00DADO -->\r\n                                    <ng-template pTemplate=\"output\">\r\n                                        <smz-table-content\r\n                                            [col]=\"col\"\r\n                                            [pTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\r\n                                            tooltipPosition=\"left\"\r\n                                            [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\r\n                                        </smz-table-content>\r\n                                    </ng-template>\r\n                                </p-cellEditor>\r\n\r\n                            </td>\r\n\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable\">\r\n\r\n                        <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n\r\n                            <div class=\"grid grid-nogutter items-center justify-center\">\r\n                                <ng-container *ngIf=\"clonedData.showSkeleton; else menuTemplate\">\r\n                                    <div class=\"w-full\">\r\n                                        <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <ng-template #menuTemplate>\r\n\r\n                                    <!-- SEM EDITAR -->\r\n                                    <ng-container *ngIf=\"!editing\">\r\n                                        <button *ngIf=\"context.state.editable.update.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"p-button-rounded p-button-text mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow></button>\r\n                                        <button *ngIf=\"context.state.editable.remove.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"p-button-rounded p-button-text p-button-secondary mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\"></button>\r\n                                    </ng-container>\r\n\r\n                                    <!-- EDITANDO -->\r\n                                    <ng-container *ngIf=\"editing\">\r\n\r\n                                        <ng-container *ngIf=\"editableService.context[item.id] as editableContext\">\r\n                                            <!-- COM LOADING -->\r\n                                            <ng-container *ngIf=\"editableContext.isLoading\">\r\n                                                <button pButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"p-button-rounded p-button-text p-button-info mr-2\"></button>\r\n                                            </ng-container>\r\n\r\n                                            <!-- SEM LOADING -->\r\n                                            <ng-container *ngIf=\"!editableContext.isLoading\">\r\n\r\n                                                <!-- EDITANDO -->\r\n                                                <ng-container *ngIf=\"!editableContext.hasErrors\">\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isCreating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isUpdating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                </ng-container>\r\n\r\n                                                <!-- COM ERRORS -->\r\n                                                <ng-container *ngIf=\"editableContext.hasErrors\">\r\n                                                    <p-overlayPanel #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                                        <ng-template pTemplate>\r\n                                                            <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                                        </ng-template>\r\n                                                    </p-overlayPanel>\r\n                                                    <button pButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger mr-2\" (click)=\"errorsOverlay.toggle($event)\"></button>\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <button *ngIf=\"item._context?.isCreating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <button *ngIf=\"item._context?.isUpdating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n\r\n\r\n                                    <!-- CUSTOM MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.customActions.isVisible && !editing\">\r\n                                        <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                                    </ng-container>\r\n\r\n                                    <!-- MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.menu.isVisible && !editing\">\r\n                                        <smz-menu [callback]=\"context.state.actions.menu.callback\" [items]=\"context.state.actions.menu.items\" [data]=\"item\" [behavior]=\"context.state.actions.menu.behavior\" [ngClass]=\"{ 'ml-2': context.state.actions.customActions.isVisible }\" [icon]=\"context.state.actions.menu.styles.icon\" [styleClass]=\"context.state.actions.menu.styles.styleClass\" [buttonClass]=\"context.state.actions.menu.styles.buttonClass\"></smz-menu>\r\n                                    </ng-container>\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                        </td>\r\n\r\n                    </ng-container>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"item?._isExpanded\">\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\">\r\n                        <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"emptymessage\" let-columns>\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\" [ngStyle]=\"{ 'text-align': 'center' }\">\r\n                        <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\r\n                        <ng-container *ngIf=\"context.state.caption.clearFilters.isButtonVisible && hasFilters()\">\r\n                            <button pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined mt-3\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\"></button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n\r\n        </ng-container>\r\n\r\n        </ng-container>\r\n    </ng-template>\r\n\r\n</ng-container>\r\n\r\n<ng-template #noStateTemplate>\r\n    <ng-container *ngIf=\"emptyStateTemplate != null\">\r\n        <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n    </ng-container>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i8$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i8$1.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i8$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i8$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i8$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i8$1.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i8$1.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i4$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: i4$6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableItemActionsDirective, selector: "[tableItemAction]", inputs: ["isClickable", "item", "callback", "expandRowOnClick"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i19.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$5.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i21.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: i4$3.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior"] }, { kind: "component", type: i24.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i26.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i27.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: SmzColumnFilterComponent, selector: "smz-column-filter", inputs: ["currency", "display", "field", "matchMode", "showAddButton", "showMatchModes", "showOperator", "type", "showTime"] }, { kind: "component", type: SmzTableValidationMessagesComponent, selector: "smz-table-validation-messages", inputs: ["errors", "messages", "isFormInvalid", "isFormDirty"] }, { kind: "component", type: SmzTableContentComponent, selector: "smz-table-content", inputs: ["col", "contentTypes", "item", "rowIndex", "contentTemplate"] }, { kind: "component", type: SmzTableCaptionButtonsComponent, selector: "smz-table-caption-buttons", inputs: ["buttons"] }, { kind: "component", type: SmzTableHeaderActionsComponent, selector: "smz-table-header-actions", inputs: ["col"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UniqueFilterPipe, name: "uniqueFilter" }, { kind: "pipe", type: SmzTableContextPipe, name: "tableContext" }, { kind: "pipe", type: SmzFilterObjectPipe, name: "filterObject" }, { kind: "pipe", type: SmzCloneTableItemsPipe, name: "cloneTableItems" }, { kind: "pipe", type: SmzEditableSourcePipe, name: "editableSource" }, { kind: "pipe", type: SmzContentErrorsPipe, name: "contentErrors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SmzTableComponent, isStandalone: false, selector: "smz-ui-table", inputs: { state: "state", items: "items", loading: "loading" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange", create: "create", update: "update", delete: "delete" }, providers: [TableEditableService, TableFormsService], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }, { propertyName: "columnMultiselect", first: true, predicate: ["columnMultiselect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"state | tableContext as context; else noStateTemplate\">\r\n\r\n    <ng-container *ngIf=\"(context.state.emptyFeedback != null && (context.state.emptyFeedback.extraInfo || context.state.emptyFeedback.image || context.state.emptyFeedback.actionButtons)) && (items != null && items.length === 0) && context.state.emptyFeedback.isFeatured; else tableTemplate\">\r\n        <smz-data-info\r\n            [image]=\"context.state.emptyFeedback.image\"\r\n            [message]=\"context.state.emptyFeedback.message\"\r\n            [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\r\n            [actions]=\"context.state.emptyFeedback.actionButtons\">\r\n\r\n            <ng-template pTemplate=\"actions\">\r\n                <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n            </ng-template>\r\n\r\n        </smz-data-info>\r\n    </ng-container>\r\n\r\n    <ng-template #tableTemplate>\r\n\r\n        <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as source\">\r\n\r\n        <ng-container *ngIf=\"(source ?? items | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize) as clonedData\">\r\n        <p-table #dt\r\n            dataKey=\"id\"\r\n            editMode=\"row\"\r\n            [stripedRows]=\"context.state.styles.striped\"\r\n            [value]=\"clonedData.items\"\r\n            [(selection)]=\"selectedItems\"\r\n            [tableStyleClass]=\"context.state.styles.tableStyleClass\"\r\n            [styleClass]=\"'p-datatable-smz-ui-table' + (context.state.styles.showGrid ? ' p-datatable-gridlines' : '') + (context.state.styles.size === 'extra-small' ? ' p-datatable-xs' : '') + (context.state.styles.size === 'small' ? ' p-datatable-sm' : '') + (context.state.styles.size === 'large' ? ' p-datatable-lg' : '')\"\r\n            [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\r\n            [rows]=\"context.state.pagination.rows\"\r\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\r\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\r\n            [loading]=\"loading\"\r\n            [paginator]=\"context.state.pagination.isVisible\"\r\n            paginatorDropdownAppendTo=\"body\"\r\n            [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\r\n            [sortField]=\"context.state.sort.field\"\r\n            [sortMode]=\"context.state.sort.mode\"\r\n            [sortOrder]=\"context.state.sort.order\"\r\n            [multiSortMeta]=\"context.state.sort.multiSortMeta\"\r\n\r\n            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [scrollDirection]=\"context.state.viewport.scrollDirection\"\r\n\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\r\n\r\n            [columns]=\"context.visibleColumns\"\r\n            [frozenColumns]=\"context.frozenColumns\"\r\n            [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\r\n            [resizableColumns]=\"context.state.viewport.resizableColumns\"\r\n            [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\r\n\r\n            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n\r\n            <ng-template pTemplate=\"caption\" *ngIf=\"context.state.caption.isVisible\">\r\n\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <div *ngIf=\"context.state.caption.title != null\" class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                    <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n\r\n                    <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n\r\n                    <button *ngIf=\"context.state.caption.exportToPdf.isButtonVisible\" pButton [label]=\"context.state.locale.exportToPdf.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.exportToExcel.isButtonVisible\" pButton [label]=\"context.state.locale.exportToExcel.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.editable.creation.isButtonVisible\" pButton [label]=\"context.state.editable.creation.buttonLabel\" class=\"p-button-outlined\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\"></button>\r\n                    <button *ngIf=\"context.state.caption.rowSelection.isButtonVisible\" pButton [label]=\"context.state.locale.rowSelection.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.clearFilters.isButtonVisible\" pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n\r\n                    <p-multiSelect\r\n                        #columnMultiselect\r\n                        *ngIf=\"context.state.caption.columnVisibility.showDropdownSelector\"\r\n                        class=\"ml-2 col-12 md:col-2\"\r\n                        styleClass=\"w-full\"\r\n                        [options]=\"context.hideableColumns\"\r\n                        [(ngModel)]=\"selectedColumns\"\r\n                        [placeholder]=\"context.state.locale.columnVisibility.placeholder\"\r\n                        [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\"\r\n                        optionLabel=\"name\"\r\n                        dataKey=\"field\"\r\n                        optionLabel=\"header\"\r\n                        [filter]=\"true\"\r\n                        (onPanelHide)=\"updateColumnsVisibility(true)\"\r\n                        [pTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\r\n                    </p-multiSelect>\r\n\r\n                    <p-iconfield *ngIf=\"context.state.caption.globalFilter.isVisible\" class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\r\n                        <p-inputicon styleClass=\"pi pi-search\" />\r\n                        <input #inputGlobal [(ngModel)]=\"globalSearchInput\" pInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" />\r\n                    </p-iconfield>\r\n\r\n                </div>\r\n\r\n                <div *ngIf=\"toolbarTemplate != null\" class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"header\" let-columns>\r\n                <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\r\n\r\n                    <th *ngIf=\"context.state.caption.rowSelection.isEnabled\" [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                        <ng-container *ngIf=\"!context.state.actions.batchActions.isVisible\">\r\n                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                        </ng-container>\r\n                    </th>\r\n\r\n                    <th *ngIf=\"context.state.rowExpansion.isEnabled\" [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"context.state.viewport.resizableColumns; else nonResizable\">\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #nonResizable>\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-template>\r\n\r\n                        <ng-template #headerContent>\r\n                            <div class=\"flex justify-start items-center\">\r\n                                <span class=\"mr-1\">{{ col.header }}</span>\r\n\r\n                                <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" *ngIf=\"col.showHeaderActions\" [col]=\"col\"></smz-table-header-actions>\r\n\r\n                                <p-sortIcon [field]=\"col.sortField\" *ngIf=\"!clonedData.showSkeleton && col.isOrderable\"></p-sortIcon>\r\n\r\n                                <ng-container *ngIf=\"!clonedData.showSkeleton\">\r\n                                    <ng-container [ngSwitch]=\"col.filter.type\">\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.currency\">\r\n                                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.numeric\">\r\n                                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.date\">\r\n                                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.text\">\r\n                                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.boolean\">\r\n                                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.dropdown\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-select>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_array\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_string\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <button *ngIf=\"context.state.caption.columnVisibility.showColumnHideButton\" pButton type=\"button\" icon=\"fa-solid fa-eye-slash\" class=\"p-button-rounded p-button-text p-button-plain\" (click)=\"hideColumn(col, context)\"></button>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <th *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable\" [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"context.state.actions.batchActions.isVisible\">\r\n                    <th [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\"\r\n                    [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                        <div class=\"grid grid-nogutter items-center justify-start\">\r\n                            <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\r\n                            <ng-container *ngIf=\"selectedItems?.length > 0\">\r\n                                <ng-container *ngFor=\"let batchItem of context.state.actions.batchActions.items\">\r\n                                    <button *ngIf=\"batchItem.visible\" pButton [label]=\"batchItem.label\" class=\"p-button-rounded p-button-text p-button-plain animate__animated animate__fadeIn\" [ngClass]=\"batchItem.styleClass\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [pTooltip]=\"batchItem.tooltip\"></button>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\r\n                <tr #editableRowElement\r\n                    [pEditableRow]=\"item\"\r\n                    tableItemAction\r\n                    [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\r\n                    [callback]=\"context.state.actions.rowBehavior.clickCallback\"\r\n                    [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\r\n                    [item]=\"item\"\r\n                    class=\"p-selectable-row\"\r\n                    [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\r\n                    >\r\n\r\n                    <td *ngIf=\"context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\r\n                        [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\r\n                        >\r\n                        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n                    </td>\r\n\r\n                    <td *ngIf=\"context.state.rowExpansion.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading, 'grid grid-nogutter justify-start items-center gap-2': context.state.rowExpansion.highlightNewItems && item._isNew }\"\r\n                        [ngStyle]=\"context.state.rowExpansion.ngStyle\"\r\n                        >\r\n                        <p-toggleButton [(ngModel)]=\"item._isExpanded\" [onIcon]=\"'fa-solid fa-chevron-down'\" [offIcon]=\"'fa-solid fa-chevron-right'\" (onChange)=\"item._isNew = false\"></p-toggleButton>\r\n                        <div *ngIf=\"context.state.rowExpansion.highlightNewItems && item._isNew\" class=\"rounded bg-cyan-400 text-sm text-white px-2 py-0 smz-table-new-tag\" (click)=\"item._isNew = false\">{{ context.state.rowExpansion.highlightLabel }}</div>\r\n                    </td>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"clonedData.showSkeleton; else dataTemplate\">\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                        </ng-container>\r\n\r\n                        <ng-template #dataTemplate>\r\n\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\r\n                                <span class=\"p-column-title\">{{ col.header }}</span>\r\n\r\n                                <p-cellEditor>\r\n\r\n                                    <!-- CELULAR COM EDITOR -->\r\n                                    <ng-template pTemplate=\"input\">\r\n                                        <ng-container [ngSwitch]=\"col.editable.type\">\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.none\">\r\n                                                <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.custom\">\r\n                                                <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.text\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <input pInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT NUMBER -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.number\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputNumber\r\n                                                                *ngVar=\"col.editable.data as numberData\"\r\n                                                                [formControl]=\"$any(control)\"\r\n                                                                [mode]=\"numberData.mode\"\r\n                                                                [minFractionDigits]=\"numberData.minFractionDigits\"\r\n                                                                [maxFractionDigits]=\"numberData.maxFractionDigits\"\r\n                                                                [currency]=\"numberData.currency\"\r\n                                                                [useGrouping]=\"numberData.useGrouping\"\r\n                                                                [allowEmpty]=\"numberData.allowEmpty\"\r\n                                                                [showClear]=\"numberData.showClear\"\r\n                                                                [showButtons]=\"numberData.showButtons\"\r\n                                                                [prefix]=\"numberData.prefix\"\r\n                                                                [suffix]=\"numberData.suffix\">\r\n                                                            </p-inputNumber>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT SWITCH -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.switch\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputSwitch [formControl]=\"$any(control)\"></p-inputSwitch>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT AREA -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.area\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <textarea pInputTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT DROPDOWN -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.dropdown\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-select appendTo=\"body\" [formControl]=\"$any(control)\" styleClass=\"w-full\" [options]=\"col.editable.data | editableSource\" optionLabel=\"name\" dataKey=\"id\" [placeholder]=\"$any(col.editable.data).placeholder\" [showClear]=\"!col.editable.validatorsPreset?.isRequired\" [filter]=\"true\"></p-select>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                             <!-- INPUT CALENDAR -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.calendar\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-datepicker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></p-datepicker>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-template>\r\n\r\n                                    <!-- CELULAR COM CONTE\u00DADO -->\r\n                                    <ng-template pTemplate=\"output\">\r\n                                        <smz-table-content\r\n                                            [col]=\"col\"\r\n                                            [pTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\r\n                                            tooltipPosition=\"left\"\r\n                                            [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\r\n                                        </smz-table-content>\r\n                                    </ng-template>\r\n                                </p-cellEditor>\r\n\r\n                            </td>\r\n\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable\">\r\n\r\n                        <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n\r\n                            <div class=\"grid grid-nogutter items-center justify-center\">\r\n                                <ng-container *ngIf=\"clonedData.showSkeleton; else menuTemplate\">\r\n                                    <div class=\"w-full\">\r\n                                        <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <ng-template #menuTemplate>\r\n\r\n                                    <!-- SEM EDITAR -->\r\n                                    <ng-container *ngIf=\"!editing\">\r\n                                        <button *ngIf=\"context.state.editable.update.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"p-button-rounded p-button-text mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow></button>\r\n                                        <button *ngIf=\"context.state.editable.remove.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"p-button-rounded p-button-text p-button-secondary mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\"></button>\r\n                                    </ng-container>\r\n\r\n                                    <!-- EDITANDO -->\r\n                                    <ng-container *ngIf=\"editing\">\r\n\r\n                                        <ng-container *ngIf=\"editableService.context[item.id] as editableContext\">\r\n                                            <!-- COM LOADING -->\r\n                                            <ng-container *ngIf=\"editableContext.isLoading\">\r\n                                                <button pButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"p-button-rounded p-button-text p-button-info mr-2\"></button>\r\n                                            </ng-container>\r\n\r\n                                            <!-- SEM LOADING -->\r\n                                            <ng-container *ngIf=\"!editableContext.isLoading\">\r\n\r\n                                                <!-- EDITANDO -->\r\n                                                <ng-container *ngIf=\"!editableContext.hasErrors\">\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isCreating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isUpdating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                </ng-container>\r\n\r\n                                                <!-- COM ERRORS -->\r\n                                                <ng-container *ngIf=\"editableContext.hasErrors\">\r\n                                                    <p-overlayPanel #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                                        <ng-template pTemplate>\r\n                                                            <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                                        </ng-template>\r\n                                                    </p-overlayPanel>\r\n                                                    <button pButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger mr-2\" (click)=\"errorsOverlay.toggle($event)\"></button>\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <button *ngIf=\"item._context?.isCreating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <button *ngIf=\"item._context?.isUpdating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n\r\n\r\n                                    <!-- CUSTOM MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.customActions.isVisible && !editing\">\r\n                                        <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                                    </ng-container>\r\n\r\n                                    <!-- MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.menu.isVisible && !editing\">\r\n                                        <smz-menu [callback]=\"context.state.actions.menu.callback\" [items]=\"context.state.actions.menu.items\" [data]=\"item\" [behavior]=\"context.state.actions.menu.behavior\" [ngClass]=\"{ 'ml-2': context.state.actions.customActions.isVisible }\" [icon]=\"context.state.actions.menu.styles.icon\" [styleClass]=\"context.state.actions.menu.styles.styleClass\" [buttonClass]=\"context.state.actions.menu.styles.buttonClass\"></smz-menu>\r\n                                    </ng-container>\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                        </td>\r\n\r\n                    </ng-container>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"item?._isExpanded\">\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\">\r\n                        <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"emptymessage\" let-columns>\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\" [ngStyle]=\"{ 'text-align': 'center' }\">\r\n                        <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\r\n                        <ng-container *ngIf=\"context.state.caption.clearFilters.isButtonVisible && hasFilters()\">\r\n                            <button pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined mt-3\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\"></button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n\r\n        </ng-container>\r\n\r\n        </ng-container>\r\n    </ng-template>\r\n\r\n</ng-container>\r\n\r\n<ng-template #noStateTemplate>\r\n    <ng-container *ngIf=\"emptyStateTemplate != null\">\r\n        <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n    </ng-container>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i8$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i8$1.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i8$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i8$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i8$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i8$1.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i8$1.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i4$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: i4$6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableItemActionsDirective, selector: "[tableItemAction]", inputs: ["isClickable", "item", "callback", "expandRowOnClick"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i19.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$5.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i21.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: i4$3.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior"] }, { kind: "component", type: i24.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i26.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i27.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: SmzColumnFilterComponent, selector: "smz-column-filter", inputs: ["currency", "display", "field", "matchMode", "showAddButton", "showMatchModes", "showOperator", "type", "showTime"] }, { kind: "component", type: SmzTableValidationMessagesComponent, selector: "smz-table-validation-messages", inputs: ["errors", "messages", "isFormInvalid", "isFormDirty"] }, { kind: "component", type: SmzTableContentComponent, selector: "smz-table-content", inputs: ["col", "contentTypes", "item", "rowIndex", "contentTemplate"] }, { kind: "component", type: SmzTableCaptionButtonsComponent, selector: "smz-table-caption-buttons", inputs: ["buttons"] }, { kind: "component", type: SmzTableHeaderActionsComponent, selector: "smz-table-header-actions", inputs: ["col"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UniqueFilterPipe, name: "uniqueFilter" }, { kind: "pipe", type: SmzTableContextPipe, name: "tableContext" }, { kind: "pipe", type: SmzFilterObjectPipe, name: "filterObject" }, { kind: "pipe", type: SmzCloneTableItemsPipe, name: "cloneTableItems" }, { kind: "pipe", type: SmzEditableSourcePipe, name: "editableSource" }, { kind: "pipe", type: SmzContentErrorsPipe, name: "contentErrors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SmzTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableEditableService, TableFormsService], standalone: false, template: "<ng-container *ngIf=\"state | tableContext as context; else noStateTemplate\">\r\n\r\n    <ng-container *ngIf=\"(context.state.emptyFeedback != null && (context.state.emptyFeedback.extraInfo || context.state.emptyFeedback.image || context.state.emptyFeedback.actionButtons)) && (items != null && items.length === 0) && context.state.emptyFeedback.isFeatured; else tableTemplate\">\r\n        <smz-data-info\r\n            [image]=\"context.state.emptyFeedback.image\"\r\n            [message]=\"context.state.emptyFeedback.message\"\r\n            [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\r\n            [actions]=\"context.state.emptyFeedback.actionButtons\">\r\n\r\n            <ng-template pTemplate=\"actions\">\r\n                <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n            </ng-template>\r\n\r\n        </smz-data-info>\r\n    </ng-container>\r\n\r\n    <ng-template #tableTemplate>\r\n\r\n        <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as source\">\r\n\r\n        <ng-container *ngIf=\"(source ?? items | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize) as clonedData\">\r\n        <p-table #dt\r\n            dataKey=\"id\"\r\n            editMode=\"row\"\r\n            [stripedRows]=\"context.state.styles.striped\"\r\n            [value]=\"clonedData.items\"\r\n            [(selection)]=\"selectedItems\"\r\n            [tableStyleClass]=\"context.state.styles.tableStyleClass\"\r\n            [styleClass]=\"'p-datatable-smz-ui-table' + (context.state.styles.showGrid ? ' p-datatable-gridlines' : '') + (context.state.styles.size === 'extra-small' ? ' p-datatable-xs' : '') + (context.state.styles.size === 'small' ? ' p-datatable-sm' : '') + (context.state.styles.size === 'large' ? ' p-datatable-lg' : '')\"\r\n            [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\r\n            [rows]=\"context.state.pagination.rows\"\r\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\r\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\r\n            [loading]=\"loading\"\r\n            [paginator]=\"context.state.pagination.isVisible\"\r\n            [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\r\n            [sortField]=\"context.state.sort.field\"\r\n            [sortMode]=\"context.state.sort.mode\"\r\n            [sortOrder]=\"context.state.sort.order\"\r\n            [multiSortMeta]=\"context.state.sort.multiSortMeta\"\r\n\r\n            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [scrollDirection]=\"context.state.viewport.scrollDirection\"\r\n\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\r\n\r\n            [columns]=\"context.visibleColumns\"\r\n            [frozenColumns]=\"context.frozenColumns\"\r\n            [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\r\n            [resizableColumns]=\"context.state.viewport.resizableColumns\"\r\n            [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\r\n\r\n            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n\r\n            <ng-template pTemplate=\"caption\" *ngIf=\"context.state.caption.isVisible\">\r\n\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <div *ngIf=\"context.state.caption.title != null\" class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                    <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n\r\n                    <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n\r\n                    <button *ngIf=\"context.state.caption.exportToPdf.isButtonVisible\" pButton [label]=\"context.state.locale.exportToPdf.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.exportToExcel.isButtonVisible\" pButton [label]=\"context.state.locale.exportToExcel.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.editable.creation.isButtonVisible\" pButton [label]=\"context.state.editable.creation.buttonLabel\" class=\"p-button-outlined\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\"></button>\r\n                    <button *ngIf=\"context.state.caption.rowSelection.isButtonVisible\" pButton [label]=\"context.state.locale.rowSelection.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.clearFilters.isButtonVisible\" pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n\r\n                    <p-multiSelect\r\n                        #columnMultiselect\r\n                        *ngIf=\"context.state.caption.columnVisibility.showDropdownSelector\"\r\n                        class=\"ml-2 col-12 md:col-2\"\r\n                        styleClass=\"w-full\"\r\n                        [options]=\"context.hideableColumns\"\r\n                        [(ngModel)]=\"selectedColumns\"\r\n                        [placeholder]=\"context.state.locale.columnVisibility.placeholder\"\r\n                        [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\"\r\n                        optionLabel=\"name\"\r\n                        dataKey=\"field\"\r\n                        optionLabel=\"header\"\r\n                        [filter]=\"true\"\r\n                        (onPanelHide)=\"updateColumnsVisibility(true)\"\r\n                        [pTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\r\n                    </p-multiSelect>\r\n\r\n                    <p-iconfield *ngIf=\"context.state.caption.globalFilter.isVisible\" class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\r\n                        <p-inputicon styleClass=\"pi pi-search\" />\r\n                        <input #inputGlobal [(ngModel)]=\"globalSearchInput\" pInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" />\r\n                    </p-iconfield>\r\n\r\n                </div>\r\n\r\n                <div *ngIf=\"toolbarTemplate != null\" class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"header\" let-columns>\r\n                <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\r\n\r\n                    <th *ngIf=\"context.state.caption.rowSelection.isEnabled\" [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                        <ng-container *ngIf=\"!context.state.actions.batchActions.isVisible\">\r\n                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                        </ng-container>\r\n                    </th>\r\n\r\n                    <th *ngIf=\"context.state.rowExpansion.isEnabled\" [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"context.state.viewport.resizableColumns; else nonResizable\">\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #nonResizable>\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-template>\r\n\r\n                        <ng-template #headerContent>\r\n                            <div class=\"flex justify-start items-center\">\r\n                                <span class=\"mr-1\">{{ col.header }}</span>\r\n\r\n                                <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" *ngIf=\"col.showHeaderActions\" [col]=\"col\"></smz-table-header-actions>\r\n\r\n                                <p-sortIcon [field]=\"col.sortField\" *ngIf=\"!clonedData.showSkeleton && col.isOrderable\"></p-sortIcon>\r\n\r\n                                <ng-container *ngIf=\"!clonedData.showSkeleton\">\r\n                                    <ng-container [ngSwitch]=\"col.filter.type\">\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.currency\">\r\n                                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.numeric\">\r\n                                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.date\">\r\n                                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.text\">\r\n                                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.boolean\">\r\n                                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.dropdown\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-select>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_array\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_string\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <button *ngIf=\"context.state.caption.columnVisibility.showColumnHideButton\" pButton type=\"button\" icon=\"fa-solid fa-eye-slash\" class=\"p-button-rounded p-button-text p-button-plain\" (click)=\"hideColumn(col, context)\"></button>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <th *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable\" [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"context.state.actions.batchActions.isVisible\">\r\n                    <th [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\"\r\n                    [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                        <div class=\"grid grid-nogutter items-center justify-start\">\r\n                            <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\r\n                            <ng-container *ngIf=\"selectedItems?.length > 0\">\r\n                                <ng-container *ngFor=\"let batchItem of context.state.actions.batchActions.items\">\r\n                                    <button *ngIf=\"batchItem.visible\" pButton [label]=\"batchItem.label\" class=\"p-button-rounded p-button-text p-button-plain animate__animated animate__fadeIn\" [ngClass]=\"batchItem.styleClass\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [pTooltip]=\"batchItem.tooltip\"></button>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\r\n                <tr #editableRowElement\r\n                    [pEditableRow]=\"item\"\r\n                    tableItemAction\r\n                    [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\r\n                    [callback]=\"context.state.actions.rowBehavior.clickCallback\"\r\n                    [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\r\n                    [item]=\"item\"\r\n                    class=\"p-selectable-row\"\r\n                    [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\r\n                    >\r\n\r\n                    <td *ngIf=\"context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\r\n                        [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\r\n                        >\r\n                        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n                    </td>\r\n\r\n                    <td *ngIf=\"context.state.rowExpansion.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading, 'grid grid-nogutter justify-start items-center gap-2': context.state.rowExpansion.highlightNewItems && item._isNew }\"\r\n                        [ngStyle]=\"context.state.rowExpansion.ngStyle\"\r\n                        >\r\n                        <p-toggleButton [(ngModel)]=\"item._isExpanded\" [onIcon]=\"'fa-solid fa-chevron-down'\" [offIcon]=\"'fa-solid fa-chevron-right'\" (onChange)=\"item._isNew = false\"></p-toggleButton>\r\n                        <div *ngIf=\"context.state.rowExpansion.highlightNewItems && item._isNew\" class=\"rounded bg-cyan-400 text-sm text-white px-2 py-0 smz-table-new-tag\" (click)=\"item._isNew = false\">{{ context.state.rowExpansion.highlightLabel }}</div>\r\n                    </td>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"clonedData.showSkeleton; else dataTemplate\">\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                        </ng-container>\r\n\r\n                        <ng-template #dataTemplate>\r\n\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\r\n                                <span class=\"p-column-title\">{{ col.header }}</span>\r\n\r\n                                <p-cellEditor>\r\n\r\n                                    <!-- CELULAR COM EDITOR -->\r\n                                    <ng-template pTemplate=\"input\">\r\n                                        <ng-container [ngSwitch]=\"col.editable.type\">\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.none\">\r\n                                                <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.custom\">\r\n                                                <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.text\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <input pInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT NUMBER -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.number\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputNumber\r\n                                                                *ngVar=\"col.editable.data as numberData\"\r\n                                                                [formControl]=\"$any(control)\"\r\n                                                                [mode]=\"numberData.mode\"\r\n                                                                [minFractionDigits]=\"numberData.minFractionDigits\"\r\n                                                                [maxFractionDigits]=\"numberData.maxFractionDigits\"\r\n                                                                [currency]=\"numberData.currency\"\r\n                                                                [useGrouping]=\"numberData.useGrouping\"\r\n                                                                [allowEmpty]=\"numberData.allowEmpty\"\r\n                                                                [showClear]=\"numberData.showClear\"\r\n                                                                [showButtons]=\"numberData.showButtons\"\r\n                                                                [prefix]=\"numberData.prefix\"\r\n                                                                [suffix]=\"numberData.suffix\">\r\n                                                            </p-inputNumber>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT SWITCH -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.switch\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputSwitch [formControl]=\"$any(control)\"></p-inputSwitch>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT AREA -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.area\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <textarea pInputTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT DROPDOWN -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.dropdown\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-select appendTo=\"body\" [formControl]=\"$any(control)\" styleClass=\"w-full\" [options]=\"col.editable.data | editableSource\" optionLabel=\"name\" dataKey=\"id\" [placeholder]=\"$any(col.editable.data).placeholder\" [showClear]=\"!col.editable.validatorsPreset?.isRequired\" [filter]=\"true\"></p-select>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                             <!-- INPUT CALENDAR -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.calendar\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-datepicker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></p-datepicker>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-template>\r\n\r\n                                    <!-- CELULAR COM CONTE\u00DADO -->\r\n                                    <ng-template pTemplate=\"output\">\r\n                                        <smz-table-content\r\n                                            [col]=\"col\"\r\n                                            [pTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\r\n                                            tooltipPosition=\"left\"\r\n                                            [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\r\n                                        </smz-table-content>\r\n                                    </ng-template>\r\n                                </p-cellEditor>\r\n\r\n                            </td>\r\n\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable\">\r\n\r\n                        <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n\r\n                            <div class=\"grid grid-nogutter items-center justify-center\">\r\n                                <ng-container *ngIf=\"clonedData.showSkeleton; else menuTemplate\">\r\n                                    <div class=\"w-full\">\r\n                                        <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <ng-template #menuTemplate>\r\n\r\n                                    <!-- SEM EDITAR -->\r\n                                    <ng-container *ngIf=\"!editing\">\r\n                                        <button *ngIf=\"context.state.editable.update.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"p-button-rounded p-button-text mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow></button>\r\n                                        <button *ngIf=\"context.state.editable.remove.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"p-button-rounded p-button-text p-button-secondary mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\"></button>\r\n                                    </ng-container>\r\n\r\n                                    <!-- EDITANDO -->\r\n                                    <ng-container *ngIf=\"editing\">\r\n\r\n                                        <ng-container *ngIf=\"editableService.context[item.id] as editableContext\">\r\n                                            <!-- COM LOADING -->\r\n                                            <ng-container *ngIf=\"editableContext.isLoading\">\r\n                                                <button pButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"p-button-rounded p-button-text p-button-info mr-2\"></button>\r\n                                            </ng-container>\r\n\r\n                                            <!-- SEM LOADING -->\r\n                                            <ng-container *ngIf=\"!editableContext.isLoading\">\r\n\r\n                                                <!-- EDITANDO -->\r\n                                                <ng-container *ngIf=\"!editableContext.hasErrors\">\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isCreating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isUpdating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                </ng-container>\r\n\r\n                                                <!-- COM ERRORS -->\r\n                                                <ng-container *ngIf=\"editableContext.hasErrors\">\r\n                                                    <p-overlayPanel #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                                        <ng-template pTemplate>\r\n                                                            <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                                        </ng-template>\r\n                                                    </p-overlayPanel>\r\n                                                    <button pButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger mr-2\" (click)=\"errorsOverlay.toggle($event)\"></button>\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <button *ngIf=\"item._context?.isCreating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <button *ngIf=\"item._context?.isUpdating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n\r\n\r\n                                    <!-- CUSTOM MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.customActions.isVisible && !editing\">\r\n                                        <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                                    </ng-container>\r\n\r\n                                    <!-- MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.menu.isVisible && !editing\">\r\n                                        <smz-menu [callback]=\"context.state.actions.menu.callback\" [items]=\"context.state.actions.menu.items\" [data]=\"item\" [behavior]=\"context.state.actions.menu.behavior\" [ngClass]=\"{ 'ml-2': context.state.actions.customActions.isVisible }\" [icon]=\"context.state.actions.menu.styles.icon\" [styleClass]=\"context.state.actions.menu.styles.styleClass\" [buttonClass]=\"context.state.actions.menu.styles.buttonClass\"></smz-menu>\r\n                                    </ng-container>\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                        </td>\r\n\r\n                    </ng-container>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"item?._isExpanded\">\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\">\r\n                        <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"emptymessage\" let-columns>\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\" [ngStyle]=\"{ 'text-align': 'center' }\">\r\n                        <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\r\n                        <ng-container *ngIf=\"context.state.caption.clearFilters.isButtonVisible && hasFilters()\">\r\n                            <button pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined mt-3\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\"></button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n\r\n        </ng-container>\r\n\r\n        </ng-container>\r\n    </ng-template>\r\n\r\n</ng-container>\r\n\r\n<ng-template #noStateTemplate>\r\n    <ng-container *ngIf=\"emptyStateTemplate != null\">\r\n        <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n    </ng-container>\r\n</ng-template>" }]
+            args: [{ selector: 'smz-ui-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableEditableService, TableFormsService], standalone: false, template: "<ng-container *ngIf=\"state | tableContext as context; else noStateTemplate\">\r\n\r\n    <ng-container *ngIf=\"(context.state.emptyFeedback != null && (context.state.emptyFeedback.extraInfo || context.state.emptyFeedback.image || context.state.emptyFeedback.actionButtons)) && (items != null && items.length === 0) && context.state.emptyFeedback.isFeatured; else tableTemplate\">\r\n        <smz-data-info\r\n            [image]=\"context.state.emptyFeedback.image\"\r\n            [message]=\"context.state.emptyFeedback.message\"\r\n            [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\r\n            [actions]=\"context.state.emptyFeedback.actionButtons\">\r\n\r\n            <ng-template pTemplate=\"actions\">\r\n                <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n            </ng-template>\r\n\r\n        </smz-data-info>\r\n    </ng-container>\r\n\r\n    <ng-template #tableTemplate>\r\n\r\n        <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as source\">\r\n\r\n        <ng-container *ngIf=\"(source ?? items | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize) as clonedData\">\r\n        <p-table #dt\r\n            dataKey=\"id\"\r\n            editMode=\"row\"\r\n            [stripedRows]=\"context.state.styles.striped\"\r\n            [value]=\"clonedData.items\"\r\n            [(selection)]=\"selectedItems\"\r\n            [tableStyleClass]=\"context.state.styles.tableStyleClass\"\r\n            [styleClass]=\"'p-datatable-smz-ui-table' + (context.state.styles.showGrid ? ' p-datatable-gridlines' : '') + (context.state.styles.size === 'extra-small' ? ' p-datatable-xs' : '') + (context.state.styles.size === 'small' ? ' p-datatable-sm' : '') + (context.state.styles.size === 'large' ? ' p-datatable-lg' : '')\"\r\n            [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\r\n            [rows]=\"context.state.pagination.rows\"\r\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\r\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\r\n            [loading]=\"loading\"\r\n            [paginator]=\"context.state.pagination.isVisible\"\r\n            paginatorDropdownAppendTo=\"body\"\r\n            [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\r\n            [sortField]=\"context.state.sort.field\"\r\n            [sortMode]=\"context.state.sort.mode\"\r\n            [sortOrder]=\"context.state.sort.order\"\r\n            [multiSortMeta]=\"context.state.sort.multiSortMeta\"\r\n\r\n            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [scrollDirection]=\"context.state.viewport.scrollDirection\"\r\n\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\r\n\r\n            [columns]=\"context.visibleColumns\"\r\n            [frozenColumns]=\"context.frozenColumns\"\r\n            [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\r\n            [resizableColumns]=\"context.state.viewport.resizableColumns\"\r\n            [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\r\n\r\n            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n\r\n            <ng-template pTemplate=\"caption\" *ngIf=\"context.state.caption.isVisible\">\r\n\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <div *ngIf=\"context.state.caption.title != null\" class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                    <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n\r\n                    <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n\r\n                    <button *ngIf=\"context.state.caption.exportToPdf.isButtonVisible\" pButton [label]=\"context.state.locale.exportToPdf.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.exportToExcel.isButtonVisible\" pButton [label]=\"context.state.locale.exportToExcel.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.editable.creation.isButtonVisible\" pButton [label]=\"context.state.editable.creation.buttonLabel\" class=\"p-button-outlined\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\"></button>\r\n                    <button *ngIf=\"context.state.caption.rowSelection.isButtonVisible\" pButton [label]=\"context.state.locale.rowSelection.label\" class=\"p-button-outlined\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n                    <button *ngIf=\"context.state.caption.clearFilters.isButtonVisible\" pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\"></button>\r\n\r\n                    <p-multiSelect\r\n                        #columnMultiselect\r\n                        *ngIf=\"context.state.caption.columnVisibility.showDropdownSelector\"\r\n                        class=\"ml-2 col-12 md:col-2\"\r\n                        styleClass=\"w-full\"\r\n                        [options]=\"context.hideableColumns\"\r\n                        [(ngModel)]=\"selectedColumns\"\r\n                        [placeholder]=\"context.state.locale.columnVisibility.placeholder\"\r\n                        [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\"\r\n                        optionLabel=\"name\"\r\n                        dataKey=\"field\"\r\n                        optionLabel=\"header\"\r\n                        [filter]=\"true\"\r\n                        (onPanelHide)=\"updateColumnsVisibility(true)\"\r\n                        [pTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\r\n                    </p-multiSelect>\r\n\r\n                    <p-iconfield *ngIf=\"context.state.caption.globalFilter.isVisible\" class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\r\n                        <p-inputicon styleClass=\"pi pi-search\" />\r\n                        <input #inputGlobal [(ngModel)]=\"globalSearchInput\" pInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" />\r\n                    </p-iconfield>\r\n\r\n                </div>\r\n\r\n                <div *ngIf=\"toolbarTemplate != null\" class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"header\" let-columns>\r\n                <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\r\n\r\n                    <th *ngIf=\"context.state.caption.rowSelection.isEnabled\" [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                        <ng-container *ngIf=\"!context.state.actions.batchActions.isVisible\">\r\n                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                        </ng-container>\r\n                    </th>\r\n\r\n                    <th *ngIf=\"context.state.rowExpansion.isEnabled\" [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"context.state.viewport.resizableColumns; else nonResizable\">\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th pResizableColumn [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #nonResizable>\r\n                            <ng-container *ngIf=\"col.isOrderable\">\r\n                                <th [pSortableColumn]=\"col.sortField\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"!col.isOrderable\">\r\n                                <th [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\r\n                                    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-template>\r\n\r\n                        <ng-template #headerContent>\r\n                            <div class=\"flex justify-start items-center\">\r\n                                <span class=\"mr-1\">{{ col.header }}</span>\r\n\r\n                                <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" *ngIf=\"col.showHeaderActions\" [col]=\"col\"></smz-table-header-actions>\r\n\r\n                                <p-sortIcon [field]=\"col.sortField\" *ngIf=\"!clonedData.showSkeleton && col.isOrderable\"></p-sortIcon>\r\n\r\n                                <ng-container *ngIf=\"!clonedData.showSkeleton\">\r\n                                    <ng-container [ngSwitch]=\"col.filter.type\">\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.currency\">\r\n                                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.numeric\">\r\n                                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.date\">\r\n                                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.text\">\r\n                                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.boolean\">\r\n                                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.dropdown\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-select>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_array\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"filterTypes.multiselect_string\">\r\n                                            <ng-container *ngIf=\"col.filterField | filterObject as filterField\">\r\n                                                <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\r\n                                                    <ng-template pTemplate=\"header\">\r\n                                                        <div class=\"px-3 pt-3 pb-0\">\r\n                                                            <span class=\"p-text-bold\">{{ col.header }}</span>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                    <ng-template pTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                                        <p-multiSelect [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (onChange)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></p-multiSelect>\r\n                                                    </ng-template>\r\n                                                </smz-column-filter>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <button *ngIf=\"context.state.caption.columnVisibility.showColumnHideButton\" pButton type=\"button\" icon=\"fa-solid fa-eye-slash\" class=\"p-button-rounded p-button-text p-button-plain\" (click)=\"hideColumn(col, context)\"></button>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <th *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable\" [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"context.state.actions.batchActions.isVisible\">\r\n                    <th [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\"\r\n                    [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                        <div class=\"grid grid-nogutter items-center justify-start\">\r\n                            <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\r\n                            <ng-container *ngIf=\"selectedItems?.length > 0\">\r\n                                <ng-container *ngFor=\"let batchItem of context.state.actions.batchActions.items\">\r\n                                    <button *ngIf=\"batchItem.visible\" pButton [label]=\"batchItem.label\" class=\"p-button-rounded p-button-text p-button-plain animate__animated animate__fadeIn\" [ngClass]=\"batchItem.styleClass\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [pTooltip]=\"batchItem.tooltip\"></button>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\r\n                <tr #editableRowElement\r\n                    [pEditableRow]=\"item\"\r\n                    tableItemAction\r\n                    [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\r\n                    [callback]=\"context.state.actions.rowBehavior.clickCallback\"\r\n                    [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\r\n                    [item]=\"item\"\r\n                    class=\"p-selectable-row\"\r\n                    [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\r\n                    >\r\n\r\n                    <td *ngIf=\"context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\r\n                        [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\r\n                        >\r\n                        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\r\n                    </td>\r\n\r\n                    <td *ngIf=\"context.state.rowExpansion.isEnabled && !clonedData.showSkeleton\"\r\n                        clickStopPropagation\r\n                        class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\r\n                        [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading, 'grid grid-nogutter justify-start items-center gap-2': context.state.rowExpansion.highlightNewItems && item._isNew }\"\r\n                        [ngStyle]=\"context.state.rowExpansion.ngStyle\"\r\n                        >\r\n                        <p-toggleButton [(ngModel)]=\"item._isExpanded\" [onIcon]=\"'fa-solid fa-chevron-down'\" [offIcon]=\"'fa-solid fa-chevron-right'\" (onChange)=\"item._isNew = false\"></p-toggleButton>\r\n                        <div *ngIf=\"context.state.rowExpansion.highlightNewItems && item._isNew\" class=\"rounded bg-cyan-400 text-sm text-white px-2 py-0 smz-table-new-tag\" (click)=\"item._isNew = false\">{{ context.state.rowExpansion.highlightLabel }}</div>\r\n                    </td>\r\n\r\n                    <ng-container *ngFor=\"let col of columns\">\r\n\r\n                        <ng-container *ngIf=\"clonedData.showSkeleton; else dataTemplate\">\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                        </ng-container>\r\n\r\n                        <ng-template #dataTemplate>\r\n\r\n                            <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\r\n                                <span class=\"p-column-title\">{{ col.header }}</span>\r\n\r\n                                <p-cellEditor>\r\n\r\n                                    <!-- CELULAR COM EDITOR -->\r\n                                    <ng-template pTemplate=\"input\">\r\n                                        <ng-container [ngSwitch]=\"col.editable.type\">\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.none\">\r\n                                                <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.custom\">\r\n                                                <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.text\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <input pInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT NUMBER -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.number\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputNumber\r\n                                                                *ngVar=\"col.editable.data as numberData\"\r\n                                                                [formControl]=\"$any(control)\"\r\n                                                                [mode]=\"numberData.mode\"\r\n                                                                [minFractionDigits]=\"numberData.minFractionDigits\"\r\n                                                                [maxFractionDigits]=\"numberData.maxFractionDigits\"\r\n                                                                [currency]=\"numberData.currency\"\r\n                                                                [useGrouping]=\"numberData.useGrouping\"\r\n                                                                [allowEmpty]=\"numberData.allowEmpty\"\r\n                                                                [showClear]=\"numberData.showClear\"\r\n                                                                [showButtons]=\"numberData.showButtons\"\r\n                                                                [prefix]=\"numberData.prefix\"\r\n                                                                [suffix]=\"numberData.suffix\">\r\n                                                            </p-inputNumber>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT SWITCH -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.switch\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-inputSwitch [formControl]=\"$any(control)\"></p-inputSwitch>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT TEXT AREA -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.area\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <textarea pInputTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <!-- INPUT DROPDOWN -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.dropdown\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-select appendTo=\"body\" [formControl]=\"$any(control)\" styleClass=\"w-full\" [options]=\"col.editable.data | editableSource\" optionLabel=\"name\" dataKey=\"id\" [placeholder]=\"$any(col.editable.data).placeholder\" [showClear]=\"!col.editable.validatorsPreset?.isRequired\" [filter]=\"true\"></p-select>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                             <!-- INPUT CALENDAR -->\r\n                                            <ng-container *ngSwitchCase=\"editableTypes.calendar\">\r\n                                                <ng-container *ngIf=\"editableService.context[item.id]?.form as form\">\r\n                                                    <ng-container *ngIf=\"form.controls[col.editable.property] as control\">\r\n                                                        <div class=\"relative w-full\">\r\n                                                            <p-datepicker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></p-datepicker>\r\n                                                            <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\r\n                                                        </div>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-template>\r\n\r\n                                    <!-- CELULAR COM CONTE\u00DADO -->\r\n                                    <ng-template pTemplate=\"output\">\r\n                                        <smz-table-content\r\n                                            [col]=\"col\"\r\n                                            [pTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\r\n                                            tooltipPosition=\"left\"\r\n                                            [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\r\n                                        </smz-table-content>\r\n                                    </ng-template>\r\n                                </p-cellEditor>\r\n\r\n                            </td>\r\n\r\n                        </ng-template>\r\n\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable\">\r\n\r\n                        <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n\r\n                            <div class=\"grid grid-nogutter items-center justify-center\">\r\n                                <ng-container *ngIf=\"clonedData.showSkeleton; else menuTemplate\">\r\n                                    <div class=\"w-full\">\r\n                                        <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <ng-template #menuTemplate>\r\n\r\n                                    <!-- SEM EDITAR -->\r\n                                    <ng-container *ngIf=\"!editing\">\r\n                                        <button *ngIf=\"context.state.editable.update.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"p-button-rounded p-button-text mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow></button>\r\n                                        <button *ngIf=\"context.state.editable.remove.isButtonVisible\" pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"p-button-rounded p-button-text p-button-secondary mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\"></button>\r\n                                    </ng-container>\r\n\r\n                                    <!-- EDITANDO -->\r\n                                    <ng-container *ngIf=\"editing\">\r\n\r\n                                        <ng-container *ngIf=\"editableService.context[item.id] as editableContext\">\r\n                                            <!-- COM LOADING -->\r\n                                            <ng-container *ngIf=\"editableContext.isLoading\">\r\n                                                <button pButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"p-button-rounded p-button-text p-button-info mr-2\"></button>\r\n                                            </ng-container>\r\n\r\n                                            <!-- SEM LOADING -->\r\n                                            <ng-container *ngIf=\"!editableContext.isLoading\">\r\n\r\n                                                <!-- EDITANDO -->\r\n                                                <ng-container *ngIf=\"!editableContext.hasErrors\">\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isCreating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <ng-container *ngIf=\"item._context?.isUpdating\">\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"p-button-rounded p-button-text p-button-success mr-2\"></button>\r\n                                                        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-rounded p-button-text p-button-danger\"></button>\r\n                                                    </ng-container>\r\n\r\n                                                </ng-container>\r\n\r\n                                                <!-- COM ERRORS -->\r\n                                                <ng-container *ngIf=\"editableContext.hasErrors\">\r\n                                                    <p-overlayPanel #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                                        <ng-template pTemplate>\r\n                                                            <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                                        </ng-template>\r\n                                                    </p-overlayPanel>\r\n                                                    <button pButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger mr-2\" (click)=\"errorsOverlay.toggle($event)\"></button>\r\n\r\n                                                    <!-- CRIANDO -->\r\n                                                    <button *ngIf=\"item._context?.isCreating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                    <!-- ATUALIZANDO -->\r\n                                                    <button *ngIf=\"item._context?.isUpdating\" pButton type=\"button\" icon=\"pi pi-times\" (click)=\"editableService.onRowEditCancel($event, table, item)\" class=\"p-button-sm p-button-rounded p-button-text p-button-danger\"></button>\r\n\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n\r\n\r\n                                    <!-- CUSTOM MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.customActions.isVisible && !editing\">\r\n                                        <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                                    </ng-container>\r\n\r\n                                    <!-- MENU -->\r\n                                    <ng-container *ngIf=\"context.state.actions.menu.isVisible && !editing\">\r\n                                        <smz-menu [callback]=\"context.state.actions.menu.callback\" [items]=\"context.state.actions.menu.items\" [data]=\"item\" [behavior]=\"context.state.actions.menu.behavior\" [ngClass]=\"{ 'ml-2': context.state.actions.customActions.isVisible }\" [icon]=\"context.state.actions.menu.styles.icon\" [styleClass]=\"context.state.actions.menu.styles.styleClass\" [buttonClass]=\"context.state.actions.menu.styles.buttonClass\"></smz-menu>\r\n                                    </ng-container>\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                        </td>\r\n\r\n                    </ng-container>\r\n\r\n                </tr>\r\n\r\n                <tr *ngIf=\"item?._isExpanded\">\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\">\r\n                        <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n\r\n            <ng-template pTemplate=\"emptymessage\" let-columns>\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\" [ngStyle]=\"{ 'text-align': 'center' }\">\r\n                        <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\r\n                        <ng-container *ngIf=\"context.state.caption.clearFilters.isButtonVisible && hasFilters()\">\r\n                            <button pButton [label]=\"context.state.locale.clearFilters.label\" class=\"p-button-outlined mt-3\" icon=\"pi pi-filter-slash\" (click)=\"clear(table, context)\"></button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n\r\n        </ng-container>\r\n\r\n        </ng-container>\r\n    </ng-template>\r\n\r\n</ng-container>\r\n\r\n<ng-template #noStateTemplate>\r\n    <ng-container *ngIf=\"emptyStateTemplate != null\">\r\n        <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n    </ng-container>\r\n</ng-template>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TableEditableService }, { type: TableFormsService }, { type: TableHelperService }, { type: i1$2.Store }, { type: SmzExcelService }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -30213,7 +30212,6 @@ class NgxSmzDialogsModule {
             ToolbarModule,
             SmzTemplatesPipeModule,
             TooltipModule,
-            MessagesModule,
             ProgressBarModule,
             SafeContentPipeModule,
             NgxSmzTablesModule,
@@ -30236,7 +30234,6 @@ class NgxSmzDialogsModule {
             ToolbarModule,
             SmzTemplatesPipeModule,
             TooltipModule,
-            MessagesModule,
             ProgressBarModule,
             SafeContentPipeModule,
             NgxSmzTablesModule,
@@ -30276,7 +30273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         ToolbarModule,
                         SmzTemplatesPipeModule,
                         TooltipModule,
-                        MessagesModule,
                         ProgressBarModule,
                         SafeContentPipeModule,
                         NgxSmzTablesModule,
@@ -55880,7 +55876,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: ExcelsService }], propDecorators: { onCreate$: [], onCreateSuccess: [] } });
 
-const UI_STATES = [LayoutUiState, NotificationsUiState, RouterParamsState, CommentsUiState, ExcelsUiState];
+const getDialogsInitialState = () => ({});
+// @dynamic
+let DialogsState = class DialogsState {
+    dialogs;
+    dialogService;
+    dialogCrudService;
+    constructor(dialogs, dialogService, dialogCrudService) {
+        this.dialogs = dialogs;
+        this.dialogService = dialogService;
+        this.dialogCrudService = dialogCrudService;
+    }
+    onMessage(ctx, action) {
+        const dialog = {
+            title: action.title,
+            features: [
+                { type: 'message', data: action.messages },
+            ],
+            behaviors: {
+                showCancelButton: false,
+                useAdvancedResponse: false,
+                showConfirmButton: false,
+                closeOnEscape: true,
+                showCloseButton: false,
+                showFooter: true,
+                showHeader: true,
+                showOkButton: true,
+            },
+            builtInButtons: {
+                confirmDependsOnValidation: false,
+                okName: 'OK'
+            },
+        };
+        this.dialogs.open(dialog);
+    }
+    onConfirmation(ctx, action) {
+        const dialog = {
+            title: action.title,
+            features: [
+                { type: 'message', data: action.messages },
+            ],
+            behaviors: {
+                showCancelButton: false,
+                useAdvancedResponse: false,
+                showConfirmButton: false,
+                closeOnEscape: true,
+                showCloseButton: false,
+                showFooter: true,
+                showHeader: true,
+                showOkButton: true,
+            },
+            builtInButtons: {
+                confirmDependsOnValidation: false,
+                okName: 'OK'
+            },
+            callbacks: {
+                onConfirm: () => {
+                    ctx.dispatch(new DialogsActions.ConfirmationSuccess());
+                },
+                onCancel: () => {
+                    ctx.dispatch(new DialogsActions.ConfirmationFailure());
+                },
+                onClose: () => {
+                    ctx.dispatch(new DialogsActions.ConfirmationFailure());
+                }
+            },
+            presetId: action.isCritical ? SmzPresets.CriticalConfirmation : SmzPresets.Confirmation,
+        };
+        this.dialogs.open(dialog);
+    }
+    onConfirmOnEnter(ctx, action) {
+        const topDialogId = this.dialogs.dialogRefs[this.dialogs.dialogRefs.length - 1].id;
+        if (topDialogId === action.dialogId) {
+            // console.log('me', this.dialogId);
+            if (action.delayConfirmationRate != null) {
+                setTimeout(() => {
+                    action.element.nativeElement.dispatchEvent(new Event(action.targetEventClick));
+                }, action.delayConfirmationRate);
+            }
+            else {
+                action.element.nativeElement.dispatchEvent(new Event(action.targetEventClick));
+            }
+        }
+    }
+    onShowInputListCreationCrudDialog(ctx, action) {
+        const ref = this.dialogService.open(InputListDialogCrudComponent, {
+            header: action.title,
+            width: '50%',
+            contentStyle: { "max-height": "500px", "overflow": "auto" },
+            baseZIndex: 10000,
+            data: { input: action.input, value: action.value }
+        });
+        this.dialogCrudService.ref = ref;
+        ref.onClose.subscribe((event) => {
+            if (event) {
+                ctx.dispatch(new DialogsActions.ShowInputListCreationCrudDialogSuccess(true, action.value, event.data.name));
+            }
+            else {
+                ctx.dispatch(new DialogsActions.ShowInputListCreationCrudDialogSuccess(false));
+            }
+        });
+    }
+    onShowInputListBatchCreationCrudDialog(ctx, action) {
+        const ref = this.dialogService.open(InputListBatchCrudComponent, {
+            header: action.title,
+            width: '50%',
+            contentStyle: { "max-height": "500px", "overflow": "auto" },
+            baseZIndex: 10000,
+            data: { input: action.input, value: '' }
+        });
+        this.dialogCrudService.ref = ref;
+        ref.onClose.subscribe((event) => {
+            if (event) {
+                ctx.dispatch(new DialogsActions.ShowInputListBatchCreationCrudDialogSuccess(true, event.names));
+            }
+            else {
+                ctx.dispatch(new DialogsActions.ShowInputListBatchCreationCrudDialogSuccess(false));
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogsState, deps: [{ token: SmzDialogsService }, { token: i2$4.DialogService }, { token: DialogCrudStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogsState });
+};
+__decorate([
+    Action(DialogsActions.Message)
+], DialogsState.prototype, "onMessage", null);
+__decorate([
+    Action(DialogsActions.Confirmation)
+], DialogsState.prototype, "onConfirmation", null);
+__decorate([
+    Action(DialogsActions.ConfirmOnEnter)
+], DialogsState.prototype, "onConfirmOnEnter", null);
+__decorate([
+    Action(DialogsActions.ShowInputListCreationCrudDialog)
+], DialogsState.prototype, "onShowInputListCreationCrudDialog", null);
+__decorate([
+    Action(DialogsActions.ShowInputListBatchCreationCrudDialog)
+], DialogsState.prototype, "onShowInputListBatchCreationCrudDialog", null);
+DialogsState = __decorate([
+    State({
+        name: 'dialogs',
+        defaults: getDialogsInitialState()
+    })
+], DialogsState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DialogsState, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: SmzDialogsService }, { type: i2$4.DialogService }, { type: DialogCrudStateService }], propDecorators: { onMessage: [], onConfirmation: [], onConfirmOnEnter: [], onShowInputListCreationCrudDialog: [], onShowInputListBatchCreationCrudDialog: [] } });
+
+const UI_STATES = [LayoutUiState, NotificationsUiState, RouterParamsState, CommentsUiState, ExcelsUiState, DialogsState];
 const UI_REQUIRED_ACTIONS = [];
 let UiState = class UiState {
     constructor() { }