@ngx-smz/core 21.1.2 → 21.1.4

package/fesm2022/ngx-smz-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, provideAppInitializer, inject, makeEnvironmentProviders, computed, Pipe, Input, Component, DestroyRef, EventEmitter, HostListener, Output, HostBinding, Directive, ChangeDetectionStrategy, ViewEncapsulation, Optional, NgModule, ViewChild, ContentChildren, ElementRef, Renderer2, forwardRef, Inject, ChangeDetectorRef, LOCALE_ID, Self, ErrorHandler, DEFAULT_CURRENCY_CODE, DOCUMENT, PLATFORM_ID } from '@angular/core';
+import { signal, Injectable, InjectionToken, provideAppInitializer, inject, makeEnvironmentProviders, computed, Pipe, Input, Component, DestroyRef, EventEmitter, HostListener, Output, HostBinding, Directive, ChangeDetectionStrategy, ViewEncapsulation, Optional, NgModule, ViewChild, ElementRef, Renderer2, forwardRef, Inject, ChangeDetectorRef, LOCALE_ID, ContentChildren, Self, ErrorHandler, DEFAULT_CURRENCY_CODE, DOCUMENT, PLATFORM_ID } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, getCurrencySymbol, getLocaleCurrencyCode, NgStyle, LocationStrategy, registerLocaleData, isPlatformBrowser as isPlatformBrowser$1, formatDate } from '@angular/common';
 import * as i1$3 from '@angular/forms';
@@ -21,7 +21,7 @@ import { ObjectUtils, ZIndexUtils, UniqueComponentId } from 'primeng/utils';
 import * as i1$8 from '@angular/common/http';
 import { HttpClient, provideHttpClient, withInterceptorsFromDi, HttpErrorResponse, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { cloneDeep, uniqBy, flatten as flatten$1, sortBy, isBoolean as isBoolean$1, isEmpty as isEmpty$2, isEqual } from 'lodash-es';
-import { BehaviorSubject, firstValueFrom, debounceTime, tap, of, take as take$1, Subject, throwError, map as map$1, throttleTime, switchMap, Observable, takeUntil as takeUntil$2, merge, filter as filter$1 } from 'rxjs';
+import { Subscription, BehaviorSubject, firstValueFrom, debounceTime, tap, of, take as take$1, Subject, throwError, map as map$1, throttleTime, switchMap, Observable, takeUntil as takeUntil$2, merge, filter as filter$1 } from 'rxjs';
 import * as i1$2 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import * as i1 from 'primeng/tooltip';
@@ -65,25 +65,24 @@ import * as i3$5 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i4$3 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i3$6 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import * as i5$1 from 'primeng/config';
-import { PrimeNG } from 'primeng/config';
 import { FileUploadModule } from 'primeng/fileupload';
 import moment from 'moment';
 import * as i2$5 from 'primeng/dynamicdialog';
 import { DialogService as DialogService$1 } from 'primeng/dynamicdialog';
 import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
+import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
+import * as i5$1 from 'primeng/config';
+import { PrimeNG } from 'primeng/config';
 import * as i3$9 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import cloneDeep$1 from 'lodash-es/cloneDeep';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import { cloneDeep as cloneDeep$2 } from 'lodash';
 import * as i19 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i1$9 from '@angular/router';
 import { RouterModule, NavigationEnd, RouteReuseStrategy, Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router';
+import * as i3$6 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
 import { Navigate, RouterState } from '@ngxs/router-plugin';
 import * as i25 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
@@ -107,8 +106,6 @@ import sortBy$1 from 'lodash-es/sortBy';
 import flatten$2 from 'lodash-es/flatten';
 import * as i4$5 from 'primeng/picklist';
 import { PickListModule } from 'primeng/picklist';
-import forIn from 'lodash-es/forIn';
-import startsWith from 'lodash-es/startsWith';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import localePt from '@angular/common/locales/pt';
 import 'moment/locale/pt-br';
@@ -121,16 +118,16 @@ import * as i2$6 from 'primeng/dock';
 import { DockModule } from 'primeng/dock';
 import * as i2$7 from 'primeng/blockui';
 import { BlockUIModule } from 'primeng/blockui';
+import * as i11 from 'primeng/toast';
+import { ToastModule } from 'primeng/toast';
 import * as i3$8 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
 import * as i9 from 'primeng/tree';
 import { Tree, TreeModule } from 'primeng/tree';
 import * as i8$1 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
-import * as i11 from 'primeng/menu';
+import * as i11$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i1$b from 'primeng/toast';
-import { ToastModule } from 'primeng/toast';
 import * as i2$9 from 'primeng/dataview';
 import { DataView, DataViewModule } from 'primeng/dataview';
 import * as i5$2 from 'primeng/timeline';
@@ -1978,6 +1975,7 @@ class SmzFormViewdata {
     form;
     manager;
     cdf;
+    validationMessagesService;
     isValid = false;
     isCustomValidationValid = true;
     // Is the data different from the original state?
@@ -1991,11 +1989,12 @@ class SmzFormViewdata {
     _hasChangesFromLastKnownState = false;
     previousState = '';
     cachedResponse = null;
-    constructor(config, form, manager, cdf) {
+    constructor(config, form, manager, cdf, validationMessagesService) {
         this.config = config;
         this.form = form;
         this.manager = manager;
         this.cdf = cdf;
+        this.validationMessagesService = validationMessagesService;
     }
     /** Retorna o objeto com os valores dos inputs; Esse objeto seguirá a nomemclatura do campo name de cada inputConfig */
     getData() {
@@ -2004,7 +2003,12 @@ class SmzFormViewdata {
             console.log('-------- getData ---------');
         }
         const data = {};
-        const response = { data, isValid: true, hasUnsavedChanges: false };
+        const response = {
+            data,
+            isValid: true,
+            hasUnsavedChanges: false,
+            validationMessagesByField: {}
+        };
         const formFlattenResponse = this.config.behaviors?.flattenResponse ?? false;
         for (const group of this.config.groups) {
             for (const input of group.children) {
@@ -2068,8 +2072,10 @@ class SmzFormViewdata {
         }
         // console.log('response.isValid', response.isValid);
         this.isValid = response.isValid;
+        const validationMessagesByField = this.validationMessagesService.getMessagesByPropertyName();
+        const finalResponse = { ...response, validationMessagesByField };
         // console.log('Final isValid', this.isValid);
-        this.cachedResponse = response;
+        this.cachedResponse = finalResponse;
         return this.cachedResponse;
     }
     /** Atualiza os valores dos inputs com seus dados default */
@@ -2168,6 +2174,93 @@ class SmzFormViewdata {
     }
 }
 
+class SmzFormValidationMessagesService {
+    form = null;
+    subscriptions = new Subscription();
+    controlToPropertyName = new WeakMap();
+    validationMessagesByPropertyName = new Map();
+    messagesByPropertyNameSignal = signal({}, ...(ngDevMode ? [{ debugName: "messagesByPropertyNameSignal" }] : []));
+    controlMessagesSignals = new WeakMap();
+    messagesByPropertyName = this.messagesByPropertyNameSignal.asReadonly();
+    initialize(config, form) {
+        this.resetState();
+        this.form = form;
+        for (const group of config.groups) {
+            for (const input of group.children) {
+                const control = this.form.controls[input.propertyName];
+                if (control == null) {
+                    continue;
+                }
+                this.controlToPropertyName.set(control, input.propertyName);
+                this.validationMessagesByPropertyName.set(input.propertyName, input.advancedSettings?.validationMessages ?? []);
+            }
+        }
+        this.refreshAllMessages();
+        this.subscriptions.add(this.form.statusChanges.subscribe(() => {
+            this.refreshAllMessages();
+        }));
+    }
+    getMessagesSignalByControl(control) {
+        if (control == null) {
+            return computed(() => []);
+        }
+        const cachedSignal = this.controlMessagesSignals.get(control);
+        if (cachedSignal != null) {
+            return cachedSignal;
+        }
+        const controlMessagesSignal = computed(() => {
+            const propertyName = this.controlToPropertyName.get(control);
+            if (propertyName == null) {
+                return [];
+            }
+            return this.messagesByPropertyNameSignal()[propertyName] ?? [];
+        }, ...(ngDevMode ? [{ debugName: "controlMessagesSignal" }] : []));
+        this.controlMessagesSignals.set(control, controlMessagesSignal);
+        return controlMessagesSignal;
+    }
+    getMessagesByPropertyName() {
+        return this.messagesByPropertyNameSignal();
+    }
+    refreshAllMessages() {
+        const nextMessagesByPropertyName = {};
+        this.validationMessagesByPropertyName.forEach((validationMessages, propertyName) => {
+            const control = this.form.controls[propertyName];
+            if (control != null) {
+                nextMessagesByPropertyName[propertyName] = this.resolveValidationMessages(control.errors, validationMessages);
+            }
+        });
+        this.messagesByPropertyNameSignal.set(nextMessagesByPropertyName);
+    }
+    resolveValidationMessages(errors, messages) {
+        if (errors == null) {
+            return [];
+        }
+        const resolvedMessages = [];
+        for (const errorType of Object.keys(errors)) {
+            const matchedMessage = messages.find(message => message.type === errorType);
+            if (matchedMessage != null) {
+                resolvedMessages.push(matchedMessage.message);
+            }
+            else {
+                resolvedMessages.push(`Erro desconhecido: ${errorType}`);
+            }
+        }
+        return resolvedMessages;
+    }
+    resetState() {
+        this.subscriptions.unsubscribe();
+        this.subscriptions = new Subscription();
+        this.validationMessagesByPropertyName.clear();
+        this.messagesByPropertyNameSignal.set({});
+        this.form = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFormValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFormValidationMessagesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFormValidationMessagesService, decorators: [{
+            type: Injectable
+        }] });
+
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-console, no-underscore-dangle, eqeqeq, max-len */
 class SmzFormsDropdownService {
     dependsOn;
@@ -2756,52 +2849,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             type: Injectable
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-useless-escape, max-len, @typescript-eslint/no-useless-constructor */
-let ValidationMessagesPipe$1 = class ValidationMessagesPipe {
-    constructor() {
-    }
-    transform(errors, messages) {
-        if (errors == null)
-            return [];
-        const result = [];
-        for (const error of Object.keys(errors)) {
-            const match = messages.find(x => x.type === error);
-            if (match != null) {
-                result.push(match.message);
-            }
-            else {
-                result.push(`Erro desconhecido: ${error}`);
-            }
-        }
-        return result;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValidationMessagesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: ValidationMessagesPipe, isStandalone: false, name: "validationMessages", pure: false });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValidationMessagesPipe });
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValidationMessagesPipe$1, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'validationMessages',
-                    pure: false,
-                    standalone: false
-                }]
-        }, {
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 class ValidationMessagesComponent {
+    validationMessagesService = inject(SmzFormValidationMessagesService);
+    formControl;
     input;
-    control;
+    set control(value) {
+        this.formControl = value;
+        this.controlMessages = this.validationMessagesService.getMessagesSignalByControl(value);
+    }
+    get control() {
+        return this.formControl;
+    }
     behaviors;
     extraMessages = [];
+    controlMessages = signal([], ...(ngDevMode ? [{ debugName: "controlMessages" }] : []));
     uiConfig = GlobalInjector.config;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValidationMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValidationMessagesComponent, isStandalone: false, selector: "smz-validation-messages", inputs: { input: "input", control: "control", behaviors: "behaviors", extraMessages: "extraMessages" }, ngImport: i0, template: "@if (behaviors?.showErrorsMethod != null ? control[behaviors.showErrorsMethod] : control[uiConfig.dialogs.forms.behaviors.showErrorsMethod]) {\r\n  @if ((control.errors | validationMessages : input.advancedSettings?.validationMessages); as formMessages) {\r\n    @if (formMessages | join : extraMessages; as messages) {\r\n      @if (messages.length === 1) {\r\n        @for (message of messages; track message) {\r\n          <span class=\"col-12 error-message\">{{ message }}</span>\r\n        }\r\n      }\r\n      @if (messages.length > 1) {\r\n        @if (behaviors.showMultipleErrorMessages) {\r\n          <span class=\"col-12 error-message asterisk\">{{ messages | describeArray }}</span>\r\n        }\r\n        @if (!behaviors.showMultipleErrorMessages) {\r\n          <span class=\"col-12 error-message asterisk\" [pTooltip]=\"messages | describeArray\">{{ uiConfig.dialogs.forms.multipleErrorMessagesLabel }} *</span>\r\n        }\r\n      }\r\n    }\r\n  }\r\n}", dependencies: [{ kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: DescribeArrayPipe, name: "describeArray" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: ValidationMessagesPipe$1, name: "validationMessages" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValidationMessagesComponent, isStandalone: false, selector: "smz-validation-messages", inputs: { input: "input", control: "control", behaviors: "behaviors", extraMessages: "extraMessages" }, ngImport: i0, template: "@if (behaviors?.showErrorsMethod != null ? control[behaviors.showErrorsMethod] : control[uiConfig.dialogs.forms.behaviors.showErrorsMethod]) {\r\n  @if (controlMessages() | join : extraMessages; as messages) {\r\n    @if (messages.length === 1) {\r\n      @for (message of messages; track message) {\r\n        <span class=\"col-12 error-message\">{{ message }}</span>\r\n      }\r\n    }\r\n\r\n    @if (messages.length > 1) {\r\n      @if (behaviors.showMultipleErrorMessages) {\r\n        <span class=\"col-12 error-message asterisk\">{{ messages | describeArray }}</span>\r\n      }\r\n\r\n      @if (!behaviors.showMultipleErrorMessages) {\r\n        <span class=\"col-12 error-message asterisk\" [pTooltip]=\"messages | describeArray\">{{ uiConfig.dialogs.forms.multipleErrorMessagesLabel }} *</span>\r\n      }\r\n    }\r\n  }\r\n}", dependencies: [{ kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: DescribeArrayPipe, name: "describeArray" }, { kind: "pipe", type: JoinPipe, name: "join" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValidationMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-validation-messages', standalone: false, template: "@if (behaviors?.showErrorsMethod != null ? control[behaviors.showErrorsMethod] : control[uiConfig.dialogs.forms.behaviors.showErrorsMethod]) {\r\n  @if ((control.errors | validationMessages : input.advancedSettings?.validationMessages); as formMessages) {\r\n    @if (formMessages | join : extraMessages; as messages) {\r\n      @if (messages.length === 1) {\r\n        @for (message of messages; track message) {\r\n          <span class=\"col-12 error-message\">{{ message }}</span>\r\n        }\r\n      }\r\n      @if (messages.length > 1) {\r\n        @if (behaviors.showMultipleErrorMessages) {\r\n          <span class=\"col-12 error-message asterisk\">{{ messages | describeArray }}</span>\r\n        }\r\n        @if (!behaviors.showMultipleErrorMessages) {\r\n          <span class=\"col-12 error-message asterisk\" [pTooltip]=\"messages | describeArray\">{{ uiConfig.dialogs.forms.multipleErrorMessagesLabel }} *</span>\r\n        }\r\n      }\r\n    }\r\n  }\r\n}" }]
+            args: [{ selector: 'smz-validation-messages', standalone: false, template: "@if (behaviors?.showErrorsMethod != null ? control[behaviors.showErrorsMethod] : control[uiConfig.dialogs.forms.behaviors.showErrorsMethod]) {\r\n  @if (controlMessages() | join : extraMessages; as messages) {\r\n    @if (messages.length === 1) {\r\n      @for (message of messages; track message) {\r\n        <span class=\"col-12 error-message\">{{ message }}</span>\r\n      }\r\n    }\r\n\r\n    @if (messages.length > 1) {\r\n      @if (behaviors.showMultipleErrorMessages) {\r\n        <span class=\"col-12 error-message asterisk\">{{ messages | describeArray }}</span>\r\n      }\r\n\r\n      @if (!behaviors.showMultipleErrorMessages) {\r\n        <span class=\"col-12 error-message asterisk\" [pTooltip]=\"messages | describeArray\">{{ uiConfig.dialogs.forms.multipleErrorMessagesLabel }} *</span>\r\n      }\r\n    }\r\n  }\r\n}" }]
         }], propDecorators: { input: [{
                 type: Input
             }], control: [{
@@ -4796,11 +4864,11 @@ class InputTreeComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputTreeComponent, deps: [{ token: SmzFormsDropdownService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputTreeComponent, isStandalone: false, selector: "smz-input-tree", inputs: { input: "input", formId: "formId", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "@if (nodes$ | async; as nodes) {\r\n  <smz-label\r\n    class=\"smz__input_name\"\r\n    [text]=\"input.name\"\r\n    [propertyName]=\"input.propertyName\"\r\n    [showLabel]=\"input.hideLabel != true\"\r\n    [warning]=\"input.warning?.()\"\r\n    [help]=\"input.tooltip?.()\"\r\n    [popover]=\"input.popover?.()\">\r\n  </smz-label>\r\n  <div class=\"input_inner__wrapper grid grid-nogutter\">\r\n    <p-treeSelect\r\n      class=\"col-12 grid-nogutter smz__input_value flex-1\"\r\n      containerStyleClass=\"w-full\"\r\n      [formControl]=\"control\"\r\n      [options]=\"nodes\"\r\n      [placeholder]=\"input.name\"\r\n      appendTo=\"body\"\r\n      [filter]=\"input.showFilter ? true : false\"\r\n      [selectionMode]=\"input.selectionMode\"\r\n      [filterInputAutoFocus]=\"input.autofocusFilter\"\r\n      [emptyMessage]=\"input.emptyMessage\"\r\n      [showClear]=\"input.showClear\"\r\n      [filterPlaceholder]=\"input.emptyFilterMessage\"\r\n      [scrollHeight]=\"input.scrollHeight\"\r\n      [display]=\"input.display\"\r\n      >\r\n      @for (inputType of input.allTypes; track inputType) {\r\n        <ng-template let-node [pTemplate]=\"inputType\">\r\n          <div [innerHTML]=\"node.label | safeHtml\" [pTooltip]=\"node.tooltip\"></div>\r\n        </ng-template>\r\n      }\r\n    </p-treeSelect>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n  </div>\r\n}", dependencies: [{ kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i5.TreeSelect, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: ["inputId", "scrollHeight", "metaKeySelection", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "loading", "loadingMode", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: LabelComponent, selector: "smz-label", inputs: ["text", "propertyName", "showLabel", "warning", "help", "popover"] }, { kind: "component", type: ValidationMessagesComponent, selector: "smz-validation-messages", inputs: ["input", "control", "behaviors", "extraMessages"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$2, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputTreeComponent, isStandalone: false, selector: "smz-input-tree", inputs: { input: "input", formId: "formId", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "@if (nodes$ | async; as nodes) {\n  <smz-label\n    class=\"smz__input_name\"\n    [text]=\"input.name\"\n    [propertyName]=\"input.propertyName\"\n    [showLabel]=\"input.hideLabel != true\"\n    [warning]=\"input.warning?.()\"\n    [help]=\"input.tooltip?.()\"\n    [popover]=\"input.popover?.()\">\n  </smz-label>\n  <div class=\"input_inner__wrapper grid grid-nogutter\">\n    <p-treeSelect\n      class=\"col-12 grid-nogutter smz__input_value flex-1\"\n      containerStyleClass=\"w-full\"\n      [formControl]=\"control\"\n      [options]=\"nodes\"\n      [placeholder]=\"input.name\"\n      appendTo=\"body\"\n      [filter]=\"input.showFilter ? true : false\"\n      [selectionMode]=\"input.selectionMode\"\n      [filterInputAutoFocus]=\"input.autofocusFilter\"\n      [emptyMessage]=\"input.emptyMessage\"\n      [showClear]=\"input.showClear\"\n      [filterPlaceholder]=\"input.emptyFilterMessage\"\n      [scrollHeight]=\"input.scrollHeight\"\n      [display]=\"input.display\"\n      >\n      @for (inputType of input.allTypes; track inputType) {\n        <ng-template let-node [pTemplate]=\"inputType\">\n          @if (node != null) {\n            <div [innerHTML]=\"node.label | safeHtml\" [pTooltip]=\"node.tooltip\"></div>\n          }\n        </ng-template>\n      }\n    </p-treeSelect>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n  </div>\n}", dependencies: [{ kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i5.TreeSelect, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: ["inputId", "scrollHeight", "metaKeySelection", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "loading", "loadingMode", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: LabelComponent, selector: "smz-label", inputs: ["text", "propertyName", "showLabel", "warning", "help", "popover"] }, { kind: "component", type: ValidationMessagesComponent, selector: "smz-validation-messages", inputs: ["input", "control", "behaviors", "extraMessages"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$2, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-input-tree', standalone: false, template: "@if (nodes$ | async; as nodes) {\r\n  <smz-label\r\n    class=\"smz__input_name\"\r\n    [text]=\"input.name\"\r\n    [propertyName]=\"input.propertyName\"\r\n    [showLabel]=\"input.hideLabel != true\"\r\n    [warning]=\"input.warning?.()\"\r\n    [help]=\"input.tooltip?.()\"\r\n    [popover]=\"input.popover?.()\">\r\n  </smz-label>\r\n  <div class=\"input_inner__wrapper grid grid-nogutter\">\r\n    <p-treeSelect\r\n      class=\"col-12 grid-nogutter smz__input_value flex-1\"\r\n      containerStyleClass=\"w-full\"\r\n      [formControl]=\"control\"\r\n      [options]=\"nodes\"\r\n      [placeholder]=\"input.name\"\r\n      appendTo=\"body\"\r\n      [filter]=\"input.showFilter ? true : false\"\r\n      [selectionMode]=\"input.selectionMode\"\r\n      [filterInputAutoFocus]=\"input.autofocusFilter\"\r\n      [emptyMessage]=\"input.emptyMessage\"\r\n      [showClear]=\"input.showClear\"\r\n      [filterPlaceholder]=\"input.emptyFilterMessage\"\r\n      [scrollHeight]=\"input.scrollHeight\"\r\n      [display]=\"input.display\"\r\n      >\r\n      @for (inputType of input.allTypes; track inputType) {\r\n        <ng-template let-node [pTemplate]=\"inputType\">\r\n          <div [innerHTML]=\"node.label | safeHtml\" [pTooltip]=\"node.tooltip\"></div>\r\n        </ng-template>\r\n      }\r\n    </p-treeSelect>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n  </div>\r\n}" }]
+            args: [{ selector: 'smz-input-tree', standalone: false, template: "@if (nodes$ | async; as nodes) {\n  <smz-label\n    class=\"smz__input_name\"\n    [text]=\"input.name\"\n    [propertyName]=\"input.propertyName\"\n    [showLabel]=\"input.hideLabel != true\"\n    [warning]=\"input.warning?.()\"\n    [help]=\"input.tooltip?.()\"\n    [popover]=\"input.popover?.()\">\n  </smz-label>\n  <div class=\"input_inner__wrapper grid grid-nogutter\">\n    <p-treeSelect\n      class=\"col-12 grid-nogutter smz__input_value flex-1\"\n      containerStyleClass=\"w-full\"\n      [formControl]=\"control\"\n      [options]=\"nodes\"\n      [placeholder]=\"input.name\"\n      appendTo=\"body\"\n      [filter]=\"input.showFilter ? true : false\"\n      [selectionMode]=\"input.selectionMode\"\n      [filterInputAutoFocus]=\"input.autofocusFilter\"\n      [emptyMessage]=\"input.emptyMessage\"\n      [showClear]=\"input.showClear\"\n      [filterPlaceholder]=\"input.emptyFilterMessage\"\n      [scrollHeight]=\"input.scrollHeight\"\n      [display]=\"input.display\"\n      >\n      @for (inputType of input.allTypes; track inputType) {\n        <ng-template let-node [pTemplate]=\"inputType\">\n          @if (node != null) {\n            <div [innerHTML]=\"node.label | safeHtml\" [pTooltip]=\"node.tooltip\"></div>\n          }\n        </ng-template>\n      }\n    </p-treeSelect>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n  </div>\n}" }]
         }], ctorParameters: () => [{ type: SmzFormsDropdownService }], propDecorators: { input: [{
                 type: Input
             }], formId: [{
@@ -5090,401 +5158,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, @angular-eslint/component-class-suffix, @angular-eslint/no-output-on-prefix, @typescript-eslint/no-unsafe-function-type */
-class OverlayPanel {
-    el;
-    renderer;
-    cd;
-    zone;
-    overlayService;
-    config = inject(PrimeNG);
-    dismissable = true;
-    showCloseIcon;
-    style;
-    styleClass;
-    appendTo = 'body';
-    autoZIndex = true;
-    ariaCloseLabel;
-    baseZIndex = 0;
-    focusOnShow = true;
-    mousePosition = true;
-    showTransitionOptions = '0s cubic-bezier(0, 0, 0.2, 1)';
-    hideTransitionOptions = '0s linear';
-    onShow = new EventEmitter();
-    onHide = new EventEmitter();
-    templates;
-    overlayPanelRef;
-    container;
-    overlayVisible = false;
-    render = false;
-    selfClick = false;
-    documentClickListener;
-    target;
-    mouseEvent;
-    willHide;
-    scrollHandler;
-    documentResizeListener;
-    contentTemplate;
-    destroyCallback;
-    overlayEventListener;
-    overlaySubscription;
-    constructor(el, renderer, cd, zone, overlayService) {
-        this.el = el;
-        this.renderer = renderer;
-        this.cd = cd;
-        this.zone = zone;
-        this.overlayService = overlayService;
-    }
-    ngAfterContentInit() {
-        this.templates.forEach((item) => {
-            switch (item.getType()) {
-                case 'content':
-                    this.contentTemplate = item.template;
-                    break;
-                default:
-                    this.contentTemplate = item.template;
-                    break;
-            }
-            this.cd.markForCheck();
-        });
-    }
-    bindDocumentClickListener() {
-        if (!this.documentClickListener && this.dismissable) {
-            this.zone.runOutsideAngular(() => {
-                const documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click';
-                const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-                this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
-                    if (!this.container.contains(event.target) && this.target !== event.target && !this.target.contains(event.target) && !this.selfClick) {
-                        this.zone.run(() => {
-                            this.hide();
-                        });
-                    }
-                    this.selfClick = false;
-                    this.cd.markForCheck();
-                });
-            });
-        }
-    }
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            this.documentClickListener();
-            this.documentClickListener = null;
-            this.selfClick = false;
-        }
-    }
-    toggle(event, target) {
-        if (this.overlayVisible) {
-            if (this.hasTargetChanged(event, target)) {
-                this.destroyCallback = () => {
-                    this.show(null, (target || event.currentTarget || event.target));
-                };
-            }
-            this.hide();
-        }
-        else {
-            this.show(event, target);
-        }
-    }
-    show(event, target) {
-        this.mouseEvent = event;
-        this.target = target || event.currentTarget || event.target;
-        this.overlayVisible = true;
-        this.render = true;
-        this.cd.markForCheck();
-        this.zone.runOutsideAngular(() => {
-            setTimeout(() => this.afterOverlayShown());
-        });
-    }
-    afterOverlayShown() {
-        const el = this.overlayPanelRef?.nativeElement;
-        if (!el) {
-            return;
-        }
-        this.container = el;
-        this.onShow.emit(null);
-        this.appendContainer();
-        this.align();
-        this.bindDocumentClickListener();
-        this.bindDocumentResizeListener();
-        this.bindScrollListener();
-        if (this.focusOnShow) {
-            this.focus();
-        }
-        this.overlayEventListener = (e) => {
-            if (this.container && this.container.contains(e.target)) {
-                this.selfClick = true;
-            }
-        };
-        this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
-    }
-    onOverlayClick(event) {
-        this.overlayService.add({
-            originalEvent: event,
-            target: this.el.nativeElement
-        });
-        this.selfClick = true;
-    }
-    onContentClick() {
-        this.selfClick = true;
-    }
-    hasTargetChanged(event, target) {
-        return this.target != null && this.target !== (target || event.currentTarget || event.target);
-    }
-    appendContainer() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body') {
-                document.body.appendChild(this.container);
-            }
-            else {
-                DomHandler.appendChild(this.container, this.appendTo);
-            }
-        }
-    }
-    restoreAppend() {
-        if (this.container && this.appendTo) {
-            this.el.nativeElement.appendChild(this.container);
-        }
-    }
-    align() {
-        if (this.autoZIndex) {
-            ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
-        }
-        if (this.mousePosition) {
-            this.cursorPosition(this.container, this.mouseEvent);
-        }
-        else {
-            DomHandler.absolutePosition(this.container, this.target);
-        }
-        const containerOffset = DomHandler.getOffset(this.container);
-        const targetOffset = DomHandler.getOffset(this.target);
-        let arrowLeft = 0;
-        if (containerOffset.left < targetOffset.left) {
-            arrowLeft = targetOffset.left - containerOffset.left;
-        }
-        this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
-        if (containerOffset.top < targetOffset.top) {
-            DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
-        }
-    }
-    cursorPosition(element, mouseEvent) {
-        const elementOuterHeight = 0;
-        const elementOuterWidth = 30;
-        const targetOuterHeight = 0;
-        const targetOuterWidth = 0;
-        const targetOffset = { top: mouseEvent.clientY, left: mouseEvent.clientX };
-        const windowScrollTop = DomHandler.getWindowScrollTop();
-        const windowScrollLeft = DomHandler.getWindowScrollLeft();
-        const viewport = DomHandler.getViewport();
-        let top, left;
-        if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
-            top = targetOffset.top + windowScrollTop - elementOuterHeight;
-            element.style.transformOrigin = 'bottom';
-            if (top < 0) {
-                top = windowScrollTop;
-            }
-        }
-        else {
-            top = targetOuterHeight + targetOffset.top + windowScrollTop;
-            element.style.transformOrigin = 'top';
-        }
-        if (targetOffset.left + elementOuterWidth > viewport.width) {
-            left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
-        }
-        else {
-            left = targetOffset.left + windowScrollLeft - elementOuterWidth;
-        }
-        element.style.top = top + 'px';
-        element.style.left = left + 'px';
-    }
-    onLeaveDone(event) {
-        const el = event.target;
-        el.classList.add('overlay-leave');
-        const onEnd = () => {
-            el.removeEventListener('animationend', onEnd);
-            event.animationComplete();
-            if (this.destroyCallback) {
-                this.destroyCallback();
-                this.destroyCallback = null;
-            }
-            if (this.overlaySubscription) {
-                this.overlaySubscription.unsubscribe();
-            }
-            if (this.autoZIndex && this.container) {
-                ZIndexUtils.clear(this.container);
-            }
-            this.onContainerDestroy();
-            this.onHide.emit({});
-            this.render = false;
-            this.cd.markForCheck();
-        };
-        el.addEventListener('animationend', onEnd);
-    }
-    focus() {
-        const focusable = DomHandler.findSingle(this.container, '[autofocus]');
-        if (focusable) {
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusable.focus(), 5);
-            });
-        }
-    }
-    hide() {
-        // console.log('hide');
-        this.overlayVisible = false;
-        this.cd.markForCheck();
-    }
-    onCloseClick(event) {
-        this.hide();
-        event.preventDefault();
-    }
-    onWindowResize(event) {
-        this.hide();
-    }
-    bindDocumentResizeListener() {
-        this.documentResizeListener = this.onWindowResize.bind(this);
-        window.addEventListener('resize', this.documentResizeListener);
-    }
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-    bindScrollListener() {
-        if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
-                if (this.overlayVisible) {
-                    this.hide();
-                }
-            });
-        }
-        this.scrollHandler.bindScrollListener();
-    }
-    unbindScrollListener() {
-        if (this.scrollHandler) {
-            this.scrollHandler.unbindScrollListener();
-        }
-    }
-    onContainerDestroy() {
-        if (!this.cd.destroyed) {
-            this.target = null;
-        }
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-        this.unbindScrollListener();
-    }
-    ngOnDestroy() {
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-        if (this.container && this.autoZIndex) {
-            ZIndexUtils.clear(this.container);
-        }
-        if (!this.cd.destroyed) {
-            this.target = null;
-        }
-        this.destroyCallback = null;
-        if (this.container) {
-            this.restoreAppend();
-            this.onContainerDestroy();
-        }
-        if (this.overlaySubscription) {
-            this.overlaySubscription.unsubscribe();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverlayPanel, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$7.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OverlayPanel, isStandalone: false, selector: "p-overlayPanel", inputs: { dismissable: "dismissable", showCloseIcon: "showCloseIcon", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", ariaCloseLabel: "ariaCloseLabel", baseZIndex: "baseZIndex", focusOnShow: "focusOnShow", mousePosition: "mousePosition", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "overlayPanelRef", first: true, predicate: ["overlayPanel"], descendants: true }], ngImport: i0, template: `
-        @if (render) {
-          @if (overlayVisible) {
-            <div #overlayPanel [ngClass]="'p-overlaypanel p-component'" [ngStyle]="style" [class]="styleClass" (click)="onOverlayClick($event)"
-              [style.--show-transition]="showTransitionOptions" [style.--hide-transition]="hideTransitionOptions"
-              animate.enter="overlay-enter" (animate.leave)="onLeaveDone($event)">
-              <div class="p-overlaypanel-content" (click)="onContentClick()" (mousedown)="onContentClick()">
-                <ng-content></ng-content>
-                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-              </div>
-              @if (showCloseIcon) {
-                <button type="button" class="p-overlaypanel-close p-link" (click)="onCloseClick($event)" (keydown.enter)="hide()" [attr.aria-label]="ariaCloseLabel" pRipple>
-                  <span class="p-overlaypanel-close-icon pi pi-times"></span>
-                </button>
-              }
-            </div>
-          }
-        }
-        `, isInline: true, styles: [".p-overlaypanel{position:absolute;margin-top:10px;top:0;left:0}.overlay-enter{animation:overlay-enter-anim var(--show-transition, 0s cubic-bezier(0, 0, .2, 1)) forwards}@keyframes overlay-enter-anim{0%{transform:scaleY(.8);opacity:0}to{transform:translateY(0);opacity:1}}.overlay-leave{animation:overlay-leave-anim var(--hide-transition, 0s linear) forwards}@keyframes overlay-leave-anim{to{opacity:0}}.p-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.p-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-overlaypanel:after,.p-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.p-overlaypanel:after{border-width:8px;margin-left:-8px}.p-overlaypanel:before{border-width:10px;margin-left:-10px}.p-overlaypanel-shifted:after,.p-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.p-overlaypanel-flipped:after,.p-overlaypanel-flipped:before{bottom:auto;top:100%}.p-overlaypanel.p-overlaypanel-flipped:after{border-bottom-color:transparent}.p-overlaypanel.p-overlaypanel-flipped:before{border-bottom-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$6.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverlayPanel, decorators: [{
-            type: Component,
-            args: [{ selector: 'p-overlayPanel', template: `
-        @if (render) {
-          @if (overlayVisible) {
-            <div #overlayPanel [ngClass]="'p-overlaypanel p-component'" [ngStyle]="style" [class]="styleClass" (click)="onOverlayClick($event)"
-              [style.--show-transition]="showTransitionOptions" [style.--hide-transition]="hideTransitionOptions"
-              animate.enter="overlay-enter" (animate.leave)="onLeaveDone($event)">
-              <div class="p-overlaypanel-content" (click)="onContentClick()" (mousedown)="onContentClick()">
-                <ng-content></ng-content>
-                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-              </div>
-              @if (showCloseIcon) {
-                <button type="button" class="p-overlaypanel-close p-link" (click)="onCloseClick($event)" (keydown.enter)="hide()" [attr.aria-label]="ariaCloseLabel" pRipple>
-                  <span class="p-overlaypanel-close-icon pi pi-times"></span>
-                </button>
-              }
-            </div>
-          }
-        }
-        `, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'p-element'
-                    }, standalone: false, styles: [".p-overlaypanel{position:absolute;margin-top:10px;top:0;left:0}.overlay-enter{animation:overlay-enter-anim var(--show-transition, 0s cubic-bezier(0, 0, .2, 1)) forwards}@keyframes overlay-enter-anim{0%{transform:scaleY(.8);opacity:0}to{transform:translateY(0);opacity:1}}.overlay-leave{animation:overlay-leave-anim var(--hide-transition, 0s linear) forwards}@keyframes overlay-leave-anim{to{opacity:0}}.p-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.p-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-overlaypanel:after,.p-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.p-overlaypanel:after{border-width:8px;margin-left:-8px}.p-overlaypanel:before{border-width:10px;margin-left:-10px}.p-overlaypanel-shifted:after,.p-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.p-overlaypanel-flipped:after,.p-overlaypanel-flipped:before{bottom:auto;top:100%}.p-overlaypanel.p-overlaypanel-flipped:after{border-bottom-color:transparent}.p-overlaypanel.p-overlaypanel-flipped:before{border-bottom-color:transparent}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$7.OverlayService }], propDecorators: { dismissable: [{
-                type: Input
-            }], showCloseIcon: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], autoZIndex: [{
-                type: Input
-            }], ariaCloseLabel: [{
-                type: Input
-            }], baseZIndex: [{
-                type: Input
-            }], focusOnShow: [{
-                type: Input
-            }], mousePosition: [{
-                type: Input
-            }], showTransitionOptions: [{
-                type: Input
-            }], hideTransitionOptions: [{
-                type: Input
-            }], onShow: [{
-                type: Output
-            }], onHide: [{
-                type: Output
-            }], templates: [{
-                type: ContentChildren,
-                args: [PrimeTemplate]
-            }], overlayPanelRef: [{
-                type: ViewChild,
-                args: ['overlayPanel']
-            }] } });
-class OverlayPanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverlayPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: OverlayPanelModule, declarations: [OverlayPanel], imports: [CommonModule, RippleModule, SharedModule], exports: [OverlayPanel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverlayPanelModule, imports: [CommonModule, RippleModule, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverlayPanelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, RippleModule, SharedModule],
-                    exports: [OverlayPanel, SharedModule],
-                    declarations: [OverlayPanel]
-                }]
-        }] });
-
 /* eslint-disable @angular-eslint/component-class-suffix -- SmzInputTagArea is legacy name */
 /* eslint-disable @typescript-eslint/no-explicit-any -- overlay/dom types */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment -- overlay/dom */
@@ -5660,34 +5333,30 @@ class SmzInputTagArea {
         };
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputTagArea, deps: [{ token: i1$3.NgModel, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzInputTagArea, isStandalone: false, selector: "smz-input-tag-area", inputs: { config: "config", rows: "rows", control: "control" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayPanel, descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputArea"], descendants: true }, { propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzInputTagArea, isStandalone: false, selector: "smz-input-tag-area", inputs: { config: "config", rows: "rows", control: "control" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: Popover, descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputArea"], descendants: true }, { propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }], ngImport: i0, template: `
 <textarea #inputArea id="inputArea" pInputTextarea smzSmartTag [(ngModel)]="ngModel" [formControl]="control" [options]="config?.options" [rows]="rows" (tagTyped)="onTag($event)" class="col-12"></textarea>
-<p-overlayPanel #overlay appendTo="body" [style]="{width: '450px'}" (onHide)="onHideOverlay()" styleClass="tag-overlay">
-  <ng-template pTemplate>
-    @if (currentTag) {
-      <p-listbox #listbox (onClick)="hide($event)" (keyup.enter)="hide($event)" styleClass="tag-dropdown" [options]="currentTag.data" [(ngModel)]="currentTagSelection" optionLabel="key"></p-listbox>
-    }
-  </ng-template>
-</p-overlayPanel>
-`, isInline: true, styles: [".p-overlaypanel.tag-overlay .p-overlaypanel-content{padding:0}\n", ".tag-dropdown.p-dropdown{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: SmzSmartTag, selector: "[smzSmartTag]", inputs: ["options"], outputs: ["tagTyped"] }, { kind: "component", type: OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "mousePosition", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+<p-popover #overlay appendTo="body" [style]="{width: '450px'}" (onHide)="onHideOverlay()" styleClass="tag-overlay">
+  @if (currentTag) {
+    <p-listbox #listbox (onClick)="hide($event)" (keyup.enter)="hide($event)" styleClass="tag-dropdown" [options]="currentTag.data" [(ngModel)]="currentTagSelection" optionLabel="key"></p-listbox>
+  }
+</p-popover>
+`, isInline: true, styles: [".p-overlaypanel.tag-overlay .p-overlaypanel-content{padding:0}\n", ".tag-dropdown.p-dropdown{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: SmzSmartTag, selector: "[smzSmartTag]", inputs: ["options"], outputs: ["tagTyped"] }, { kind: "component", type: i6.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputTagArea, decorators: [{
             type: Component,
             args: [{ selector: 'smz-input-tag-area', template: `
 <textarea #inputArea id="inputArea" pInputTextarea smzSmartTag [(ngModel)]="ngModel" [formControl]="control" [options]="config?.options" [rows]="rows" (tagTyped)="onTag($event)" class="col-12"></textarea>
-<p-overlayPanel #overlay appendTo="body" [style]="{width: '450px'}" (onHide)="onHideOverlay()" styleClass="tag-overlay">
-  <ng-template pTemplate>
-    @if (currentTag) {
-      <p-listbox #listbox (onClick)="hide($event)" (keyup.enter)="hide($event)" styleClass="tag-dropdown" [options]="currentTag.data" [(ngModel)]="currentTagSelection" optionLabel="key"></p-listbox>
-    }
-  </ng-template>
-</p-overlayPanel>
+<p-popover #overlay appendTo="body" [style]="{width: '450px'}" (onHide)="onHideOverlay()" styleClass="tag-overlay">
+  @if (currentTag) {
+    <p-listbox #listbox (onClick)="hide($event)" (keyup.enter)="hide($event)" styleClass="tag-dropdown" [options]="currentTag.data" [(ngModel)]="currentTagSelection" optionLabel="key"></p-listbox>
+  }
+</p-popover>
 `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, styles: [".p-overlaypanel.tag-overlay .p-overlaypanel-content{padding:0}\n", ".tag-dropdown.p-dropdown{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.NgModel, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { overlay: [{
                 type: ViewChild,
-                args: [OverlayPanel]
+                args: [Popover]
             }], inputElement: [{
                 type: ViewChild,
                 args: ['inputArea']
@@ -5708,19 +5377,19 @@ class SmzInputTagAreaModule {
             ReactiveFormsModule,
             TextareaModule,
             SmzSmartTagModule,
-            OverlayPanelModule,
             SelectModule,
             ButtonModule,
-            ListboxModule], exports: [SmzInputTagArea] });
+            ListboxModule,
+            PopoverModule], exports: [SmzInputTagArea] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputTagAreaModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TextareaModule,
             SmzSmartTagModule,
-            OverlayPanelModule,
             SelectModule,
             ButtonModule,
-            ListboxModule] });
+            ListboxModule,
+            PopoverModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputTagAreaModule, decorators: [{
             type: NgModule,
@@ -5731,10 +5400,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         ReactiveFormsModule,
                         TextareaModule,
                         SmzSmartTagModule,
-                        OverlayPanelModule,
                         SelectModule,
                         ButtonModule,
-                        ListboxModule
+                        ListboxModule,
+                        PopoverModule
                     ],
                     exports: [SmzInputTagArea],
                     declarations: [SmzInputTagArea]
@@ -6158,6 +5827,7 @@ class FormGroupComponent {
     cdf;
     manager;
     repository;
+    validationMessagesService;
     loggingService = inject(LoggingService);
     logger = this.loggingService.scoped(LoggingScope.Forms);
     isComponentActive = true;
@@ -6184,11 +5854,12 @@ class FormGroupComponent {
     controlTypes = SmzControlType;
     isInitialized = false;
     configHasErrors = false;
-    constructor(fb, cdf, manager, repository) {
+    constructor(fb, cdf, manager, repository, validationMessagesService) {
         this.fb = fb;
         this.cdf = cdf;
         this.manager = manager;
         this.repository = repository;
+        this.validationMessagesService = validationMessagesService;
     }
     ngOnInit() {
         if (this.config != null) {
@@ -6270,7 +5941,9 @@ class FormGroupComponent {
                 }
             }
             const options = { updateOn: this.config?.behaviors?.updateOn ?? 'change' };
-            this.viewdata = new SmzFormViewdata(this.config, this.fb.group(controlsConfig, options), this.manager, this.cdf);
+            const formGroup = this.fb.group(controlsConfig, options);
+            this.validationMessagesService.initialize(this.config, formGroup);
+            this.viewdata = new SmzFormViewdata(this.config, formGroup, this.manager, this.cdf, this.validationMessagesService);
             if (this.config.context == null) {
                 this.config.context = {
                     applyGlobalStyles: null,
@@ -6561,13 +6234,13 @@ class FormGroupComponent {
         this.isComponentActive = false;
         this.repository.remove(this.config);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormGroupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: SmzFormsManagerService }, { token: SmzFormsRepositoryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FormGroupComponent, isStandalone: false, selector: "smz-form-group", inputs: { config: "config" }, outputs: { statusChanges: "statusChanges", initialStateChanged: "initialStateChanged", previousStateChanged: "previousStateChanged", submit: "submit" }, usesOnChanges: true, ngImport: i0, template: "@if (config != null) {\r\n  <div class=\"smz_form_grid_container\">\r\n    @if (viewdata?.form != null && !configHasErrors) {\r\n      <form focusFirstInput [focus]=\"!config.behaviors.avoidFocusOnLoad\" [formGroup]=\"viewdata.form\" class=\"smz_form__wrapper\" (submit)=\"$event.preventDefault()\" (keydown.enter)=\"onEnter($event)\">\r\n        <ng-container *ngTemplateOutlet=\"groupTemplate\"></ng-container>\r\n      </form>\r\n    }\r\n    @if (configHasErrors) {\r\n      <div>Error</div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #groupTemplate>\r\n\r\n  <div class=\"w-full px-0 mx-auto\">\r\n    <div class=\"grid grid-nogutter flex-wrap items-start justify-start flex-gap-2\" [ngClass]=\"config.template | setTemplateClasses : ['horizontalAlignment', 'verticalAlignment']\">\r\n      @for (group of config.groups; track group) {\r\n        @if (!group.isHide) {\r\n          <div class=\"col\" [ngClass]=\"group.template | setTemplateClasses : ['row']\">\r\n            @if (group.showName) {\r\n              <div class=\"smz__group_name\">{{ group.name }}</div>\r\n            }\r\n            <div [ngClass]=\"group.styleClass ?? 'grid grid-nogutter flex-wrap items-start justify-start flex-gap-2'\">\r\n              @for (input of group.children; track input) {\r\n                @if (input.isVisible) {\r\n                  <div class=\"input__control__wrapper col relative\" [ngClass]=\"input.template | setTemplateClasses : ['row'] : [input.styleClass, group.inputStyleClass]\">\r\n                    <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: input }\"></ng-container>\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #inputTemplate let-input>\r\n\r\n  @if (input.type == controlTypes.PASSWORD) {\r\n    <smz-input-password [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-password>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_MASK) {\r\n    <smz-input-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT) {\r\n    <smz-input-text [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LIST) {\r\n    <smz-input-list [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-list>\r\n  }\r\n\r\n  @if (input.type == controlTypes.NUMBER) {\r\n    <smz-input-number [input]=\"input\" [form]=\"viewdata.form\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-number>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_AREA) {\r\n    <smz-input-text-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CONTENT_MASK) {\r\n    <smz-input-content-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-content-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TAG_AREA) {\r\n    <input-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></input-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.AUTOCOMPLETE_TAG_AREA) {\r\n    <smz-input-autocomplete-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-autocomplete-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.RADIO) {\r\n    <smz-radio-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-radio-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.SWITCH) {\r\n    <smz-input-switch [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-switch>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX) {\r\n    <smz-checkbox [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-checkbox>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX_GROUP) {\r\n    <smz-checkbox-group [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-checkbox-group>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CALENDAR) {\r\n    <smz-calendar [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-calendar>\r\n  }\r\n\r\n  @if (input.type == controlTypes.DROPDOWN) {\r\n    <smz-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_DROPDOWN) {\r\n    <smz-linked-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.FILE) {\r\n    <smz-file-upload [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [form]=\"viewdata.form\" [behaviors]=\"config.behaviors\"></smz-file-upload>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CURRENCY) {\r\n    <smz-input-currency [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-currency>\r\n  }\r\n\r\n  @if (input.type == controlTypes.MULTI_SELECT) {\r\n    <smz-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_MULTISELECT) {\r\n    <smz-linked-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.COLOR_PICKER) {\r\n    <smz-color-picker [input]=\"input\" [control]=\"$any(viewdata.form.controls[input.propertyName])\" [behaviors]=\"config.behaviors\"></smz-color-picker>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_BUTTON) {\r\n    <smz-input-text-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [viewdata]=\"viewdata\" [behaviors]=\"config.behaviors\"></smz-input-text-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TREE) {\r\n    <smz-input-tree [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-input-tree>\r\n  }\r\n\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "smz-calendar", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: CheckBoxComponent, selector: "smz-checkbox", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: CheckBoxGroupComponent, selector: "smz-checkbox-group", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: ColorPickerComponent, selector: "smz-color-picker", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: DropdownComponent, selector: "smz-dropdown", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: FileUploadComponent, selector: "smz-file-upload", inputs: ["input", "form", "control", "behaviors"], outputs: ["selectChange"] }, { kind: "directive", type: FormFocusFirstInputDirective, selector: "[focusFirstInput]", inputs: ["focus"] }, { kind: "component", type: InputCurrencyComponent, selector: "smz-input-currency", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputListComponent, selector: "smz-input-list", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputMaskComponent, selector: "smz-input-mask", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputNumberComponent, selector: "smz-input-number", inputs: ["input", "control", "behaviors", "form"] }, { kind: "component", type: InputPasswordComponent, selector: "smz-input-password", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputSwitchComponent, selector: "smz-input-switch", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTextAreaComponent, selector: "smz-input-text-area", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: SmzInputAutocompleteTagArea, selector: "smz-input-autocomplete-tag-area", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTextComponent, selector: "smz-input-text", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTreeComponent, selector: "smz-input-tree", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: LinkedDropdownComponent, selector: "smz-linked-dropdown", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: LinkedMultiSelectComponent, selector: "smz-linked-multi-select", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: MultiSelectComponent, selector: "smz-multi-select", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: RadioButtonComponent, selector: "smz-radio-button", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: InputTagAreaComponent, selector: "input-tag-area", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputContentMaskComponent, selector: "smz-input-content-mask", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTextButtonComponent, selector: "smz-input-text-button", inputs: ["input", "control", "viewdata", "behaviors"] }, { kind: "pipe", type: SetTemplateClassesPipe, name: "setTemplateClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormGroupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: SmzFormsManagerService }, { token: SmzFormsRepositoryService }, { token: SmzFormValidationMessagesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FormGroupComponent, isStandalone: false, selector: "smz-form-group", inputs: { config: "config" }, outputs: { statusChanges: "statusChanges", initialStateChanged: "initialStateChanged", previousStateChanged: "previousStateChanged", submit: "submit" }, providers: [SmzFormValidationMessagesService], usesOnChanges: true, ngImport: i0, template: "@if (config != null) {\r\n  <div class=\"smz_form_grid_container\">\r\n    @if (viewdata?.form != null && !configHasErrors) {\r\n      <form focusFirstInput [focus]=\"!config.behaviors.avoidFocusOnLoad\" [formGroup]=\"viewdata.form\" class=\"smz_form__wrapper\" (submit)=\"$event.preventDefault()\" (keydown.enter)=\"onEnter($event)\">\r\n        <ng-container *ngTemplateOutlet=\"groupTemplate\"></ng-container>\r\n      </form>\r\n    }\r\n    @if (configHasErrors) {\r\n      <div>Error</div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #groupTemplate>\r\n\r\n  <div class=\"w-full px-0 mx-auto\">\r\n    <div class=\"grid grid-nogutter flex-wrap items-start justify-start flex-gap-2\" [ngClass]=\"config.template | setTemplateClasses : ['horizontalAlignment', 'verticalAlignment']\">\r\n      @for (group of config.groups; track group) {\r\n        @if (!group.isHide) {\r\n          <div class=\"col\" [ngClass]=\"group.template | setTemplateClasses : ['row']\">\r\n            @if (group.showName) {\r\n              <div class=\"smz__group_name\">{{ group.name }}</div>\r\n            }\r\n            <div [ngClass]=\"group.styleClass ?? 'grid grid-nogutter flex-wrap items-start justify-start flex-gap-2'\">\r\n              @for (input of group.children; track input) {\r\n                @if (input.isVisible) {\r\n                  <div class=\"input__control__wrapper col relative\" [ngClass]=\"input.template | setTemplateClasses : ['row'] : [input.styleClass, group.inputStyleClass]\">\r\n                    <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: input }\"></ng-container>\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #inputTemplate let-input>\r\n\r\n  @if (input.type == controlTypes.PASSWORD) {\r\n    <smz-input-password [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-password>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_MASK) {\r\n    <smz-input-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT) {\r\n    <smz-input-text [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LIST) {\r\n    <smz-input-list [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-list>\r\n  }\r\n\r\n  @if (input.type == controlTypes.NUMBER) {\r\n    <smz-input-number [input]=\"input\" [form]=\"viewdata.form\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-number>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_AREA) {\r\n    <smz-input-text-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CONTENT_MASK) {\r\n    <smz-input-content-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-content-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TAG_AREA) {\r\n    <input-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></input-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.AUTOCOMPLETE_TAG_AREA) {\r\n    <smz-input-autocomplete-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-autocomplete-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.RADIO) {\r\n    <smz-radio-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-radio-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.SWITCH) {\r\n    <smz-input-switch [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-switch>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX) {\r\n    <smz-checkbox [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-checkbox>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX_GROUP) {\r\n    <smz-checkbox-group [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-checkbox-group>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CALENDAR) {\r\n    <smz-calendar [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-calendar>\r\n  }\r\n\r\n  @if (input.type == controlTypes.DROPDOWN) {\r\n    <smz-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_DROPDOWN) {\r\n    <smz-linked-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.FILE) {\r\n    <smz-file-upload [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [form]=\"viewdata.form\" [behaviors]=\"config.behaviors\"></smz-file-upload>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CURRENCY) {\r\n    <smz-input-currency [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-currency>\r\n  }\r\n\r\n  @if (input.type == controlTypes.MULTI_SELECT) {\r\n    <smz-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_MULTISELECT) {\r\n    <smz-linked-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.COLOR_PICKER) {\r\n    <smz-color-picker [input]=\"input\" [control]=\"$any(viewdata.form.controls[input.propertyName])\" [behaviors]=\"config.behaviors\"></smz-color-picker>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_BUTTON) {\r\n    <smz-input-text-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [viewdata]=\"viewdata\" [behaviors]=\"config.behaviors\"></smz-input-text-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TREE) {\r\n    <smz-input-tree [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-input-tree>\r\n  }\r\n\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "smz-calendar", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: CheckBoxComponent, selector: "smz-checkbox", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: CheckBoxGroupComponent, selector: "smz-checkbox-group", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: ColorPickerComponent, selector: "smz-color-picker", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: DropdownComponent, selector: "smz-dropdown", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: FileUploadComponent, selector: "smz-file-upload", inputs: ["input", "form", "control", "behaviors"], outputs: ["selectChange"] }, { kind: "directive", type: FormFocusFirstInputDirective, selector: "[focusFirstInput]", inputs: ["focus"] }, { kind: "component", type: InputCurrencyComponent, selector: "smz-input-currency", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputListComponent, selector: "smz-input-list", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputMaskComponent, selector: "smz-input-mask", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputNumberComponent, selector: "smz-input-number", inputs: ["input", "control", "behaviors", "form"] }, { kind: "component", type: InputPasswordComponent, selector: "smz-input-password", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputSwitchComponent, selector: "smz-input-switch", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTextAreaComponent, selector: "smz-input-text-area", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: SmzInputAutocompleteTagArea, selector: "smz-input-autocomplete-tag-area", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTextComponent, selector: "smz-input-text", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTreeComponent, selector: "smz-input-tree", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: LinkedDropdownComponent, selector: "smz-linked-dropdown", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: LinkedMultiSelectComponent, selector: "smz-linked-multi-select", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: MultiSelectComponent, selector: "smz-multi-select", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: RadioButtonComponent, selector: "smz-radio-button", inputs: ["input", "formId", "control", "behaviors"] }, { kind: "component", type: InputTagAreaComponent, selector: "input-tag-area", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputContentMaskComponent, selector: "smz-input-content-mask", inputs: ["input", "control", "behaviors"] }, { kind: "component", type: InputTextButtonComponent, selector: "smz-input-text-button", inputs: ["input", "control", "viewdata", "behaviors"] }, { kind: "pipe", type: SetTemplateClassesPipe, name: "setTemplateClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (config != null) {\r\n  <div class=\"smz_form_grid_container\">\r\n    @if (viewdata?.form != null && !configHasErrors) {\r\n      <form focusFirstInput [focus]=\"!config.behaviors.avoidFocusOnLoad\" [formGroup]=\"viewdata.form\" class=\"smz_form__wrapper\" (submit)=\"$event.preventDefault()\" (keydown.enter)=\"onEnter($event)\">\r\n        <ng-container *ngTemplateOutlet=\"groupTemplate\"></ng-container>\r\n      </form>\r\n    }\r\n    @if (configHasErrors) {\r\n      <div>Error</div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #groupTemplate>\r\n\r\n  <div class=\"w-full px-0 mx-auto\">\r\n    <div class=\"grid grid-nogutter flex-wrap items-start justify-start flex-gap-2\" [ngClass]=\"config.template | setTemplateClasses : ['horizontalAlignment', 'verticalAlignment']\">\r\n      @for (group of config.groups; track group) {\r\n        @if (!group.isHide) {\r\n          <div class=\"col\" [ngClass]=\"group.template | setTemplateClasses : ['row']\">\r\n            @if (group.showName) {\r\n              <div class=\"smz__group_name\">{{ group.name }}</div>\r\n            }\r\n            <div [ngClass]=\"group.styleClass ?? 'grid grid-nogutter flex-wrap items-start justify-start flex-gap-2'\">\r\n              @for (input of group.children; track input) {\r\n                @if (input.isVisible) {\r\n                  <div class=\"input__control__wrapper col relative\" [ngClass]=\"input.template | setTemplateClasses : ['row'] : [input.styleClass, group.inputStyleClass]\">\r\n                    <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: input }\"></ng-container>\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #inputTemplate let-input>\r\n\r\n  @if (input.type == controlTypes.PASSWORD) {\r\n    <smz-input-password [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-password>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_MASK) {\r\n    <smz-input-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT) {\r\n    <smz-input-text [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LIST) {\r\n    <smz-input-list [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-list>\r\n  }\r\n\r\n  @if (input.type == controlTypes.NUMBER) {\r\n    <smz-input-number [input]=\"input\" [form]=\"viewdata.form\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-number>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_AREA) {\r\n    <smz-input-text-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CONTENT_MASK) {\r\n    <smz-input-content-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-content-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TAG_AREA) {\r\n    <input-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></input-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.AUTOCOMPLETE_TAG_AREA) {\r\n    <smz-input-autocomplete-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-autocomplete-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.RADIO) {\r\n    <smz-radio-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-radio-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.SWITCH) {\r\n    <smz-input-switch [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-switch>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX) {\r\n    <smz-checkbox [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-checkbox>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX_GROUP) {\r\n    <smz-checkbox-group [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-checkbox-group>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CALENDAR) {\r\n    <smz-calendar [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-calendar>\r\n  }\r\n\r\n  @if (input.type == controlTypes.DROPDOWN) {\r\n    <smz-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_DROPDOWN) {\r\n    <smz-linked-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.FILE) {\r\n    <smz-file-upload [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [form]=\"viewdata.form\" [behaviors]=\"config.behaviors\"></smz-file-upload>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CURRENCY) {\r\n    <smz-input-currency [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-currency>\r\n  }\r\n\r\n  @if (input.type == controlTypes.MULTI_SELECT) {\r\n    <smz-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_MULTISELECT) {\r\n    <smz-linked-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.COLOR_PICKER) {\r\n    <smz-color-picker [input]=\"input\" [control]=\"$any(viewdata.form.controls[input.propertyName])\" [behaviors]=\"config.behaviors\"></smz-color-picker>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_BUTTON) {\r\n    <smz-input-text-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [viewdata]=\"viewdata\" [behaviors]=\"config.behaviors\"></smz-input-text-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TREE) {\r\n    <smz-input-tree [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-input-tree>\r\n  }\r\n\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: SmzFormsManagerService }, { type: SmzFormsRepositoryService }], propDecorators: { config: [{
+            args: [{ selector: 'smz-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [SmzFormValidationMessagesService], standalone: false, template: "@if (config != null) {\r\n  <div class=\"smz_form_grid_container\">\r\n    @if (viewdata?.form != null && !configHasErrors) {\r\n      <form focusFirstInput [focus]=\"!config.behaviors.avoidFocusOnLoad\" [formGroup]=\"viewdata.form\" class=\"smz_form__wrapper\" (submit)=\"$event.preventDefault()\" (keydown.enter)=\"onEnter($event)\">\r\n        <ng-container *ngTemplateOutlet=\"groupTemplate\"></ng-container>\r\n      </form>\r\n    }\r\n    @if (configHasErrors) {\r\n      <div>Error</div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #groupTemplate>\r\n\r\n  <div class=\"w-full px-0 mx-auto\">\r\n    <div class=\"grid grid-nogutter flex-wrap items-start justify-start flex-gap-2\" [ngClass]=\"config.template | setTemplateClasses : ['horizontalAlignment', 'verticalAlignment']\">\r\n      @for (group of config.groups; track group) {\r\n        @if (!group.isHide) {\r\n          <div class=\"col\" [ngClass]=\"group.template | setTemplateClasses : ['row']\">\r\n            @if (group.showName) {\r\n              <div class=\"smz__group_name\">{{ group.name }}</div>\r\n            }\r\n            <div [ngClass]=\"group.styleClass ?? 'grid grid-nogutter flex-wrap items-start justify-start flex-gap-2'\">\r\n              @for (input of group.children; track input) {\r\n                @if (input.isVisible) {\r\n                  <div class=\"input__control__wrapper col relative\" [ngClass]=\"input.template | setTemplateClasses : ['row'] : [input.styleClass, group.inputStyleClass]\">\r\n                    <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: input }\"></ng-container>\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #inputTemplate let-input>\r\n\r\n  @if (input.type == controlTypes.PASSWORD) {\r\n    <smz-input-password [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-password>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_MASK) {\r\n    <smz-input-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT) {\r\n    <smz-input-text [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LIST) {\r\n    <smz-input-list [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-list>\r\n  }\r\n\r\n  @if (input.type == controlTypes.NUMBER) {\r\n    <smz-input-number [input]=\"input\" [form]=\"viewdata.form\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-number>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_AREA) {\r\n    <smz-input-text-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CONTENT_MASK) {\r\n    <smz-input-content-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-content-mask>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TAG_AREA) {\r\n    <input-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></input-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.AUTOCOMPLETE_TAG_AREA) {\r\n    <smz-input-autocomplete-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-autocomplete-tag-area>\r\n  }\r\n\r\n  @if (input.type == controlTypes.RADIO) {\r\n    <smz-radio-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-radio-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.SWITCH) {\r\n    <smz-input-switch [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-switch>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX) {\r\n    <smz-checkbox [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-checkbox>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CHECKBOX_GROUP) {\r\n    <smz-checkbox-group [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-checkbox-group>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CALENDAR) {\r\n    <smz-calendar [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-calendar>\r\n  }\r\n\r\n  @if (input.type == controlTypes.DROPDOWN) {\r\n    <smz-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_DROPDOWN) {\r\n    <smz-linked-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-dropdown>\r\n  }\r\n\r\n  @if (input.type == controlTypes.FILE) {\r\n    <smz-file-upload [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [form]=\"viewdata.form\" [behaviors]=\"config.behaviors\"></smz-file-upload>\r\n  }\r\n\r\n  @if (input.type == controlTypes.CURRENCY) {\r\n    <smz-input-currency [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-currency>\r\n  }\r\n\r\n  @if (input.type == controlTypes.MULTI_SELECT) {\r\n    <smz-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.LINKED_MULTISELECT) {\r\n    <smz-linked-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-multi-select>\r\n  }\r\n\r\n  @if (input.type == controlTypes.COLOR_PICKER) {\r\n    <smz-color-picker [input]=\"input\" [control]=\"$any(viewdata.form.controls[input.propertyName])\" [behaviors]=\"config.behaviors\"></smz-color-picker>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TEXT_BUTTON) {\r\n    <smz-input-text-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [viewdata]=\"viewdata\" [behaviors]=\"config.behaviors\"></smz-input-text-button>\r\n  }\r\n\r\n  @if (input.type == controlTypes.TREE) {\r\n    <smz-input-tree [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-input-tree>\r\n  }\r\n\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: SmzFormsManagerService }, { type: SmzFormsRepositoryService }, { type: SmzFormValidationMessagesService }], propDecorators: { config: [{
                 type: Input
             }], statusChanges: [{
                 type: Output
@@ -7969,7 +7642,6 @@ class NgxSmzFormsModule {
             MultiSelectComponent,
             RadioButtonComponent,
             ValidationMessagesComponent,
-            ValidationMessagesPipe$1,
             FileDragDropDirective,
             FileNameShortenPipe,
             InputTagAreaComponent,
@@ -8102,7 +7774,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         MultiSelectComponent,
                         RadioButtonComponent,
                         ValidationMessagesComponent,
-                        ValidationMessagesPipe$1,
                         FileDragDropDirective,
                         FileNameShortenPipe,
                         InputTagAreaComponent,
@@ -12276,7 +11947,7 @@ class TableHelperService {
             return this.tables[key];
         }
         else {
-            const resultCloned = cloneDeep$2(result);
+            const resultCloned = cloneDeep(result);
             synchronizeTable(resultCloned, this.tables[key]);
             this.tables[key] = resultCloned;
             return this.tables[key];
@@ -17585,11 +17256,11 @@ class SmzTableComponent {
         this.tableHelper.clear(this.tableKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableEditableService }, { token: TableFormsService }, { token: TableHelperService }, { token: i1$6.Store }, { token: SmzExcelService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "@if (state | tableContext; as context) {\r\n  @if ((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) {\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      <ng-template pTemplate=\"actions\">\r\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n      </ng-template>\r\n    </smz-data-info>\r\n  } @else {\r\n    <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\r\n      <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\r\n        @if (((observableSource ?? signalSource ?? 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            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\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            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n            @if (context.state.caption.isVisible) {\r\n              <ng-template pTemplate=\"caption\">\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                  @if (context.state.caption.title != null) {\r\n                    <div class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                  }\r\n                  <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n                  <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.editable.creation.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\r\n                    <button 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                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\r\n                    <p-multiSelect\r\n                      #columnMultiselect\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                  @if (context.state.caption.globalFilter.isVisible) {\r\n                    <p-iconfield 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                @if (toolbarTemplate != null) {\r\n                  <div 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                @if (context.state.caption.rowSelection.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                    @if (!context.state.actions.batchActions.isVisible) {\r\n                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (context.state.rowExpansion.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (context.state.viewport.resizableColumns) {\r\n                    @if (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                    }\r\n                    @if (!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                    }\r\n                  } @else {\r\n                    @if (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                    }\r\n                    @if (!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                    }\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                      @if (col.showHeaderActions) {\r\n                        <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\r\n                      }\r\n                      @if (!clonedData.showSkeleton && col.isOrderable) {\r\n                        <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\r\n                      }\r\n                      @if (!clonedData.showSkeleton) {\r\n                        @switch (col.filter.type) {\r\n                          @case (filterTypes.currency) {\r\n                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.numeric) {\r\n                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.date) {\r\n                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.text) {\r\n                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.boolean) {\r\n                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.dropdown) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_array) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_string) {\r\n                            @if (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                            }\r\n                          }\r\n                        }\r\n                      }\r\n                      @if (context.state.caption.columnVisibility.showColumnHideButton) {\r\n                        <button 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                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\r\n                  <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n                }\r\n              </tr>\r\n              @if (context.state.actions.batchActions.isVisible) {\r\n                <tr>\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                      @if (selectedItems?.length > 0) {\r\n                        @for (batchItem of context.state.actions.batchActions.items; track batchItem) {\r\n                          @if (batchItem.visible) {\r\n                            <button 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                          }\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </th>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                    @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\r\n                      <div 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                    }\r\n                  </td>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (clonedData.showSkeleton) {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                  } @else {\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                      <p-cellEditor>\r\n                        <!-- CELULAR COM EDITOR -->\r\n                        <ng-template pTemplate=\"input\">\r\n                          @switch (col.editable.type) {\r\n                            @case (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                            }\r\n                            @case (editableTypes.custom) {\r\n                              <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                            }\r\n                            <!-- INPUT TEXT -->\r\n                            @case (editableTypes.text) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT NUMBER -->\r\n                            @case (editableTypes.number) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT SWITCH -->\r\n                            @case (editableTypes.switch) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (form.controls[col.editable.property]; as control) {\r\n                                  <div class=\"relative w-full\">\r\n                                    <p-toggleswitch [formControl]=\"$any(control)\"></p-toggleswitch>\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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT TEXT AREA -->\r\n                            @case (editableTypes.area) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT DROPDOWN -->\r\n                            @case (editableTypes.dropdown) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT CALENDAR -->\r\n                            @case (editableTypes.calendar) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                          }\r\n                        </ng-template>\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                    </td>\r\n                  }\r\n                }\r\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\r\n                  <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                    <div class=\"grid grid-nogutter items-center justify-center\">\r\n                      @if (clonedData.showSkeleton) {\r\n                        <div class=\"w-full\">\r\n                          <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- SEM EDITAR -->\r\n                        @if (!editing) {\r\n                          @if (context.state.editable.update.isButtonVisible) {\r\n                            <button 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                          }\r\n                          @if (context.state.editable.remove.isButtonVisible) {\r\n                            <button 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                          }\r\n                        }\r\n                        <!-- EDITANDO -->\r\n                        @if (editing) {\r\n                          @if (editableService.context[item.id]; as editableContext) {\r\n                            <!-- COM LOADING -->\r\n                            @if (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                            }\r\n                            <!-- SEM LOADING -->\r\n                            @if (!editableContext.isLoading) {\r\n                              <!-- EDITANDO -->\r\n                              @if (!editableContext.hasErrors) {\r\n                                <!-- CRIANDO -->\r\n                                @if (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                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (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                                }\r\n                              }\r\n                              <!-- COM ERRORS -->\r\n                              @if (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                                <!-- CRIANDO -->\r\n                                @if (item._context?.isCreating) {\r\n                                  <button 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                                @if (item._context?.isUpdating) {\r\n                                  <button 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                              }\r\n                            }\r\n                          }\r\n                        }\r\n                        <!-- CUSTOM MENU -->\r\n                        @if (context.state.actions.customActions.isVisible && !editing) {\r\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                        }\r\n                        <!-- MENU -->\r\n                        @if (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                        }\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                }\r\n              </tr>\r\n              @if (item?._isExpanded) {\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)\">\r\n                    <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                  @if (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                  }\r\n                </td>\r\n              </tr>\r\n            </ng-template>\r\n          </p-table>\r\n        }\r\n      </ng-container>\r\n    </ng-container>\r\n  }\r\n} @else {\r\n  @if (emptyStateTemplate != null) {\r\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n  }\r\n}\r\n\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i8.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i8.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i8.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i8.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i8.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "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", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i1$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i19.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "mousePosition", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: i3$3.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior"] }, { kind: "component", type: i25.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i27.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i28.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "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$1.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: "17.0.0", version: "21.2.1", 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: "@if (state | tableContext; as context) {\r\n  @if ((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) {\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      <ng-template pTemplate=\"actions\">\r\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n      </ng-template>\r\n    </smz-data-info>\r\n  } @else {\r\n    <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\r\n      <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\r\n        @if (((observableSource ?? signalSource ?? 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            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\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            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n            @if (context.state.caption.isVisible) {\r\n              <ng-template pTemplate=\"caption\">\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                  @if (context.state.caption.title != null) {\r\n                    <div class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                  }\r\n                  <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n                  <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.editable.creation.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\r\n                    <button 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                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\r\n                    <p-multiSelect\r\n                      #columnMultiselect\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                  @if (context.state.caption.globalFilter.isVisible) {\r\n                    <p-iconfield 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                @if (toolbarTemplate != null) {\r\n                  <div 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                @if (context.state.caption.rowSelection.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                    @if (!context.state.actions.batchActions.isVisible) {\r\n                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (context.state.rowExpansion.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (context.state.viewport.resizableColumns) {\r\n                    @if (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                    }\r\n                    @if (!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                    }\r\n                  } @else {\r\n                    @if (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                    }\r\n                    @if (!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                    }\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                      @if (col.showHeaderActions) {\r\n                        <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\r\n                      }\r\n                      @if (!clonedData.showSkeleton && col.isOrderable) {\r\n                        <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\r\n                      }\r\n                      @if (!clonedData.showSkeleton) {\r\n                        @switch (col.filter.type) {\r\n                          @case (filterTypes.currency) {\r\n                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.numeric) {\r\n                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.date) {\r\n                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.text) {\r\n                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.boolean) {\r\n                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.dropdown) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_array) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_string) {\r\n                            @if (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                            }\r\n                          }\r\n                        }\r\n                      }\r\n                      @if (context.state.caption.columnVisibility.showColumnHideButton) {\r\n                        <button 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                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\r\n                  <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n                }\r\n              </tr>\r\n              @if (context.state.actions.batchActions.isVisible) {\r\n                <tr>\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                      @if (selectedItems?.length > 0) {\r\n                        @for (batchItem of context.state.actions.batchActions.items; track batchItem) {\r\n                          @if (batchItem.visible) {\r\n                            <button 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                          }\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </th>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                    @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\r\n                      <div 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                    }\r\n                  </td>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (clonedData.showSkeleton) {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                  } @else {\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                      <p-cellEditor>\r\n                        <!-- CELULAR COM EDITOR -->\r\n                        <ng-template pTemplate=\"input\">\r\n                          @switch (col.editable.type) {\r\n                            @case (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                            }\r\n                            @case (editableTypes.custom) {\r\n                              <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                            }\r\n                            <!-- INPUT TEXT -->\r\n                            @case (editableTypes.text) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT NUMBER -->\r\n                            @case (editableTypes.number) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT SWITCH -->\r\n                            @case (editableTypes.switch) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (form.controls[col.editable.property]; as control) {\r\n                                  <div class=\"relative w-full\">\r\n                                    <p-toggleswitch [formControl]=\"$any(control)\"></p-toggleswitch>\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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT TEXT AREA -->\r\n                            @case (editableTypes.area) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT DROPDOWN -->\r\n                            @case (editableTypes.dropdown) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT CALENDAR -->\r\n                            @case (editableTypes.calendar) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                          }\r\n                        </ng-template>\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                    </td>\r\n                  }\r\n                }\r\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\r\n                  <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                    <div class=\"grid grid-nogutter items-center justify-center\">\r\n                      @if (clonedData.showSkeleton) {\r\n                        <div class=\"w-full\">\r\n                          <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- SEM EDITAR -->\r\n                        @if (!editing) {\r\n                          @if (context.state.editable.update.isButtonVisible) {\r\n                            <button 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                          }\r\n                          @if (context.state.editable.remove.isButtonVisible) {\r\n                            <button 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                          }\r\n                        }\r\n                        <!-- EDITANDO -->\r\n                        @if (editing) {\r\n                          @if (editableService.context[item.id]; as editableContext) {\r\n                            <!-- COM LOADING -->\r\n                            @if (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                            }\r\n                            <!-- SEM LOADING -->\r\n                            @if (!editableContext.isLoading) {\r\n                              <!-- EDITANDO -->\r\n                              @if (!editableContext.hasErrors) {\r\n                                <!-- CRIANDO -->\r\n                                @if (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                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (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                                }\r\n                              }\r\n                              <!-- COM ERRORS -->\r\n                              @if (editableContext.hasErrors) {\r\n                                <p-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                  <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                </p-popover>\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                                <!-- CRIANDO -->\r\n                                @if (item._context?.isCreating) {\r\n                                  <button 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                                @if (item._context?.isUpdating) {\r\n                                  <button 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                              }\r\n                            }\r\n                          }\r\n                        }\r\n                        <!-- CUSTOM MENU -->\r\n                        @if (context.state.actions.customActions.isVisible && !editing) {\r\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                        }\r\n                        <!-- MENU -->\r\n                        @if (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                        }\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                }\r\n              </tr>\r\n              @if (item?._isExpanded) {\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)\">\r\n                    <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                  @if (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                  }\r\n                </td>\r\n              </tr>\r\n            </ng-template>\r\n          </p-table>\r\n        }\r\n      </ng-container>\r\n    </ng-container>\r\n  }\r\n} @else {\r\n  @if (emptyStateTemplate != null) {\r\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n  }\r\n}\r\n\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i8.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i8.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i8.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i8.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i8.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "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", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i1$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i19.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: i3$3.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior"] }, { kind: "component", type: i25.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i27.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i28.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "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$1.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: "21.2.1", ngImport: i0, type: SmzTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableEditableService, TableFormsService], standalone: false, template: "@if (state | tableContext; as context) {\r\n  @if ((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) {\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      <ng-template pTemplate=\"actions\">\r\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n      </ng-template>\r\n    </smz-data-info>\r\n  } @else {\r\n    <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\r\n      <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\r\n        @if (((observableSource ?? signalSource ?? 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            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\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            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n            @if (context.state.caption.isVisible) {\r\n              <ng-template pTemplate=\"caption\">\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                  @if (context.state.caption.title != null) {\r\n                    <div class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                  }\r\n                  <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n                  <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.editable.creation.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\r\n                    <button 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                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\r\n                    <p-multiSelect\r\n                      #columnMultiselect\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                  @if (context.state.caption.globalFilter.isVisible) {\r\n                    <p-iconfield 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                @if (toolbarTemplate != null) {\r\n                  <div 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                @if (context.state.caption.rowSelection.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                    @if (!context.state.actions.batchActions.isVisible) {\r\n                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (context.state.rowExpansion.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (context.state.viewport.resizableColumns) {\r\n                    @if (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                    }\r\n                    @if (!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                    }\r\n                  } @else {\r\n                    @if (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                    }\r\n                    @if (!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                    }\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                      @if (col.showHeaderActions) {\r\n                        <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\r\n                      }\r\n                      @if (!clonedData.showSkeleton && col.isOrderable) {\r\n                        <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\r\n                      }\r\n                      @if (!clonedData.showSkeleton) {\r\n                        @switch (col.filter.type) {\r\n                          @case (filterTypes.currency) {\r\n                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.numeric) {\r\n                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.date) {\r\n                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.text) {\r\n                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.boolean) {\r\n                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.dropdown) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_array) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_string) {\r\n                            @if (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                            }\r\n                          }\r\n                        }\r\n                      }\r\n                      @if (context.state.caption.columnVisibility.showColumnHideButton) {\r\n                        <button 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                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\r\n                  <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n                }\r\n              </tr>\r\n              @if (context.state.actions.batchActions.isVisible) {\r\n                <tr>\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                      @if (selectedItems?.length > 0) {\r\n                        @for (batchItem of context.state.actions.batchActions.items; track batchItem) {\r\n                          @if (batchItem.visible) {\r\n                            <button 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                          }\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </th>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                    @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\r\n                      <div 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                    }\r\n                  </td>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (clonedData.showSkeleton) {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                  } @else {\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                      <p-cellEditor>\r\n                        <!-- CELULAR COM EDITOR -->\r\n                        <ng-template pTemplate=\"input\">\r\n                          @switch (col.editable.type) {\r\n                            @case (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                            }\r\n                            @case (editableTypes.custom) {\r\n                              <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                            }\r\n                            <!-- INPUT TEXT -->\r\n                            @case (editableTypes.text) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT NUMBER -->\r\n                            @case (editableTypes.number) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT SWITCH -->\r\n                            @case (editableTypes.switch) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (form.controls[col.editable.property]; as control) {\r\n                                  <div class=\"relative w-full\">\r\n                                    <p-toggleswitch [formControl]=\"$any(control)\"></p-toggleswitch>\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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT TEXT AREA -->\r\n                            @case (editableTypes.area) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT DROPDOWN -->\r\n                            @case (editableTypes.dropdown) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT CALENDAR -->\r\n                            @case (editableTypes.calendar) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                          }\r\n                        </ng-template>\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                    </td>\r\n                  }\r\n                }\r\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\r\n                  <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                    <div class=\"grid grid-nogutter items-center justify-center\">\r\n                      @if (clonedData.showSkeleton) {\r\n                        <div class=\"w-full\">\r\n                          <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- SEM EDITAR -->\r\n                        @if (!editing) {\r\n                          @if (context.state.editable.update.isButtonVisible) {\r\n                            <button 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                          }\r\n                          @if (context.state.editable.remove.isButtonVisible) {\r\n                            <button 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                          }\r\n                        }\r\n                        <!-- EDITANDO -->\r\n                        @if (editing) {\r\n                          @if (editableService.context[item.id]; as editableContext) {\r\n                            <!-- COM LOADING -->\r\n                            @if (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                            }\r\n                            <!-- SEM LOADING -->\r\n                            @if (!editableContext.isLoading) {\r\n                              <!-- EDITANDO -->\r\n                              @if (!editableContext.hasErrors) {\r\n                                <!-- CRIANDO -->\r\n                                @if (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                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (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                                }\r\n                              }\r\n                              <!-- COM ERRORS -->\r\n                              @if (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                                <!-- CRIANDO -->\r\n                                @if (item._context?.isCreating) {\r\n                                  <button 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                                @if (item._context?.isUpdating) {\r\n                                  <button 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                              }\r\n                            }\r\n                          }\r\n                        }\r\n                        <!-- CUSTOM MENU -->\r\n                        @if (context.state.actions.customActions.isVisible && !editing) {\r\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                        }\r\n                        <!-- MENU -->\r\n                        @if (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                        }\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                }\r\n              </tr>\r\n              @if (item?._isExpanded) {\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)\">\r\n                    <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                  @if (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                  }\r\n                </td>\r\n              </tr>\r\n            </ng-template>\r\n          </p-table>\r\n        }\r\n      </ng-container>\r\n    </ng-container>\r\n  }\r\n} @else {\r\n  @if (emptyStateTemplate != null) {\r\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n  }\r\n}\r\n\r\n" }]
+            args: [{ selector: 'smz-ui-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableEditableService, TableFormsService], standalone: false, template: "@if (state | tableContext; as context) {\r\n  @if ((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) {\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      <ng-template pTemplate=\"actions\">\r\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n      </ng-template>\r\n    </smz-data-info>\r\n  } @else {\r\n    <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\r\n      <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\r\n        @if (((observableSource ?? signalSource ?? 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            [scrollable]=\"context.state.viewport.scrollable\"\r\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\r\n            [filterDelay]=\"0\"\r\n            [globalFilterFields]=\"context.globalFilter\"\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            (onPage)=\"onPage($event)\"\r\n            (onFilter)=\"onFilter($event)\"\r\n            (selectionChange)=\"emitSelection($event)\"\r\n            >\r\n            @if (context.state.caption.isVisible) {\r\n              <ng-template pTemplate=\"caption\">\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                  @if (context.state.caption.title != null) {\r\n                    <div class=\"col database-title\" [innerHTML]=\"context.state.caption.title\"></div>\r\n                  }\r\n                  <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\r\n                  <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\"></smz-table-caption-buttons>\r\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.editable.creation.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\r\n                    <button 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                  }\r\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\r\n                    <button 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                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\r\n                    <p-multiSelect\r\n                      #columnMultiselect\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                  @if (context.state.caption.globalFilter.isVisible) {\r\n                    <p-iconfield 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                @if (toolbarTemplate != null) {\r\n                  <div 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                @if (context.state.caption.rowSelection.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\r\n                    @if (!context.state.actions.batchActions.isVisible) {\r\n                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n                    }\r\n                  </th>\r\n                }\r\n                @if (context.state.rowExpansion.isEnabled) {\r\n                  <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (context.state.viewport.resizableColumns) {\r\n                    @if (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                    }\r\n                    @if (!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                    }\r\n                  } @else {\r\n                    @if (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                    }\r\n                    @if (!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                    }\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                      @if (col.showHeaderActions) {\r\n                        <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\r\n                      }\r\n                      @if (!clonedData.showSkeleton && col.isOrderable) {\r\n                        <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\r\n                      }\r\n                      @if (!clonedData.showSkeleton) {\r\n                        @switch (col.filter.type) {\r\n                          @case (filterTypes.currency) {\r\n                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.numeric) {\r\n                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.date) {\r\n                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.text) {\r\n                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.boolean) {\r\n                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\r\n                          }\r\n                          @case (filterTypes.dropdown) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_array) {\r\n                            @if (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                            }\r\n                          }\r\n                          @case (filterTypes.multiselect_string) {\r\n                            @if (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                            }\r\n                          }\r\n                        }\r\n                      }\r\n                      @if (context.state.caption.columnVisibility.showColumnHideButton) {\r\n                        <button 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                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\r\n                  <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\r\n                }\r\n              </tr>\r\n              @if (context.state.actions.batchActions.isVisible) {\r\n                <tr>\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                      @if (selectedItems?.length > 0) {\r\n                        @for (batchItem of context.state.actions.batchActions.items; track batchItem) {\r\n                          @if (batchItem.visible) {\r\n                            <button 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                          }\r\n                        }\r\n                      }\r\n                    </div>\r\n                  </th>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\r\n                  <td\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                    @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\r\n                      <div 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                    }\r\n                  </td>\r\n                }\r\n                @for (col of columns; track col) {\r\n                  @if (clonedData.showSkeleton) {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton></td>\r\n                  } @else {\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                      <p-cellEditor>\r\n                        <!-- CELULAR COM EDITOR -->\r\n                        <ng-template pTemplate=\"input\">\r\n                          @switch (col.editable.type) {\r\n                            @case (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                            }\r\n                            @case (editableTypes.custom) {\r\n                              <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\r\n                            }\r\n                            <!-- INPUT TEXT -->\r\n                            @case (editableTypes.text) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT NUMBER -->\r\n                            @case (editableTypes.number) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT SWITCH -->\r\n                            @case (editableTypes.switch) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (form.controls[col.editable.property]; as control) {\r\n                                  <div class=\"relative w-full\">\r\n                                    <p-toggleswitch [formControl]=\"$any(control)\"></p-toggleswitch>\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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT TEXT AREA -->\r\n                            @case (editableTypes.area) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT DROPDOWN -->\r\n                            @case (editableTypes.dropdown) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                            <!-- INPUT CALENDAR -->\r\n                            @case (editableTypes.calendar) {\r\n                              @if (editableService.context[item.id]?.form; as form) {\r\n                                @if (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                                }\r\n                              }\r\n                            }\r\n                          }\r\n                        </ng-template>\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                    </td>\r\n                  }\r\n                }\r\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\r\n                  <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\r\n                    <div class=\"grid grid-nogutter items-center justify-center\">\r\n                      @if (clonedData.showSkeleton) {\r\n                        <div class=\"w-full\">\r\n                          <p-skeleton width=\"100%\" height=\"1rem\"></p-skeleton>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- SEM EDITAR -->\r\n                        @if (!editing) {\r\n                          @if (context.state.editable.update.isButtonVisible) {\r\n                            <button 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                          }\r\n                          @if (context.state.editable.remove.isButtonVisible) {\r\n                            <button 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                          }\r\n                        }\r\n                        <!-- EDITANDO -->\r\n                        @if (editing) {\r\n                          @if (editableService.context[item.id]; as editableContext) {\r\n                            <!-- COM LOADING -->\r\n                            @if (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                            }\r\n                            <!-- SEM LOADING -->\r\n                            @if (!editableContext.isLoading) {\r\n                              <!-- EDITANDO -->\r\n                              @if (!editableContext.hasErrors) {\r\n                                <!-- CRIANDO -->\r\n                                @if (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                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (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                                }\r\n                              }\r\n                              <!-- COM ERRORS -->\r\n                              @if (editableContext.hasErrors) {\r\n                                <p-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                  <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                </p-popover>\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                                <!-- CRIANDO -->\r\n                                @if (item._context?.isCreating) {\r\n                                  <button 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                                @if (item._context?.isUpdating) {\r\n                                  <button 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                              }\r\n                            }\r\n                          }\r\n                        }\r\n                        <!-- CUSTOM MENU -->\r\n                        @if (context.state.actions.customActions.isVisible && !editing) {\r\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\r\n                        }\r\n                        <!-- MENU -->\r\n                        @if (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                        }\r\n                      }\r\n                    </div>\r\n                  </td>\r\n                }\r\n              </tr>\r\n              @if (item?._isExpanded) {\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)\">\r\n                    <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </ng-template>\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                  @if (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                  }\r\n                </td>\r\n              </tr>\r\n            </ng-template>\r\n          </p-table>\r\n        }\r\n      </ng-container>\r\n    </ng-container>\r\n  }\r\n} @else {\r\n  @if (emptyStateTemplate != null) {\r\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n  }\r\n}\r\n\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TableEditableService }, { type: TableFormsService }, { type: TableHelperService }, { type: i1$6.Store }, { type: SmzExcelService }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -23520,7 +23191,7 @@ class NgxSmzTablesModule {
             TooltipModule,
             SkeletonModule,
             TextareaModule,
-            OverlayPanelModule,
+            PopoverModule,
             ReactiveFormsModule,
             ToggleSwitchModule,
             InputNumberModule,
@@ -23548,7 +23219,7 @@ class NgxSmzTablesModule {
             TooltipModule,
             SkeletonModule,
             TextareaModule,
-            OverlayPanelModule,
+            PopoverModule,
             ReactiveFormsModule,
             ToggleSwitchModule,
             InputNumberModule,
@@ -23598,7 +23269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         TooltipModule,
                         SkeletonModule,
                         TextareaModule,
-                        OverlayPanelModule,
+                        PopoverModule,
                         ReactiveFormsModule,
                         ToggleSwitchModule,
                         InputNumberModule,
@@ -24333,7 +24004,6 @@ class NgxSmzDocumentsModule {
             SmzDocumentHiddenBreakComponent], imports: [CommonModule,
             FormsModule,
             BadgeModule,
-            OverlayPanelModule,
             ButtonModule,
             NgxSmzTablesModule,
             InputTextModule,
@@ -24348,7 +24018,6 @@ class NgxSmzDocumentsModule {
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NgxSmzDocumentsModule, imports: [CommonModule,
             FormsModule,
             BadgeModule,
-            OverlayPanelModule,
             ButtonModule,
             NgxSmzTablesModule,
             InputTextModule,
@@ -24368,7 +24037,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         CommonModule,
                         FormsModule,
                         BadgeModule,
-                        OverlayPanelModule,
                         ButtonModule,
                         NgxSmzTablesModule,
                         InputTextModule,
@@ -26991,13 +26659,24 @@ class SmzFormTreeBuilder extends SmzFormInputBuilder {
 function extractUniqueTypesFromNodes(nodes) {
     const types = [];
     function traverseAndCollectTypes(currentNode) {
-        if (!types.includes(currentNode.type)) {
-            types.push(currentNode.type);
+        const templateKey = currentNode.type != null && String(currentNode.type).length > 0
+            ? currentNode.type
+            : 'default';
+        if (!types.includes(templateKey)) {
+            types.push(templateKey);
         }
-        currentNode.children?.forEach(childNode => traverseAndCollectTypes(childNode));
+        currentNode.children?.forEach(childNode => {
+            if (childNode != null) {
+                traverseAndCollectTypes(childNode);
+            }
+        });
     }
     // Inicia a travessia para cada nodo raiz no array
-    nodes.forEach(node => traverseAndCollectTypes(node));
+    nodes.forEach(node => {
+        if (node != null) {
+            traverseAndCollectTypes(node);
+        }
+    });
     return types;
 }
 
@@ -29081,7 +28760,6 @@ class NgxSmzDialogsModule {
             ReactiveFormsModule,
             DialogModule,
             // ngxsModuleForFeatureDialogsState,
-            OverlayPanelModule,
             TableModule$1,
             ButtonModule,
             MessageModule,
@@ -29102,7 +28780,6 @@ class NgxSmzDialogsModule {
             ReactiveFormsModule,
             DialogModule,
             // ngxsModuleForFeatureDialogsState,
-            OverlayPanelModule,
             TableModule$1,
             ButtonModule,
             MessageModule,
@@ -29140,7 +28817,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         ReactiveFormsModule,
                         DialogModule,
                         // ngxsModuleForFeatureDialogsState,
-                        OverlayPanelModule,
                         TableModule$1,
                         ButtonModule,
                         MessageModule,
@@ -32287,7 +31963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ selector: 'smz-ui-users-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "\r\n<ng-container *ngVar=\"(users$ | async) as users\">\r\n\r\n  <smz-ui-table #smzdt [items]=\"users\" [state]=\"tableState\" [loading]=\"false\">\r\n\r\n    <ng-template pTemplate=\"caption\" let-primeTable>\r\n      @for (action of (uiConfig.rbkUtils.authorization.users.pageActions | smzFlattenMenu : null); track action) {\r\n        @if (action.visible) {\r\n          <button pButton type=\"button\" smzMenuItemAction [item]=\"action\" [label]=\"action.label\" [icon]=\"action.icon\" [ngClass]=\"action.styleClass\" [disabled]=\"action.disabled\"></button>\r\n        }\r\n      }\r\n\r\n      @if (uiConfig.rbkUtils.authorization.users.removalBehavior === 'deactivation') {\r\n        <p-selectButton\r\n          appendTo=\"body\"\r\n          [options]=\"viewOptions\"\r\n          [(ngModel)]=\"selectedView\"\r\n          (onChange)=\"handleViewOptionChange($event.value)\"\r\n          optionLabel=\"label\" optionValue=\"value\">\r\n        </p-selectButton>\r\n      }\r\n\r\n    </ng-template>\r\n\r\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n    <ng-template pTemplate=\"content\" let-item let-col=\"col\">\r\n\r\n      @switch (col.field) {\r\n        @case ('displayName') {\r\n          <div class=\"grid grid-nogutter items-center gap-3 justify-start\">\r\n            <!-- CONTROLE DE ACESSO N\u00C3O ENCONTROU O IDENTIFICADOR DO USU\u00C1RIO -->\r\n            @if (item.avatar == null) {\r\n              <img\r\n                [src]=\"uiConfig.rbkUtils.authorization.users.avatarPlaceholderPath\"\r\n                class=\"w-14 align-middle\"\r\n                />\r\n            }\r\n            <!-- USU\u00C1RIO COM AVATAR INFORMADO PELO CONTROLE DE ACESSO -->\r\n            @if (item.avatar != null) {\r\n              <img\r\n                [src]=\"item.avatar\"\r\n                (error)=\"handleMissingImage($event, item.name, item.avatar)\"\r\n                class=\"w-14 align-middle\"\r\n                />\r\n            }\r\n            <span>{{ item.displayName }}</span>\r\n          </div>\r\n        }\r\n        @case ('role.name') {\r\n          {{ item.role?.name }}\r\n        }\r\n      }\r\n\r\n    </ng-template>\r\n\r\n  </smz-ui-table>\r\n\r\n</ng-container>" }]
         }], ctorParameters: () => [{ type: i1$6.Store }, { type: i0.ChangeDetectorRef }] });
 
-const routes$9 = [
+const routes$7 = [
     {
         path: '',
         canActivate: [RbkDatabaseStateGuard],
@@ -32303,17 +31979,17 @@ const routes$9 = [
         }
     },
 ];
-const routerModuleForChildUsersModule = RouterModule.forChild(routes$9);
+const routerModuleForChildUsersModule = RouterModule.forChild(routes$7);
 class UsersModule {
     constructor() {
         if (GlobalInjector.config.rbkUtils.authorization.users?.httpBehavior?.authentication)
-            routes$9[0].canActivate.push(RbkAuthGuard);
+            routes$7[0].canActivate.push(RbkAuthGuard);
         if (GlobalInjector.config.rbkUtils.authorization.users?.router?.claim)
-            routes$9[0].data['claim'] = GlobalInjector.config.rbkUtils.authorization.users.router.claim;
+            routes$7[0].data['claim'] = GlobalInjector.config.rbkUtils.authorization.users.router.claim;
         if (GlobalInjector.config.rbkUtils.authorization.users.title == null) {
             throw Error('You need to specify the users title on gedi configuration.');
         }
-        routes$9[0].data['title'] = GlobalInjector.config.rbkUtils.authorization.users.title;
+        routes$7[0].data['title'] = GlobalInjector.config.rbkUtils.authorization.users.title;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: UsersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: UsersModule, declarations: [UsersPageComponent, UserClaimsComponent], imports: [CommonModule, i1$9.RouterModule, FormsModule,
@@ -32500,7 +32176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ selector: 'app-claims-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<smz-ui-table [items]=\"claims$ | async\" [state]=\"tableState\">\r\n\r\n    <ng-template pTemplate=\"caption\">\r\n      <button pButton type=\"button\" class=\"p-button p-button-primary mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\"></button>\r\n    </ng-template>\r\n\r\n</smz-ui-table>\r\n" }]
         }], ctorParameters: () => [{ type: i1$6.Store }, { type: SmzDialogsService }], propDecorators: { showDeleteConfirmation: [] } });
 
-const data$7 = {
+const data$5 = {
     layout: {
         mode: 'full',
         contentPadding: '2em'
@@ -32510,7 +32186,7 @@ const data$7 = {
     clearReusableRoutes: true,
     requiredStates: [CLAIMS_STATE_NAME]
 };
-const routes$8 = [
+const routes$6 = [
     {
         path: '',
         children: [
@@ -32518,7 +32194,7 @@ const routes$8 = [
                 path: '',
                 canActivate: [RbkAuthGuard, RbkDatabaseStateGuard],
                 component: ClaimsPageComponent,
-                data: data$7
+                data: data$5
             },
         ]
     },
@@ -32529,7 +32205,7 @@ class ClaimsModule {
             NgxSmzDataPipesModule,
             ButtonModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ClaimsModule, imports: [CommonModule,
-            RouterModule.forChild(routes$8),
+            RouterModule.forChild(routes$6),
             NgxSmzTablesModule,
             NgxSmzDataPipesModule,
             ButtonModule] });
@@ -32539,7 +32215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{
                     imports: [
                         CommonModule,
-                        RouterModule.forChild(routes$8),
+                        RouterModule.forChild(routes$6),
                         NgxSmzTablesModule,
                         NgxSmzDataPipesModule,
                         ButtonModule
@@ -32771,7 +32447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ selector: 'app-roles-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<smz-ui-table [items]=\"roles$ | async\" [state]=\"tableState\">\r\n\r\n  <ng-template pTemplate=\"caption\">\r\n    <button pButton type=\"button\" class=\"p-button p-button-primary mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" [disabled]=\"!(canCreateClaims | rbkCanAccessAny)\"></button>\r\n  </ng-template>\r\n\r\n  <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n  <ng-template pTemplate=\"content\" let-item let-col=\"col\">\r\n\r\n    @switch (col.field) {\r\n      @case ('claims') {\r\n        <div class=\"grid grid-nogutter items-start justify-start flex-col gap-1\">\r\n          <ng-container *ngVar=\"(item.claims | smzInitial : 3) as limitedClaims\">\r\n            <!-- <div [innerHTML]=\"limitedClaims | prettyjson\"></div> -->\r\n            <ul class=\"list-disc\">\r\n              @for (claim of limitedClaims; track claim) {\r\n                <li class=\"\">{{ $any(claim).name }}</li>\r\n              }\r\n              @if (item.claims.length > 3) {\r\n                <li>(...)</li>\r\n              }\r\n            </ul>\r\n            @if (item.claims.length > 3) {\r\n              <button\r\n                type=\"button\"\r\n                (click)=\"onShowRoleClaimsDialog(item)\"\r\n                class=\"block rounded-md bg-amber-400 px-2.5 py-1.5 text-center text-sm font-semibold text-black shadow-sm hover:bg-amber-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500\">\r\n                <i class=\"fa-solid fa-circle-info mr-2\"></i>Ver mais\r\n              </button>\r\n            }\r\n          </ng-container>\r\n        </div>\r\n      }\r\n    }\r\n\r\n  </ng-template>\r\n\r\n</smz-ui-table>\r\n" }]
         }], ctorParameters: () => [{ type: i1$6.Store }, { type: SmzDialogsService }], propDecorators: { showDeleteConfirmation: [] } });
 
-const data$6 = {
+const data$4 = {
     layout: {
         mode: 'full',
         contentPadding: '2em'
@@ -32781,7 +32457,7 @@ const data$6 = {
     clearReusableRoutes: true,
     requiredStates: [ROLES_STATE_NAME, CLAIMS_STATE_NAME]
 };
-const routes$7 = [
+const routes$5 = [
     {
         path: '',
         children: [
@@ -32789,7 +32465,7 @@ const routes$7 = [
                 path: '',
                 canActivate: [RbkAuthGuard, RbkDatabaseStateGuard],
                 component: RolesPageComponent,
-                data: data$6
+                data: data$4
             },
         ]
     },
@@ -32802,7 +32478,7 @@ class RolesModule {
             ButtonModule,
             RbkAccessControlModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RolesModule, imports: [CommonModule,
-            RouterModule.forChild(routes$7),
+            RouterModule.forChild(routes$5),
             NgxSmzTablesModule,
             NgxSmzDataPipesModule,
             NgVarModule,
@@ -32814,7 +32490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{
                     imports: [
                         CommonModule,
-                        RouterModule.forChild(routes$7),
+                        RouterModule.forChild(routes$5),
                         NgxSmzTablesModule,
                         NgxSmzDataPipesModule,
                         NgVarModule,
@@ -33024,7 +32700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ selector: 'app-tenants-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<smz-ui-table [items]=\"tenants$ | async\" [state]=\"tableState\">\r\n\r\n    <ng-template pTemplate=\"caption\">\r\n      <button pButton type=\"button\" class=\"p-button p-button-primary mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\"></button>\r\n    </ng-template>\r\n\r\n</smz-ui-table>\r\n" }]
         }], ctorParameters: () => [{ type: i1$6.Store }, { type: SmzDialogsService }] });
 
-const data$5 = {
+const data$3 = {
     layout: {
         mode: 'full',
         contentPadding: '2em'
@@ -33034,7 +32710,7 @@ const data$5 = {
     clearReusableRoutes: true,
     requiredStates: [TENANTS_STATE_NAME]
 };
-const routes$6 = [
+const routes$4 = [
     {
         path: '',
         children: [
@@ -33042,7 +32718,7 @@ const routes$6 = [
                 path: '',
                 canActivate: [RbkAuthGuard, RbkDatabaseStateGuard],
                 component: TenantsPageComponent,
-                data: data$5
+                data: data$3
             },
         ]
     },
@@ -33053,7 +32729,7 @@ class TenantsModule {
             NgxSmzDataPipesModule,
             ButtonModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantsModule, imports: [CommonModule,
-            RouterModule.forChild(routes$6),
+            RouterModule.forChild(routes$4),
             NgxSmzTablesModule,
             NgxSmzDataPipesModule,
             ButtonModule] });
@@ -33063,7 +32739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{
                     imports: [
                         CommonModule,
-                        RouterModule.forChild(routes$6),
+                        RouterModule.forChild(routes$4),
                         NgxSmzTablesModule,
                         NgxSmzDataPipesModule,
                         ButtonModule
@@ -33375,212 +33051,6 @@ function getRouteRoot(routes) {
     return null;
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
-class RouterDataListenerService {
-    router;
-    activatedRoute;
-    dialogs;
-    store;
-    data = null;
-    constructor(router, activatedRoute, dialogs, store) {
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-        this.dialogs = dialogs;
-        this.store = store;
-        if (GlobalInjector.config.layouts.debugMode)
-            console.log('>> RouterDataListenerService constructor');
-        if (GlobalInjector.config.layouts.debugMode)
-            console.log('>> configuration', GlobalInjector.config);
-        let currentRouteData = null;
-        this.router.events
-            .pipe(filter(event => event instanceof NavigationEnd), tap$1((event) => {
-            if (GlobalInjector.config.layouts.debugMode)
-                console.log('\n##########');
-            if (GlobalInjector.config.layouts.debugMode)
-                console.log('>> NavigationEnd');
-            if (GlobalInjector.config.layouts.applicationActions.registerLogs) {
-                if (GlobalInjector.config.layouts.debugMode)
-                    console.log('ApplicationActions.SetLogExtraData > urlAfterRedirects', event.urlAfterRedirects);
-                this.store.dispatch(new ApplicationActions.SetLogExtraData(event.urlAfterRedirects));
-            }
-            if (GlobalInjector.config.layouts._internal?.specificThemeNavigationEndCallback != null) {
-                GlobalInjector.config.layouts._internal.specificThemeNavigationEndCallback();
-            }
-        }), map((event) => {
-            if (GlobalInjector.config.layouts.debugMode) {
-                console.group('router.events > mapping');
-            }
-            let route = this.activatedRoute;
-            while (route.firstChild) {
-                route.firstChild.data.subscribe(r => {
-                    const layout = r['layout'];
-                    if (currentRouteData == null && layout !== null) {
-                        if (GlobalInjector.config.layouts.debugMode) {
-                            console.log('> currentRouteData', currentRouteData);
-                            console.log('   layout', layout);
-                            console.log('   applying', layout);
-                        }
-                        currentRouteData = layout;
-                    }
-                    else {
-                        currentRouteData = layout == null ? currentRouteData : this.mergeLayoutDatas(currentRouteData, layout);
-                    }
-                });
-                route = route.firstChild;
-            }
-            return { event, route };
-        }), filter((event) => event.route.outlet === 'primary'), mergeMap((x) => x.route.data))
-            .subscribe((data) => {
-            this.data = {
-                ...data,
-                layout: this.normalizeLayoutData(currentRouteData)
-            };
-            if (GlobalInjector.config.layouts.debugMode) {
-                console.log('all routes layout data merged for this route', currentRouteData);
-                console.log('final router data used', this.data);
-                console.groupEnd();
-            }
-            if (GlobalInjector.config.layouts.applicationActions.registerLogs) {
-                if (GlobalInjector.config.layouts.debugMode)
-                    console.log('ApplicationActions.SetLogApplicatinArea > appArea', data.appArea);
-                this.store.dispatch(new ApplicationActions.SetLogApplicatinArea(data.appArea));
-            }
-            if (GlobalInjector.config.layouts.dialogs.closeAllAfterNavigate) {
-                if (GlobalInjector.config.layouts.debugMode)
-                    console.log('>> Closing all dialogs');
-                this.dialogs.closeAll();
-            }
-            if (GlobalInjector.config.layouts.debugMode)
-                console.log('\n');
-            this.store.dispatch(new LayoutUiActions.SetTopbarTitle(data.title));
-        });
-    }
-    normalizeLayoutData(data) {
-        return {
-            mode: data?.mode ? data.mode : 'full',
-            hideFooter: data?.hideFooter ?? false,
-            contentPadding: data?.contentPadding ? data.contentPadding : '2em',
-            contentStyleClass: data?.contentStyleClass ?? ''
-        };
-    }
-    mergeLayoutDatas(before, current) {
-        if (GlobalInjector.config.layouts.debugMode) {
-            console.log('> mergeLayoutDatas');
-            console.log('   before', before);
-            console.log('   current', current);
-            console.log('   merging', before, current, mergeClone(before, current));
-        }
-        return mergeClone(before, current);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RouterDataListenerService, deps: [{ token: i1$9.Router }, { token: i1$9.ActivatedRoute }, { token: SmzDialogsService }, { token: i1$6.Store }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RouterDataListenerService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RouterDataListenerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$9.Router }, { type: i1$9.ActivatedRoute }, { type: SmzDialogsService }, { type: i1$6.Store }] });
-
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
-class ErrorComponent {
-    routerListener;
-    store;
-    uiConfig = GlobalInjector.config;
-    constructor(routerListener, store) {
-        this.routerListener = routerListener;
-        this.store = store;
-    }
-    ngOnInit() {
-        if (GlobalInjector.config.rbkUtils.errorsConfig.clearBehaviors.method === 'onError') {
-            this.clear();
-        }
-    }
-    redirect(button) {
-        if (button.callback != null) {
-            button.callback();
-        }
-        else {
-            this.store.dispatch(new Navigate([button.redirectTo]));
-            if (GlobalInjector.config.rbkUtils.errorsConfig.clearBehaviors.method === 'onRedirect') {
-                this.clear();
-            }
-        }
-    }
-    clear() {
-        if (GlobalInjector.config.rbkUtils.errorsConfig.clearBehaviors.globalStates) {
-            this.store.dispatch(new GlobalActions.Clear());
-        }
-        if (GlobalInjector.config.rbkUtils.errorsConfig.clearBehaviors.databaseStates) {
-            this.store.dispatch(new DatabaseActions.Clear());
-        }
-        if (GlobalInjector.config.rbkUtils.errorsConfig.clearBehaviors.featuresStates) {
-            this.store.dispatch(new FeaturesActions.Clear());
-        }
-        switch (GlobalInjector.config.rbkUtils.errorsConfig.clearBehaviors.localStorage) {
-            case 'appPrefix':
-                forIn(window.localStorage, (value, objKey) => {
-                    if (true === startsWith(objKey, GlobalInjector.config.rbkUtils.authentication.localStoragePrefix)) {
-                        window.localStorage.removeItem(objKey);
-                    }
-                });
-                break;
-            case 'none':
-                break;
-        }
-        if (GlobalInjector.config.rbkUtils.errorsConfig.clearBehaviors.navigationHistory) {
-            window.history.pushState('', '', '');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorComponent, deps: [{ token: RouterDataListenerService }, { token: i1$6.Store }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ErrorComponent, isStandalone: false, selector: "smz-ui-error", ngImport: i0, template: "\r\n<!-- VERS\u00C3O DESKTOP -->\r\n<div class=\"grid justify-center items-center vertical-container exception-page\">\r\n\r\n  <div class=\"grid justify-center items-center col-12 lg:col-6 grid-nogutter h-full bg-surface-ground\">\r\n    <div class=\"grid col-8 items-center\">\r\n      <div class=\"col-12 exception-label-error\">{{ uiConfig.rbkUtils.errorsConfig.page.title }}</div>\r\n      <div class=\"col-4 exception-separator\"></div>\r\n      <div class=\"col-12 exception-label-message\">{{ uiConfig.rbkUtils.errorsConfig.page.message }}</div>\r\n      <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n        @for (button of uiConfig.rbkUtils.errorsConfig.page.buttons; track button) {\r\n          @if (button.isVisible()) {\r\n            <button [ngClass]=\"button.styleClass\" pButton type=\"button\" [label]=\"button.label\" (click)=\"redirect(button)\"></button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col-12 lg:col-6 exception-image-container\">\r\n    <img [src]=\"uiConfig.rbkUtils.errorsConfig.page.imagePath\" alt=\"mirage-layout\" />\r\n  </div>\r\n</div>", styles: [".exception-page{overflow:hidden;margin:0;padding:0;height:100vh;width:100vw;position:relative}.exception-image-container{margin:0;padding:0}.exception-image-container img{height:100vh;width:100%;object-fit:cover}.exception-full-image-container{position:absolute;inset:0;margin:0;padding:0;z-index:-1}.exception-full-image-container img{height:100vh;width:100vw;object-fit:cover}.exception-label-error{font-size:5em;color:var(--text-color-secondary);padding:0}.exception-separator{border-bottom:4px #f44336 solid;width:30%;border-radius:4px;margin-bottom:2em;padding:0}.exception-separator.exception-light{border-bottom:4px var(--primary-color) solid}.exception-label-message{font-size:1.4em;color:var(--primary-color);margin-bottom:2em;padding:0}.exception-light{color:var(--primary-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smz-ui-error', standalone: false, template: "\r\n<!-- VERS\u00C3O DESKTOP -->\r\n<div class=\"grid justify-center items-center vertical-container exception-page\">\r\n\r\n  <div class=\"grid justify-center items-center col-12 lg:col-6 grid-nogutter h-full bg-surface-ground\">\r\n    <div class=\"grid col-8 items-center\">\r\n      <div class=\"col-12 exception-label-error\">{{ uiConfig.rbkUtils.errorsConfig.page.title }}</div>\r\n      <div class=\"col-4 exception-separator\"></div>\r\n      <div class=\"col-12 exception-label-message\">{{ uiConfig.rbkUtils.errorsConfig.page.message }}</div>\r\n      <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n        @for (button of uiConfig.rbkUtils.errorsConfig.page.buttons; track button) {\r\n          @if (button.isVisible()) {\r\n            <button [ngClass]=\"button.styleClass\" pButton type=\"button\" [label]=\"button.label\" (click)=\"redirect(button)\"></button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col-12 lg:col-6 exception-image-container\">\r\n    <img [src]=\"uiConfig.rbkUtils.errorsConfig.page.imagePath\" alt=\"mirage-layout\" />\r\n  </div>\r\n</div>", styles: [".exception-page{overflow:hidden;margin:0;padding:0;height:100vh;width:100vw;position:relative}.exception-image-container{margin:0;padding:0}.exception-image-container img{height:100vh;width:100%;object-fit:cover}.exception-full-image-container{position:absolute;inset:0;margin:0;padding:0;z-index:-1}.exception-full-image-container img{height:100vh;width:100vw;object-fit:cover}.exception-label-error{font-size:5em;color:var(--text-color-secondary);padding:0}.exception-separator{border-bottom:4px #f44336 solid;width:30%;border-radius:4px;margin-bottom:2em;padding:0}.exception-separator.exception-light{border-bottom:4px var(--primary-color) solid}.exception-label-message{font-size:1.4em;color:var(--primary-color);margin-bottom:2em;padding:0}.exception-light{color:var(--primary-color)}\n"] }]
-        }], ctorParameters: () => [{ type: RouterDataListenerService }, { type: i1$6.Store }] });
-
-const data$4 = {
-    layout: {
-        mode: 'none'
-    },
-    title: 'Erro',
-    appArea: 'error',
-    clearReusableRoutes: true,
-    requiredStates: []
-};
-const routes$5 = [
-    {
-        path: '',
-        canActivate: [],
-        component: ErrorComponent,
-        data: data$4
-    },
-];
-const routerModuleForChildErrorModule = RouterModule.forChild(routes$5);
-class ErrorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: ErrorModule, declarations: [ErrorComponent], imports: [CommonModule, i1$9.RouterModule, ButtonModule,
-            NgxSmzFormsModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorModule, imports: [CommonModule,
-            routerModuleForChildErrorModule,
-            ButtonModule,
-            NgxSmzFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ErrorComponent],
-                    imports: [
-                        CommonModule,
-                        routerModuleForChildErrorModule,
-                        ButtonModule,
-                        NgxSmzFormsModule,
-                    ],
-                    exports: []
-                }]
-        }] });
-
 var SmzContentTheme;
 (function (SmzContentTheme) {
     SmzContentTheme["ARYA_BLUE"] = "arya-blue/theme.css";
@@ -34535,7 +34005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ selector: 'smz-ui-login-page', standalone: false, template: "<smz-ui-login [state]=\"state\"></smz-ui-login>" }]
         }], ctorParameters: () => [{ type: i1$6.Store }] });
 
-const data$3 = {
+const data$2 = {
     layout: {
         mode: 'none'
     },
@@ -34544,20 +34014,20 @@ const data$3 = {
     clearReusableRoutes: true,
     requiredStates: []
 };
-const routes$4 = [
+const routes$3 = [
     {
         path: '',
         canActivate: [RbkDatabaseStateGuard],
         component: LoginComponent,
-        data: data$3
+        data: data$2
     },
 ];
-const routerModuleForChildLoginModule = RouterModule.forChild(routes$4);
+const routerModuleForChildLoginModule = RouterModule.forChild(routes$3);
 class LoginModule {
     constructor() {
         const config = GlobalInjector.config;
         if (!config.rbkUtils.authentication.useSingleTenantAplication) {
-            data$3.requiredStates.push(TENANTS_STATE_NAME);
+            data$2.requiredStates.push(TENANTS_STATE_NAME);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LoginModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -34592,64 +34062,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
-class NotFoundComponent {
-    uiConfig = GlobalInjector.config;
-    constructor() {
-    }
-    ngOnInit() {
-    }
-    clear() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: NotFoundComponent, isStandalone: false, selector: "smz-ui-not-found", ngImport: i0, template: "<!-- VERS\u00C3O DESKTOP -->\r\n<div class=\"grid justify-center items-center vertical-container exception-page\">\r\n\r\n  <div class=\"grid justify-center items-center col-12 lg:col-6 grid-nogutter\">\r\n      <div class=\"grid col-8 items-center\">\r\n          <div class=\"col-12 exception-label-error\">{{ uiConfig.layouts.pages.notFoundTitle }}</div>\r\n          <div class=\"col-4 exception-separator\"></div>\r\n          <div class=\"col-12 exception-label-message\">{{ uiConfig.layouts.pages.notFoundMessage }}</div>\r\n          <button class=\"col-4 p-button-lg p-button-ghost\" pButton type=\"button\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\" label=\"Ir para Home\"></button>\r\n      </div>\r\n  </div>\r\n\r\n  <div class=\"col-12 lg:col-6 exception-image-container\">\r\n      <img [src]=\"uiConfig.layouts.pages.notFoundImagePath\"/>\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotFoundComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smz-ui-not-found', standalone: false, template: "<!-- VERS\u00C3O DESKTOP -->\r\n<div class=\"grid justify-center items-center vertical-container exception-page\">\r\n\r\n  <div class=\"grid justify-center items-center col-12 lg:col-6 grid-nogutter\">\r\n      <div class=\"grid col-8 items-center\">\r\n          <div class=\"col-12 exception-label-error\">{{ uiConfig.layouts.pages.notFoundTitle }}</div>\r\n          <div class=\"col-4 exception-separator\"></div>\r\n          <div class=\"col-12 exception-label-message\">{{ uiConfig.layouts.pages.notFoundMessage }}</div>\r\n          <button class=\"col-4 p-button-lg p-button-ghost\" pButton type=\"button\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\" label=\"Ir para Home\"></button>\r\n      </div>\r\n  </div>\r\n\r\n  <div class=\"col-12 lg:col-6 exception-image-container\">\r\n      <img [src]=\"uiConfig.layouts.pages.notFoundImagePath\"/>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [] });
-
-const data$2 = {
-    layout: {
-        mode: 'none'
-    },
-    title: 'Rota não encontrada',
-    appArea: 'not-found',
-    clearReusableRoutes: true,
-    requiredStates: []
-};
-const routes$3 = [
-    {
-        path: '',
-        canActivate: [],
-        component: NotFoundComponent,
-        data: data$2
-    },
-];
-const routerModuleForChildNotFoundModule = RouterModule.forChild(routes$3);
-class NotFoundModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotFoundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: NotFoundModule, declarations: [NotFoundComponent], imports: [CommonModule, i1$9.RouterModule, ButtonModule,
-            NgxSmzFormsModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotFoundModule, imports: [CommonModule,
-            routerModuleForChildNotFoundModule,
-            ButtonModule,
-            NgxSmzFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotFoundModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NotFoundComponent],
-                    imports: [
-                        CommonModule,
-                        routerModuleForChildNotFoundModule,
-                        ButtonModule,
-                        NgxSmzFormsModule,
-                    ],
-                    exports: []
-                }]
-        }] });
-
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
 class SuperuserLoginComponent {
     store;
@@ -35164,13 +34576,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
 function getLoginModule() { return LoginModule; }
 function getSuperuserLoginModule() { return SuperuserLoginModule; }
-function getErrorModule() { return ErrorModule; }
-function getNotFoundModule() { return NotFoundModule; }
+// export function getErrorModule() { return ErrorModule; }
+// export function getNotFoundModule() { return NotFoundModule; }
 function getDiagnosticsDataCollectModule() { return DiagnosticsDataCollectModule; }
 const routes = [
-    { path: 'error', loadChildren: getErrorModule },
     { path: 'diagnostics-data-collect', loadChildren: getDiagnosticsDataCollectModule },
-    { path: 'notfound', loadChildren: getNotFoundModule },
     { path: '**', redirectTo: 'notfound' },
 ];
 const routerModuleForRootNgxSmzLayoutsModule = RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' });
@@ -36414,6 +35824,113 @@ __decorate([
     Selector([UiHephaestusState])
 ], UiHephaestusSelectors, "layout", null);
 
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
+class RouterDataListenerService {
+    router;
+    activatedRoute;
+    dialogs;
+    store;
+    data = null;
+    constructor(router, activatedRoute, dialogs, store) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.dialogs = dialogs;
+        this.store = store;
+        if (GlobalInjector.config.layouts.debugMode)
+            console.log('>> RouterDataListenerService constructor');
+        if (GlobalInjector.config.layouts.debugMode)
+            console.log('>> configuration', GlobalInjector.config);
+        let currentRouteData = null;
+        this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd), tap$1((event) => {
+            if (GlobalInjector.config.layouts.debugMode)
+                console.log('\n##########');
+            if (GlobalInjector.config.layouts.debugMode)
+                console.log('>> NavigationEnd');
+            if (GlobalInjector.config.layouts.applicationActions.registerLogs) {
+                if (GlobalInjector.config.layouts.debugMode)
+                    console.log('ApplicationActions.SetLogExtraData > urlAfterRedirects', event.urlAfterRedirects);
+                this.store.dispatch(new ApplicationActions.SetLogExtraData(event.urlAfterRedirects));
+            }
+            if (GlobalInjector.config.layouts._internal?.specificThemeNavigationEndCallback != null) {
+                GlobalInjector.config.layouts._internal.specificThemeNavigationEndCallback();
+            }
+        }), map((event) => {
+            if (GlobalInjector.config.layouts.debugMode) {
+                console.group('router.events > mapping');
+            }
+            let route = this.activatedRoute;
+            while (route.firstChild) {
+                route.firstChild.data.subscribe(r => {
+                    const layout = r['layout'];
+                    if (currentRouteData == null && layout !== null) {
+                        if (GlobalInjector.config.layouts.debugMode) {
+                            console.log('> currentRouteData', currentRouteData);
+                            console.log('   layout', layout);
+                            console.log('   applying', layout);
+                        }
+                        currentRouteData = layout;
+                    }
+                    else {
+                        currentRouteData = layout == null ? currentRouteData : this.mergeLayoutDatas(currentRouteData, layout);
+                    }
+                });
+                route = route.firstChild;
+            }
+            return { event, route };
+        }), filter((event) => event.route.outlet === 'primary'), mergeMap((x) => x.route.data))
+            .subscribe((data) => {
+            this.data = {
+                ...data,
+                layout: this.normalizeLayoutData(currentRouteData)
+            };
+            if (GlobalInjector.config.layouts.debugMode) {
+                console.log('all routes layout data merged for this route', currentRouteData);
+                console.log('final router data used', this.data);
+                console.groupEnd();
+            }
+            if (GlobalInjector.config.layouts.applicationActions.registerLogs) {
+                if (GlobalInjector.config.layouts.debugMode)
+                    console.log('ApplicationActions.SetLogApplicatinArea > appArea', data.appArea);
+                this.store.dispatch(new ApplicationActions.SetLogApplicatinArea(data.appArea));
+            }
+            if (GlobalInjector.config.layouts.dialogs.closeAllAfterNavigate) {
+                if (GlobalInjector.config.layouts.debugMode)
+                    console.log('>> Closing all dialogs');
+                this.dialogs.closeAll();
+            }
+            if (GlobalInjector.config.layouts.debugMode)
+                console.log('\n');
+            this.store.dispatch(new LayoutUiActions.SetTopbarTitle(data.title));
+        });
+    }
+    normalizeLayoutData(data) {
+        return {
+            mode: data?.mode ? data.mode : 'full',
+            hideFooter: data?.hideFooter ?? false,
+            contentPadding: data?.contentPadding ? data.contentPadding : '2em',
+            contentStyleClass: data?.contentStyleClass ?? ''
+        };
+    }
+    mergeLayoutDatas(before, current) {
+        if (GlobalInjector.config.layouts.debugMode) {
+            console.log('> mergeLayoutDatas');
+            console.log('   before', before);
+            console.log('   current', current);
+            console.log('   merging', before, current, mergeClone(before, current));
+        }
+        return mergeClone(before, current);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RouterDataListenerService, deps: [{ token: i1$9.Router }, { token: i1$9.ActivatedRoute }, { token: SmzDialogsService }, { token: i1$6.Store }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RouterDataListenerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RouterDataListenerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$9.Router }, { type: i1$9.ActivatedRoute }, { type: SmzDialogsService }, { type: i1$6.Store }] });
+
 class PrimeConfigService {
     filterUtils;
     primeConfig = inject(PrimeNG);
@@ -38273,11 +37790,11 @@ class OutletComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OutletComponent, deps: [{ token: RouterDataListenerService }, { token: i1$6.Store }, { token: PrimeConfigService }, { token: i1$a.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OutletComponent, isStandalone: false, selector: "smz-ui-outlet", inputs: { menu: "menu" }, host: { listeners: { "mouseleave": "onMouseLeave()", "mouseenter": "onBeforeUnload()" } }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "\r\n@switch (routerListener.data?.layout?.mode) {\r\n  <!-- LAYOUT SIMPLES -->\r\n  @case ('none') {\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n  <!-- LAYOUT COMPLETO -->\r\n  @case ('full') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM MENU LATERAL -->\r\n  @case ('menu-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM BARRA SUPERIOR -->\r\n  @case ('topbar-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @case ('custom') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @default {\r\n    <!-- Nenhum tipo de layout foi encontrado. -->\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n}\r\n\r\n<smz-ui-theme-manager></smz-ui-theme-manager>\r\n<smz-ui-global-loader></smz-ui-global-loader>\r\n<smz-ui-dock></smz-ui-dock>\r\n<smz-ui-block></smz-ui-block>\r\n<smz-export-dialog></smz-export-dialog>\r\n<!-- <ng-container *ngIf=\"toast$ | async as toast\">\r\n<p-toast [position]=\"toast.position\"></p-toast>\r\n</ng-container> -->", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThemeManagerComponent, selector: "smz-ui-theme-manager" }, { kind: "component", type: GlobalLoaderComponent, selector: "smz-ui-global-loader", inputs: ["template"] }, { kind: "component", type: SmzDockComponent, selector: "smz-ui-dock" }, { kind: "component", type: SmzUiBlockComponent, selector: "smz-ui-block" }, { kind: "component", type: SmzExportDialogComponent, selector: "smz-export-dialog" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OutletComponent, isStandalone: false, selector: "smz-ui-outlet", inputs: { menu: "menu" }, host: { listeners: { "mouseleave": "onMouseLeave()", "mouseenter": "onBeforeUnload()" } }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "\r\n@switch (routerListener.data?.layout?.mode) {\r\n  <!-- LAYOUT SIMPLES -->\r\n  @case ('none') {\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n  <!-- LAYOUT COMPLETO -->\r\n  @case ('full') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM MENU LATERAL -->\r\n  @case ('menu-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM BARRA SUPERIOR -->\r\n  @case ('topbar-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @case ('custom') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @default {\r\n    <!-- Nenhum tipo de layout foi encontrado. -->\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n}\r\n\r\n<smz-ui-theme-manager></smz-ui-theme-manager>\r\n<smz-ui-global-loader></smz-ui-global-loader>\r\n<smz-ui-dock></smz-ui-dock>\r\n<smz-ui-block></smz-ui-block>\r\n<smz-export-dialog></smz-export-dialog>\r\n<p-toast position=\"bottom-right\"></p-toast>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThemeManagerComponent, selector: "smz-ui-theme-manager" }, { kind: "component", type: GlobalLoaderComponent, selector: "smz-ui-global-loader", inputs: ["template"] }, { kind: "component", type: SmzDockComponent, selector: "smz-ui-dock" }, { kind: "component", type: SmzUiBlockComponent, selector: "smz-ui-block" }, { kind: "component", type: SmzExportDialogComponent, selector: "smz-export-dialog" }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-outlet', standalone: false, template: "\r\n@switch (routerListener.data?.layout?.mode) {\r\n  <!-- LAYOUT SIMPLES -->\r\n  @case ('none') {\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n  <!-- LAYOUT COMPLETO -->\r\n  @case ('full') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM MENU LATERAL -->\r\n  @case ('menu-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM BARRA SUPERIOR -->\r\n  @case ('topbar-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @case ('custom') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @default {\r\n    <!-- Nenhum tipo de layout foi encontrado. -->\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n}\r\n\r\n<smz-ui-theme-manager></smz-ui-theme-manager>\r\n<smz-ui-global-loader></smz-ui-global-loader>\r\n<smz-ui-dock></smz-ui-dock>\r\n<smz-ui-block></smz-ui-block>\r\n<smz-export-dialog></smz-export-dialog>\r\n<!-- <ng-container *ngIf=\"toast$ | async as toast\">\r\n<p-toast [position]=\"toast.position\"></p-toast>\r\n</ng-container> -->" }]
+            args: [{ selector: 'smz-ui-outlet', standalone: false, template: "\r\n@switch (routerListener.data?.layout?.mode) {\r\n  <!-- LAYOUT SIMPLES -->\r\n  @case ('none') {\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n  <!-- LAYOUT COMPLETO -->\r\n  @case ('full') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM MENU LATERAL -->\r\n  @case ('menu-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <!-- LAYOUT APENAS COM BARRA SUPERIOR -->\r\n  @case ('topbar-only') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @case ('custom') {\r\n    <ng-container *ngTemplateOutlet=\"layoutTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  @default {\r\n    <!-- Nenhum tipo de layout foi encontrado. -->\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  }\r\n}\r\n\r\n<smz-ui-theme-manager></smz-ui-theme-manager>\r\n<smz-ui-global-loader></smz-ui-global-loader>\r\n<smz-ui-dock></smz-ui-dock>\r\n<smz-ui-block></smz-ui-block>\r\n<smz-export-dialog></smz-export-dialog>\r\n<p-toast position=\"bottom-right\"></p-toast>" }]
         }], ctorParameters: () => [{ type: RouterDataListenerService }, { type: i1$6.Store }, { type: PrimeConfigService }, { type: i1$a.BreakpointObserver }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -38741,17 +38258,17 @@ class SmzTenantSwitchComponent {
         showSwitchTenantDialog();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTenantSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTenantSwitchComponent, isStandalone: true, selector: "smz-tenant-switch", host: { classAttribute: "w-full h-full relative" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTenantSwitchComponent, isStandalone: true, selector: "smz-tenant-switch", host: { classAttribute: "h-full relative" }, ngImport: i0, template: `
   @if ((isAuthenticated$ | async) && (isSuperuserLogged$ | async) === false && showTenantSwitch) {
-    <p-select appendTo="body" [options]="userAllowedTenants$ | async" styleClass="smz-tenant-switch-small w-full" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (onChange)="onSelectorChange($event)"></p-select>
+    <p-select appendTo="body" [options]="userAllowedTenants$ | async" styleClass="smz-tenant-switch-small" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (onChange)="onSelectorChange($event)"></p-select>
   }
   `, isInline: true, styles: [".smz-tenant-switch-small .p-inputtext{padding:.5rem .75rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTenantSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-tenant-switch', imports: [CommonModule, SelectModule, FormsModule, SharedModule], host: { class: 'w-full h-full relative' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: `
+            args: [{ selector: 'smz-tenant-switch', imports: [CommonModule, SelectModule, FormsModule, SharedModule], host: { class: 'h-full relative' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: `
   @if ((isAuthenticated$ | async) && (isSuperuserLogged$ | async) === false && showTenantSwitch) {
-    <p-select appendTo="body" [options]="userAllowedTenants$ | async" styleClass="smz-tenant-switch-small w-full" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (onChange)="onSelectorChange($event)"></p-select>
+    <p-select appendTo="body" [options]="userAllowedTenants$ | async" styleClass="smz-tenant-switch-small" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (onChange)="onSelectorChange($event)"></p-select>
   }
   `, styles: [".smz-tenant-switch-small .p-inputtext{padding:.5rem .75rem!important}\n"] }]
         }], ctorParameters: () => [] });
@@ -39476,7 +38993,7 @@ class HephaestusSidebarComponent {
     templates;
     layout$ = inject(Store).select(UiHephaestusSelectors.layout);
     appName$ = inject(Store).select(LayoutUiSelectors.appName);
-    currentRoute$ = inject(Store).select(RouterState.state);
+    currentRoute$ = inject(Store).select(RouterState.state());
     appLayoutLogo$ = inject(Store).select(LayoutUiSelectors.appDarkLogo);
     headerExtrasTemplate;
     menu;
@@ -40003,14 +39520,16 @@ class OutletModule {
             GlobalLoaderModule,
             NgxSmzDockModule,
             NgxSmzUiBlockModule,
-            SmzExportDialogModule], exports: [OutletComponent] });
+            SmzExportDialogModule,
+            ToastModule], exports: [OutletComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OutletModule, imports: [CommonModule,
             SharedModule,
             SmzThemeManagerModule,
             GlobalLoaderModule,
             NgxSmzDockModule,
             NgxSmzUiBlockModule,
-            SmzExportDialogModule] });
+            SmzExportDialogModule,
+            ToastModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OutletModule, decorators: [{
             type: NgModule,
@@ -40023,7 +39542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         GlobalLoaderModule,
                         NgxSmzDockModule,
                         NgxSmzUiBlockModule,
-                        SmzExportDialogModule
+                        SmzExportDialogModule,
+                        ToastModule
                     ],
                     exports: [OutletComponent]
                 }]
@@ -41524,11 +41044,11 @@ class SmzNotificationsComponent {
         showNotificationsDialog();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzNotificationsComponent, isStandalone: false, selector: "smz-ui-notifications", ngImport: i0, template: "@if (notifications$ | async; as notifications) {\r\n  <smz-responsive class=\"col grid grid-nogutter w-full items-center justify-start\">\r\n    <!-- LANDSCAPE -->\r\n    <ng-template pTemplate=\"landscape\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"op.toggle($event)\"></div>\r\n      </i>\r\n      <p-overlayPanel #op styleClass=\"max-h-[85vh] overflow-y-auto\" [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [ngClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\r\n        <ng-template pTemplate>\r\n          <smz-notifications-list></smz-notifications-list>\r\n        </ng-template>\r\n      </p-overlayPanel>\r\n    </ng-template>\r\n    <!-- PORTRAIT -->\r\n    <ng-template pTemplate=\"portrait\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"showDialog()\"></div>\r\n      </i>\r\n    </ng-template>\r\n  </smz-responsive>\r\n}", styles: ["smz-ui-notifications .notification-container{min-width:40px}smz-ui-notifications .badge-color{color:var(--text-color-secondary)}smz-ui-notifications .p-badge{background:var(--surface-a);color:var(--primary-color)}smz-ui-notifications .regular-badge{font-size:1.6rem;line-height:1.6rem}smz-ui-notifications .regular-badge .p-badge{font-size:.8rem;font-weight:700;min-width:1.1rem;height:1.1rem;line-height:1.1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$8.BadgeDirective, selector: "[pBadge]", inputs: ["ptBadgeDirective", "pBadgePT", "pBadgeUnstyled", "badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "mousePosition", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }, { kind: "component", type: NotificationsListComponent, selector: "smz-notifications-list" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzNotificationsComponent, isStandalone: false, selector: "smz-ui-notifications", ngImport: i0, template: "@if (notifications$ | async; as notifications) {\r\n  <smz-responsive class=\"col grid grid-nogutter w-full items-center justify-start\">\r\n    <!-- LANDSCAPE -->\r\n    <ng-template pTemplate=\"landscape\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"op.toggle($event)\"></div>\r\n      </i>\r\n      <p-popover #op [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [ngClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\r\n        <smz-notifications-list></smz-notifications-list>\r\n      </p-popover>\r\n    </ng-template>\r\n    <!-- PORTRAIT -->\r\n    <ng-template pTemplate=\"portrait\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"showDialog()\"></div>\r\n      </i>\r\n    </ng-template>\r\n  </smz-responsive>\r\n}", styles: ["smz-ui-notifications .notification-container{min-width:40px}smz-ui-notifications .badge-color{color:var(--text-color-secondary)}smz-ui-notifications .p-badge{background:var(--surface-a);color:var(--primary-color)}smz-ui-notifications .regular-badge{font-size:1.6rem;line-height:1.6rem}smz-ui-notifications .regular-badge .p-badge{font-size:.8rem;font-weight:700;min-width:1.1rem;height:1.1rem;line-height:1.1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$8.BadgeDirective, selector: "[pBadge]", inputs: ["ptBadgeDirective", "pBadgePT", "pBadgeUnstyled", "badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }, { kind: "component", type: NotificationsListComponent, selector: "smz-notifications-list" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-notifications', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (notifications$ | async; as notifications) {\r\n  <smz-responsive class=\"col grid grid-nogutter w-full items-center justify-start\">\r\n    <!-- LANDSCAPE -->\r\n    <ng-template pTemplate=\"landscape\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"op.toggle($event)\"></div>\r\n      </i>\r\n      <p-overlayPanel #op styleClass=\"max-h-[85vh] overflow-y-auto\" [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [ngClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\r\n        <ng-template pTemplate>\r\n          <smz-notifications-list></smz-notifications-list>\r\n        </ng-template>\r\n      </p-overlayPanel>\r\n    </ng-template>\r\n    <!-- PORTRAIT -->\r\n    <ng-template pTemplate=\"portrait\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"showDialog()\"></div>\r\n      </i>\r\n    </ng-template>\r\n  </smz-responsive>\r\n}", styles: ["smz-ui-notifications .notification-container{min-width:40px}smz-ui-notifications .badge-color{color:var(--text-color-secondary)}smz-ui-notifications .p-badge{background:var(--surface-a);color:var(--primary-color)}smz-ui-notifications .regular-badge{font-size:1.6rem;line-height:1.6rem}smz-ui-notifications .regular-badge .p-badge{font-size:.8rem;font-weight:700;min-width:1.1rem;height:1.1rem;line-height:1.1rem}\n"] }]
+            args: [{ selector: 'smz-ui-notifications', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (notifications$ | async; as notifications) {\r\n  <smz-responsive class=\"col grid grid-nogutter w-full items-center justify-start\">\r\n    <!-- LANDSCAPE -->\r\n    <ng-template pTemplate=\"landscape\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"op.toggle($event)\"></div>\r\n      </i>\r\n      <p-popover #op [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [ngClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\r\n        <smz-notifications-list></smz-notifications-list>\r\n      </p-popover>\r\n    </ng-template>\r\n    <!-- PORTRAIT -->\r\n    <ng-template pTemplate=\"portrait\">\r\n      <i class=\"pi pi-bell badge-color regular-badge\" pBadge [value]=\"(newCount$ | async).toString()\">\r\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"showDialog()\"></div>\r\n      </i>\r\n    </ng-template>\r\n  </smz-responsive>\r\n}", styles: ["smz-ui-notifications .notification-container{min-width:40px}smz-ui-notifications .badge-color{color:var(--text-color-secondary)}smz-ui-notifications .p-badge{background:var(--surface-a);color:var(--primary-color)}smz-ui-notifications .regular-badge{font-size:1.6rem;line-height:1.6rem}smz-ui-notifications .regular-badge .p-badge{font-size:.8rem;font-weight:700;min-width:1.1rem;height:1.1rem;line-height:1.1rem}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
@@ -41916,7 +41436,7 @@ class AthenaHorizontalMenuComponent {
     appLogo$ = inject(Store).select(LayoutUiSelectors.appContentLogo);
     layout$ = inject(Store).select(UiAthenaSelectors$1.layout);
     appName$ = inject(Store).select(LayoutUiSelectors.appName);
-    currentRoute$ = inject(Store).select(RouterState.state);
+    currentRoute$ = inject(Store).select(RouterState.state());
     menu;
     isAnyMenuExpanded = false;
     menuType = MenuType;
@@ -42089,7 +41609,7 @@ class SmzNotificationsModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SmzNotificationsModule, declarations: [SmzNotificationsComponent, NotificationsListComponent, NotificationItemComponent], imports: [CommonModule,
             FormsModule,
             BadgeModule,
-            OverlayPanelModule,
+            PopoverModule,
             ButtonModule,
             NgxSmzTablesModule,
             InputTextModule,
@@ -42105,7 +41625,7 @@ class SmzNotificationsModule {
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzNotificationsModule, imports: [CommonModule,
             FormsModule,
             BadgeModule,
-            OverlayPanelModule,
+            PopoverModule,
             ButtonModule,
             NgxSmzTablesModule,
             InputTextModule,
@@ -42124,7 +41644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         CommonModule,
                         FormsModule,
                         BadgeModule,
-                        OverlayPanelModule,
+                        PopoverModule,
                         ButtonModule,
                         NgxSmzTablesModule,
                         InputTextModule,
@@ -43032,12 +42552,12 @@ class AthenaTopbarActionsComponent {
 
       <div id="smz-ui-topbar"></div>
 
-      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start">
+      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start gap-5">
 
         <!-- LANDSCAPE -->
         <ng-template pTemplate="landscape">
 
-          <span class="col extras-container justify-end extras-container mr-3">
+          <span class="col extras-container justify-end extras-container">
             @if (headerExtrasTemplate != null) {
               <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
             }
@@ -43053,11 +42573,11 @@ class AthenaTopbarActionsComponent {
 
 
           @if (showLocalizationSwitch) {
-            <smz-localization-switch class="mr-3"></smz-localization-switch>
+            <smz-localization-switch></smz-localization-switch>
           }
 
           @if (showTenantSwitch) {
-            <smz-tenant-switch class="mr-3"></smz-tenant-switch>
+            <smz-tenant-switch></smz-tenant-switch>
           }
 
           @if (profile != null) {
@@ -43069,7 +42589,7 @@ class AthenaTopbarActionsComponent {
         <!-- PORTRAIT -->
         <ng-template pTemplate="portrait">
 
-          <span class="col extras-container justify-end extras-container mr-3">
+          <span class="col extras-container justify-end extras-container">
             @if (headerExtrasTemplate != null) {
               <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
             }
@@ -43085,7 +42605,7 @@ class AthenaTopbarActionsComponent {
 
 
           @if (showTenantSwitch) {
-            <smz-tenant-switch class="mr-3"></smz-tenant-switch>
+            <smz-tenant-switch></smz-tenant-switch>
           }
 
           @if (profile != null) {
@@ -43105,12 +42625,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
       <div id="smz-ui-topbar"></div>
 
-      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start">
+      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start gap-5">
 
         <!-- LANDSCAPE -->
         <ng-template pTemplate="landscape">
 
-          <span class="col extras-container justify-end extras-container mr-3">
+          <span class="col extras-container justify-end extras-container">
             @if (headerExtrasTemplate != null) {
               <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
             }
@@ -43126,11 +42646,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 
           @if (showLocalizationSwitch) {
-            <smz-localization-switch class="mr-3"></smz-localization-switch>
+            <smz-localization-switch></smz-localization-switch>
           }
 
           @if (showTenantSwitch) {
-            <smz-tenant-switch class="mr-3"></smz-tenant-switch>
+            <smz-tenant-switch></smz-tenant-switch>
           }
 
           @if (profile != null) {
@@ -43142,7 +42662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         <!-- PORTRAIT -->
         <ng-template pTemplate="portrait">
 
-          <span class="col extras-container justify-end extras-container mr-3">
+          <span class="col extras-container justify-end extras-container">
             @if (headerExtrasTemplate != null) {
               <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
             }
@@ -43158,7 +42678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 
           @if (showTenantSwitch) {
-            <smz-tenant-switch class="mr-3"></smz-tenant-switch>
+            <smz-tenant-switch></smz-tenant-switch>
           }
 
           @if (profile != null) {
@@ -43474,11 +42994,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class NewAthenaHorizontalMenuComponent {
     _eref;
     templates;
-    topbarTitle$ = inject(Store).select(LayoutUiSelectors.topbarTitle);
-    appLogo$ = inject(Store).select(LayoutUiSelectors.appContentLogo);
-    layout$ = inject(Store).select(UiAthenaSelectors.layout);
-    appName$ = inject(Store).select(LayoutUiSelectors.appName);
-    currentRoute$ = inject(Store).select(RouterState.state);
+    store = inject(Store);
+    topbarTitle$ = this.store.select(LayoutUiSelectors.topbarTitle);
+    appLogo$ = this.store.select(LayoutUiSelectors.appContentLogo);
+    layout$ = this.store.select(UiAthenaSelectors.layout);
+    appName$ = this.store.select(LayoutUiSelectors.appName);
+    currentRoute$ = this.store.select(RouterState.state());
     menu;
     isAnyMenuExpanded = false;
     menuType = MenuType;
@@ -43486,8 +43007,6 @@ class NewAthenaHorizontalMenuComponent {
     constructor(_eref) {
         this._eref = _eref;
     }
-    ngOnInit() {
-    }
     ngAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
@@ -44366,7 +43885,7 @@ class TreeHelperService {
             this.add(key, result);
         }
         else {
-            const resultCloned = cloneDeep$2(result);
+            const resultCloned = cloneDeep(result);
             synchronizeTrees(resultCloned, this.trees[key]);
             this.trees[key] = resultCloned;
         }
@@ -44860,7 +44379,7 @@ class SmzTreeComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TreeHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeComponent, isStandalone: false, selector: "smz-ui-tree", inputs: { state: "state", items: "items", loading: "loading", styleClass: "styleClass", inlineStyle: "inlineStyle", appendTo: "appendTo", selection: "selection", selectionKey: "selectionKey" }, outputs: { selectedNodes: "selectedNodes", selectionChange: "selectionChange", parentChange: "parentChange", reorder: "reorder", blockedDrop: "blockedDrop", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", treeExpanded: "treeExpanded", nodeDropped: "nodeDropped" }, providers: [TreeDragDropService], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dt", first: true, predicate: Tree, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (state) {\r\n  @if ((state.emptyFeedback?.isFeatured) && (treeItems != null && treeItems.length === 0)) {\r\n    <smz-data-info\r\n      [image]=\"state.emptyFeedback.image\"\r\n      [message]=\"state.emptyFeedback.message\"\r\n      [callbackInfo]=\"state.emptyFeedback.extraInfo\"\r\n      [callbackLabel]=\"state.emptyFeedback.actionButton?.label\"\r\n      (clicked)=\"state.emptyFeedback.actionButton?.callback($event)\">\r\n      <ng-template pTemplate=\"actions\">\r\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n      </ng-template>\r\n    </smz-data-info>\r\n  } @else {\r\n    @if (treeItems != null) {\r\n      <p-contextMenu #cm [model]=\"menuItems\" [appendTo]=\"appendTo\" [styleClass]=\"menuItems == null || menuItems?.length === 0 ? 'invisible-important' : ''\"></p-contextMenu>\r\n      <p-menu #rowMenu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\" />\r\n      <p-tree #dt [value]=\"treeItems\"\r\n        scrollHeight=\"flex\"\r\n        [contextMenu]=\"state.menu.behavior === 'context-menu' ? cm : null\"\r\n        [selectionMode]=\"state.selection.mode\"\r\n        [(selection)]=\"primeSelection\"\r\n        layout=\"vertical\"\r\n        [style]=\"inlineStyle\"\r\n        [styleClass]=\"styleClass\"\r\n        [propagateSelectionUp]=\"state.selection.propagateUp\"\r\n        [propagateSelectionDown]=\"state.selection.propagateDown\"\r\n        [loading]=\"state.loading.isLoading\"\r\n        [loadingIcon]=\"state.loading.icon\"\r\n        [filter]=\"false\"\r\n        [filterMode]=\"state.filter.mode\"\r\n        [filterPlaceholder]=\"state.filter.textPlaceholder\"\r\n        [draggableNodes]=\"state.dragAndDrop.draggable\"\r\n        [droppableNodes]=\"state.dragAndDrop.droppable\"\r\n        [validateDrop]=\"state.dragAndDrop.validateDrop\"\r\n        (onNodeContextMenuSelect)=\"onContextMenuOpen($event)\"\r\n        (onNodeSelect)=\"onSelected($event)\"\r\n        (onNodeUnselect)=\"onUnselected($event)\"\r\n        (onNodeExpand)=\"onExpanded($event)\"\r\n        (onNodeCollapse)=\"onCollapsed($event)\"\r\n        (onNodeDrop)=\"onDropped($event)\"\r\n        (onFilter)=\"onFiltered($event)\">\r\n        @if (state.header.isVisible) {\r\n          <ng-template pTemplate=\"header\">\r\n            @if (state.header.toolbar; as toolbar) {\r\n              @if (headerTemplate != null) {\r\n                <div class=\"grid grid-nogutter items-center w-full justify-start\">\r\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n              }\r\n              <div class=\"grid grid-nogutter justify-start items-center mb-2 gap-2\">\r\n                @if (state.header.title != null) {\r\n                  <h3 class=\"m-2 col\">{{state.header.title}}</h3>\r\n                }\r\n                <div class=\"grid grid-nogutter justify-start items-center gap-2\">\r\n                  @for (button of state.header.toolbar.items; track button; let i = $index) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': button.color === 'secondary', 'p-button-success': button.color === 'success', 'p-button-info': button.color === 'info', 'p-button-warning': button.color === 'warning', 'p-button-help': button.color === 'help', 'p-button-danger': button.color === 'danger' }\"\r\n                      [label]=\"button.label\"\r\n                      [icon]=\"button.icon\"\r\n                      (click)=\"onToolbarButtonClick($event, button, treeItems)\"\r\n                      [pTooltip]=\"button.tooltip\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.nodeExpandButtons.expandLabel\"\r\n                      icon=\"fa-solid fa-angle-down\"\r\n                      (click)=\"expandNode()\"\r\n                      [pTooltip]=\"selection != null ? toolbar.nodeExpandButtons.expandTooltip : toolbar.nodeExpandButtons.disabledTooltip\"\r\n                      [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.nodeExpandButtons.collapseLabel\"\r\n                      icon=\"fa-solid fa-angle-up\"\r\n                      (click)=\"collapseNode()\"\r\n                      [pTooltip]=\"selection != null ? toolbar.nodeExpandButtons.collapseTooltip : toolbar.nodeExpandButtons.disabledTooltip\"\r\n                      [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.treeExpandButtons.expandLabel\"\r\n                      icon=\"fa-solid fa-angles-down\"\r\n                      (click)=\"expandAll()\"\r\n                      [pTooltip]=\"\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.treeExpandButtons.collapseLabel\"\r\n                      icon=\"fa-solid fa-angles-up\"\r\n                      (click)=\"collapseAll()\"\r\n                      [pTooltip]=\"\">\r\n                    </button>\r\n                  }\r\n                  @if (actionsTemplate != null) {\r\n                    <div class=\"grid grid-nogutter items-center justify-start\">\r\n                      <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: dt }\"></ng-container>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (state.filter.show) {\r\n                  <p-iconfield class=\"col-12\" [ngClass]=\"state.filter.styleClass\">\r\n                    <p-inputicon styleClass=\"pi pi-search\" />\r\n                    <input #inputGlobal pInputText type=\"text\" (input)=\"dt._filter(inputGlobal.value)\" [placeholder]=\"state.filter.textPlaceholder\" />\r\n                  </p-iconfield>\r\n                }\r\n              </div>\r\n              @if (toolbarTemplate != null) {\r\n                <div class=\"grid grid-nogutter items-center mt-2\"\r\n                  [ngClass]=\"'justify-' + state.header.toolbar.alignment\">\r\n                  <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n              }\r\n            }\r\n          </ng-template>\r\n        }\r\n        @if (state.footer.isVisible) {\r\n          <ng-template pTemplate=\"footer\">\r\n            <div class=\"grid grid-nogutter justify-start items-center\">\r\n              <span class=\"col mr-2\">FOOTER</span>\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        @for (content of contentTemplates; track content) {\r\n          <ng-template let-node [pTemplate]=\"content.type\">\r\n            <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n              @if (content.template != null) {\r\n                <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\r\n              } @else {\r\n                <div>{{ node.label }}</div>\r\n              }\r\n              @if (state.menu.behavior === 'row-menu') {\r\n                <p-button clickStopPropagation (onClick)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"/>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-template let-node pTemplate=\"Check\">\r\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n            <div>{{ node.label }}</div>\r\n            @if (state.menu.behavior === 'row-menu') {\r\n              <p-button clickStopPropagation (onClick)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"/>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"empty\">\r\n          @if (!state.emptyFeedback.isFeatured) {\r\n            <div>{{ state.emptyFeedback.message }}</div>\r\n          }\r\n        </ng-template>\r\n      </p-tree>\r\n    }\r\n  }\r\n} @else {\r\n  @if (emptyStateTemplate != null) {\r\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n  }\r\n}\r\n\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8$1.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i11.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i27.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i28.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeComponent, isStandalone: false, selector: "smz-ui-tree", inputs: { state: "state", items: "items", loading: "loading", styleClass: "styleClass", inlineStyle: "inlineStyle", appendTo: "appendTo", selection: "selection", selectionKey: "selectionKey" }, outputs: { selectedNodes: "selectedNodes", selectionChange: "selectionChange", parentChange: "parentChange", reorder: "reorder", blockedDrop: "blockedDrop", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", treeExpanded: "treeExpanded", nodeDropped: "nodeDropped" }, providers: [TreeDragDropService], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dt", first: true, predicate: Tree, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (state) {\r\n  @if ((state.emptyFeedback?.isFeatured) && (treeItems != null && treeItems.length === 0)) {\r\n    <smz-data-info\r\n      [image]=\"state.emptyFeedback.image\"\r\n      [message]=\"state.emptyFeedback.message\"\r\n      [callbackInfo]=\"state.emptyFeedback.extraInfo\"\r\n      [callbackLabel]=\"state.emptyFeedback.actionButton?.label\"\r\n      (clicked)=\"state.emptyFeedback.actionButton?.callback($event)\">\r\n      <ng-template pTemplate=\"actions\">\r\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\r\n      </ng-template>\r\n    </smz-data-info>\r\n  } @else {\r\n    @if (treeItems != null) {\r\n      <p-contextMenu #cm [model]=\"menuItems\" [appendTo]=\"appendTo\" [styleClass]=\"menuItems == null || menuItems?.length === 0 ? 'invisible-important' : ''\"></p-contextMenu>\r\n      <p-menu #rowMenu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\" />\r\n      <p-tree #dt [value]=\"treeItems\"\r\n        scrollHeight=\"flex\"\r\n        [contextMenu]=\"state.menu.behavior === 'context-menu' ? cm : null\"\r\n        [selectionMode]=\"state.selection.mode\"\r\n        [(selection)]=\"primeSelection\"\r\n        layout=\"vertical\"\r\n        [style]=\"inlineStyle\"\r\n        [styleClass]=\"styleClass\"\r\n        [propagateSelectionUp]=\"state.selection.propagateUp\"\r\n        [propagateSelectionDown]=\"state.selection.propagateDown\"\r\n        [loading]=\"state.loading.isLoading\"\r\n        [loadingIcon]=\"state.loading.icon\"\r\n        [filter]=\"false\"\r\n        [filterMode]=\"state.filter.mode\"\r\n        [filterPlaceholder]=\"state.filter.textPlaceholder\"\r\n        [draggableNodes]=\"state.dragAndDrop.draggable\"\r\n        [droppableNodes]=\"state.dragAndDrop.droppable\"\r\n        [validateDrop]=\"state.dragAndDrop.validateDrop\"\r\n        (onNodeContextMenuSelect)=\"onContextMenuOpen($event)\"\r\n        (onNodeSelect)=\"onSelected($event)\"\r\n        (onNodeUnselect)=\"onUnselected($event)\"\r\n        (onNodeExpand)=\"onExpanded($event)\"\r\n        (onNodeCollapse)=\"onCollapsed($event)\"\r\n        (onNodeDrop)=\"onDropped($event)\"\r\n        (onFilter)=\"onFiltered($event)\">\r\n        @if (state.header.isVisible) {\r\n          <ng-template pTemplate=\"header\">\r\n            @if (state.header.toolbar; as toolbar) {\r\n              @if (headerTemplate != null) {\r\n                <div class=\"grid grid-nogutter items-center w-full justify-start\">\r\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n              }\r\n              <div class=\"grid grid-nogutter justify-start items-center mb-2 gap-2\">\r\n                @if (state.header.title != null) {\r\n                  <h3 class=\"m-2 col\">{{state.header.title}}</h3>\r\n                }\r\n                <div class=\"grid grid-nogutter justify-start items-center gap-2\">\r\n                  @for (button of state.header.toolbar.items; track button; let i = $index) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': button.color === 'secondary', 'p-button-success': button.color === 'success', 'p-button-info': button.color === 'info', 'p-button-warning': button.color === 'warning', 'p-button-help': button.color === 'help', 'p-button-danger': button.color === 'danger' }\"\r\n                      [label]=\"button.label\"\r\n                      [icon]=\"button.icon\"\r\n                      (click)=\"onToolbarButtonClick($event, button, treeItems)\"\r\n                      [pTooltip]=\"button.tooltip\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.nodeExpandButtons.expandLabel\"\r\n                      icon=\"fa-solid fa-angle-down\"\r\n                      (click)=\"expandNode()\"\r\n                      [pTooltip]=\"selection != null ? toolbar.nodeExpandButtons.expandTooltip : toolbar.nodeExpandButtons.disabledTooltip\"\r\n                      [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.nodeExpandButtons.collapseLabel\"\r\n                      icon=\"fa-solid fa-angle-up\"\r\n                      (click)=\"collapseNode()\"\r\n                      [pTooltip]=\"selection != null ? toolbar.nodeExpandButtons.collapseTooltip : toolbar.nodeExpandButtons.disabledTooltip\"\r\n                      [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.treeExpandButtons.expandLabel\"\r\n                      icon=\"fa-solid fa-angles-down\"\r\n                      (click)=\"expandAll()\"\r\n                      [pTooltip]=\"\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button\r\n                      pButton\r\n                      pRipple\r\n                      type=\"button\"\r\n                      [ngClass]=\"{ 'p-button-text': toolbar.buttonType.endsWith('borderless'), 'p-button-outlined': toolbar.buttonType.endsWith('outlined'), 'p-button-rounded': toolbar.buttonType.startsWith('rounded'), 'p-button-secondary': true }\"\r\n                      [label]=\"toolbar.treeExpandButtons.collapseLabel\"\r\n                      icon=\"fa-solid fa-angles-up\"\r\n                      (click)=\"collapseAll()\"\r\n                      [pTooltip]=\"\">\r\n                    </button>\r\n                  }\r\n                  @if (actionsTemplate != null) {\r\n                    <div class=\"grid grid-nogutter items-center justify-start\">\r\n                      <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: dt }\"></ng-container>\r\n                    </div>\r\n                  }\r\n                </div>\r\n                @if (state.filter.show) {\r\n                  <p-iconfield class=\"col-12\" [ngClass]=\"state.filter.styleClass\">\r\n                    <p-inputicon styleClass=\"pi pi-search\" />\r\n                    <input #inputGlobal pInputText type=\"text\" (input)=\"dt._filter(inputGlobal.value)\" [placeholder]=\"state.filter.textPlaceholder\" />\r\n                  </p-iconfield>\r\n                }\r\n              </div>\r\n              @if (toolbarTemplate != null) {\r\n                <div class=\"grid grid-nogutter items-center mt-2\"\r\n                  [ngClass]=\"'justify-' + state.header.toolbar.alignment\">\r\n                  <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\r\n                </div>\r\n              }\r\n            }\r\n          </ng-template>\r\n        }\r\n        @if (state.footer.isVisible) {\r\n          <ng-template pTemplate=\"footer\">\r\n            <div class=\"grid grid-nogutter justify-start items-center\">\r\n              <span class=\"col mr-2\">FOOTER</span>\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        @for (content of contentTemplates; track content) {\r\n          <ng-template let-node [pTemplate]=\"content.type\">\r\n            <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n              @if (content.template != null) {\r\n                <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\r\n              } @else {\r\n                <div>{{ node.label }}</div>\r\n              }\r\n              @if (state.menu.behavior === 'row-menu') {\r\n                <p-button clickStopPropagation (onClick)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"/>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-template let-node pTemplate=\"Check\">\r\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n            <div>{{ node.label }}</div>\r\n            @if (state.menu.behavior === 'row-menu') {\r\n              <p-button clickStopPropagation (onClick)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"/>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"empty\">\r\n          @if (!state.emptyFeedback.isFeatured) {\r\n            <div>{{ state.emptyFeedback.message }}</div>\r\n          }\r\n        </ng-template>\r\n      </p-tree>\r\n    }\r\n  }\r\n} @else {\r\n  @if (emptyStateTemplate != null) {\r\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\r\n  }\r\n}\r\n\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8$1.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i11$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i27.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i28.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeComponent, decorators: [{
             type: Component,
@@ -46549,7 +46068,6 @@ class NgxSmzCommentsModule {
             ButtonModule,
             FormsModule,
             RbkPipesModule,
-            OverlayPanelModule,
             NgxSmzFormsModule,
             TreeModule,
             NgxSmzDataPipesModule,
@@ -46559,7 +46077,6 @@ class NgxSmzCommentsModule {
             ButtonModule,
             FormsModule,
             RbkPipesModule,
-            OverlayPanelModule,
             NgxSmzFormsModule,
             TreeModule,
             NgxSmzDataPipesModule,
@@ -46574,7 +46091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         ButtonModule,
                         FormsModule,
                         RbkPipesModule,
-                        OverlayPanelModule,
                         NgxSmzFormsModule,
                         TreeModule,
                         NgxSmzDataPipesModule,
@@ -47450,7 +46966,7 @@ class SmzToastComponent {
       </div>
     </ng-template>
 </p-toast>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1$b.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: ProgressBarModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: ProgressBarModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzToastComponent, decorators: [{
             type: Component,
@@ -49364,14 +48880,14 @@ class SmzSvgComponent {
         this.state.dispatch.setScopes.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSvgComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: SmzSvgComponent, isStandalone: false, selector: "smz-svg", inputs: { state: "state" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"smz-svg-container\" [ngClass]=\"state?.containerClass\">\r\n  <div id=\"smz-svg-map\" [ngClass]=\"{ 'border-2 border-red-800 border-solid': state?.isDebug }\"></div>\r\n</div>\r\n\r\n<p-overlayPanel #op appendTo=\"body\">\r\n  <ng-template pTemplate>\r\n    <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n      <i class=\"fa-solid fa-map-pin text-blue-200 text-2xl\"></i>\r\n      <div>{{ tooltipContent }}</div>\r\n    </div>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "mousePosition", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i1$7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: SmzSvgComponent, isStandalone: false, selector: "smz-svg", inputs: { state: "state" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: Popover, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"smz-svg-container\" [ngClass]=\"state?.containerClass\">\r\n  <div id=\"smz-svg-map\" [ngClass]=\"{ 'border-2 border-red-800 border-solid': state?.isDebug }\"></div>\r\n</div>\r\n\r\n<p-popover #op appendTo=\"body\">\r\n  <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n    <i class=\"fa-solid fa-map-pin text-blue-200 text-2xl\"></i>\r\n    <div>{{ tooltipContent }}</div>\r\n  </div>\r\n</p-popover>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSvgComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-svg', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "<div id=\"smz-svg-container\" [ngClass]=\"state?.containerClass\">\r\n  <div id=\"smz-svg-map\" [ngClass]=\"{ 'border-2 border-red-800 border-solid': state?.isDebug }\"></div>\r\n</div>\r\n\r\n<p-overlayPanel #op appendTo=\"body\">\r\n  <ng-template pTemplate>\r\n    <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n      <i class=\"fa-solid fa-map-pin text-blue-200 text-2xl\"></i>\r\n      <div>{{ tooltipContent }}</div>\r\n    </div>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n" }]
+            args: [{ selector: 'smz-svg', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "<div id=\"smz-svg-container\" [ngClass]=\"state?.containerClass\">\r\n  <div id=\"smz-svg-map\" [ngClass]=\"{ 'border-2 border-red-800 border-solid': state?.isDebug }\"></div>\r\n</div>\r\n\r\n<p-popover #op appendTo=\"body\">\r\n  <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n    <i class=\"fa-solid fa-map-pin text-blue-200 text-2xl\"></i>\r\n    <div>{{ tooltipContent }}</div>\r\n  </div>\r\n</p-popover>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { overlayPanel: [{
                 type: ViewChild,
-                args: [OverlayPanel]
+                args: [Popover]
             }], state: [{
                 type: Input
             }] } });
@@ -49381,11 +48897,11 @@ class SmzSvgModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SmzSvgModule, declarations: [SmzSvgComponent], imports: [CommonModule,
             FormsModule,
             RbkPipesModule,
-            OverlayPanelModule], exports: [SmzSvgComponent] });
+            PopoverModule], exports: [SmzSvgComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSvgModule, imports: [CommonModule,
             FormsModule,
             RbkPipesModule,
-            OverlayPanelModule] });
+            PopoverModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSvgModule, decorators: [{
             type: NgModule,
@@ -49394,7 +48910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         CommonModule,
                         FormsModule,
                         RbkPipesModule,
-                        OverlayPanelModule
+                        PopoverModule
                     ],
                     exports: [
                         SmzSvgComponent