@ngx-smz/core 21.9.0-next.8 → 21.10.0-next.1

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, ChangeDetectorRef, effect, DestroyRef, EventEmitter, HostListener, Output, HostBinding, Directive, ChangeDetectionStrategy, ViewEncapsulation, Optional, NgModule, ViewChild, ElementRef, Renderer2, forwardRef, Inject, LOCALE_ID, ContentChildren, Self, ErrorHandler, DEFAULT_CURRENCY_CODE, DOCUMENT, PLATFORM_ID } from '@angular/core';
+import { signal, Injectable, InjectionToken, provideAppInitializer, inject, makeEnvironmentProviders, computed, Pipe, Input, Component, ChangeDetectorRef, effect, DestroyRef, EventEmitter, HostListener, Output, HostBinding, Directive, ChangeDetectionStrategy, ViewEncapsulation, Optional, NgModule, ViewChild, ElementRef, Renderer2, forwardRef, Inject, NgZone, LOCALE_ID, ContentChildren, Self, ErrorHandler, DEFAULT_CURRENCY_CODE, DOCUMENT, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, getCurrencySymbol, getLocaleCurrencyCode, NgStyle, LocationStrategy, registerLocaleData, isPlatformBrowser as isPlatformBrowser$1, formatDate } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -2490,9 +2490,7 @@ class SmzFormsManagerService {
         // USING BUILT-IN PRESET
         return {
             extraSmall: {
-                row: 'col-12',
-                horizontalAlignment: 'justify-start',
-                verticalAlignment: 'items-start'
+                row: 12
             }
         };
     }
@@ -2816,11 +2814,11 @@ class CalendarComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: CalendarComponent, isStandalone: false, selector: "smz-calendar", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<div class=\"input_inner__wrapper flex flex-col flex-auto p-0 gap-1\">\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    <ui-date-picker class=\"w-full smz__input_value\" styleClass=\"w-full\" appendTo=\"body\" [dateFormat]=\"input.dateFormat != null ? input.dateFormat : 'dd/mm/yy'\" [touchUI]=\"input.touchUI != null ? input.touchUI : false\" [focusTrap]=\"input.focusTrap != null ? input.focusTrap : true\" [keepInvalid]=\"input.keepInvalid != null? input.keepInvalid : false\" [showButtonBar]=\"input.showButtonBar != null ? input.showButtonBar : false\" [showOnFocus]=\"input.showOnFocus != null ? input.showOnFocus : true\" [showIcon]=\"input.showIcon != null ? input.showIcon : false\" [timeOnly]=\"input.timeOnly\" [showTime]=\"input.showTime\" [id]=\"input.propertyName\" [formControl]=\"control\">\r\n    </ui-date-picker>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "component", type: i2.SmzDatePickerComponent, selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: CalendarComponent, isStandalone: false, selector: "smz-calendar", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<div class=\"input_inner__wrapper flex flex-col flex-auto p-0 gap-1\">\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    <ui-date-picker class=\"w-full smz__input_value\" styleClass=\"w-full\" appendTo=\"body\" [dateFormat]=\"input.dateFormat != null ? input.dateFormat : 'dd/mm/yy'\" [touchUI]=\"input.touchUI != null ? input.touchUI : false\" [focusTrap]=\"input.focusTrap != null ? input.focusTrap : true\" [keepInvalid]=\"input.keepInvalid != null? input.keepInvalid : false\" [showButtonBar]=\"input.showButtonBar != null ? input.showButtonBar : false\" [showOnFocus]=\"input.showOnFocus != null ? input.showOnFocus : true\" [showIcon]=\"input.showIcon != null ? input.showIcon : false\" [timeOnly]=\"input.timeOnly\" [showTime]=\"input.showTime\" [inputId]=\"input.propertyName\" [formControl]=\"control\">\n    </ui-date-picker>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>", dependencies: [{ kind: "component", type: i2.SmzDatePickerComponent, selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-calendar', standalone: false, template: "<div class=\"input_inner__wrapper flex flex-col flex-auto p-0 gap-1\">\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    <ui-date-picker class=\"w-full smz__input_value\" styleClass=\"w-full\" appendTo=\"body\" [dateFormat]=\"input.dateFormat != null ? input.dateFormat : 'dd/mm/yy'\" [touchUI]=\"input.touchUI != null ? input.touchUI : false\" [focusTrap]=\"input.focusTrap != null ? input.focusTrap : true\" [keepInvalid]=\"input.keepInvalid != null? input.keepInvalid : false\" [showButtonBar]=\"input.showButtonBar != null ? input.showButtonBar : false\" [showOnFocus]=\"input.showOnFocus != null ? input.showOnFocus : true\" [showIcon]=\"input.showIcon != null ? input.showIcon : false\" [timeOnly]=\"input.timeOnly\" [showTime]=\"input.showTime\" [id]=\"input.propertyName\" [formControl]=\"control\">\r\n    </ui-date-picker>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>" }]
+            args: [{ selector: 'smz-calendar', standalone: false, template: "<div class=\"input_inner__wrapper flex flex-col flex-auto p-0 gap-1\">\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    <ui-date-picker class=\"w-full smz__input_value\" styleClass=\"w-full\" appendTo=\"body\" [dateFormat]=\"input.dateFormat != null ? input.dateFormat : 'dd/mm/yy'\" [touchUI]=\"input.touchUI != null ? input.touchUI : false\" [focusTrap]=\"input.focusTrap != null ? input.focusTrap : true\" [keepInvalid]=\"input.keepInvalid != null? input.keepInvalid : false\" [showButtonBar]=\"input.showButtonBar != null ? input.showButtonBar : false\" [showOnFocus]=\"input.showOnFocus != null ? input.showOnFocus : true\" [showIcon]=\"input.showIcon != null ? input.showIcon : false\" [timeOnly]=\"input.timeOnly\" [showTime]=\"input.showTime\" [inputId]=\"input.propertyName\" [formControl]=\"control\">\n    </ui-date-picker>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>" }]
         }], propDecorators: { input: [{
                 type: Input
             }], control: [{
@@ -4085,7 +4083,7 @@ class InputListComponent {
         return form;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.Store }, { token: i1$3.Actions }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputListComponent, isStandalone: false, selector: "smz-input-list", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<smz-label\n  class=\"smz__input_name\"\n  [text]=\"input.name\"\n  [propertyName]=\"input.propertyName\"\n  [showLabel]=\"input.hideName == false && input.hideLabel != true\"\n  [warning]=\"input.warning?.()\"\n  [help]=\"input.tooltip?.()\"\n    [popover]=\"input.popover?.()\">\n</smz-label>\n\n<div class=\"input_inner__wrapper\">\n  <ui-listbox [options]=\"input.listBoxOptions\" [metaKeySelection]=\"false\" [checkbox]=\"false\" [filter]=\"input.showFilter\" optionLabel=\"name\" dataKey=\"id\" [listStyle]=\"{'height': input.height ? input.height : '200px'}\" [style]=\"{'width':'100%'}\" [styleClass]=\"input.styleClass\" [disabled]=\"input.isDisabled\" (clicked)=\"onClick($event)\" [readonly]=\"isInlineEditingEnabled\" [emptyMessage]=\"input.emptyMessage\" [(ngModel)]=\"current\">\n\n    <ng-template smzTemplate=\"header\">\n      <div class=\"smz__list-header\">\n        @if (input.showAddButton && !input.allowBatchCreation) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAdd()\" [disabled]=\"input.limitCount != null && input.listBoxOptions?.length >= input.limitCount\" smzTooltip=\"Adicionar novo item\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n        @if (input.showAddButton && input.allowBatchCreation) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAddInBatch()\" smzTooltip=\"Adicionar novos itens\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n        @if (input.showSortButton) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-arrow-down-a-z\" clickStopPropagation class=\"p-nocustom\" (click)=\"onSort()\" smzTooltip=\"Reordenar\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n        @if (input.showClearButton) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" clickStopPropagation class=\"p-nocustom\" (click)=\"onClear()\" smzTooltip=\"Limpar a lista\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item smzTemplate=\"item\">\n      <div class=\"grid grid-nogutter items-center w-full justify-between\">\n        @if (!isInlineEditingEnabled || (isInlineEditingEnabled && current !== item)) {\n          @if (input.crud?.inputType === 'float') {\n            <div class=\"smz__list_item-title\">{{ item.name | number : input.crud.digitsInfo : input.crud.labelLocale }}</div>\n          } @else {\n            <div class=\"smz__list_item-title\">{{ item.name }}</div>\n          }\n        }\n\n        @if (isInlineEditingEnabled && current === item) {\n          @if (editForm != null) {\n            <div class=\"col grid grid-nogutter items-center justify-center flex-gap-2 py-3 px-0\" clickStopPropagation>\n              <form #form [formGroup]=\"editForm\" class=\"col relative\">\n                <input type=\"text\" clickStopPropagation smzInputText formControlName=\"value\"/>\n                @if (editForm.get('value'); as valueInput) {\n                  @if (valueInput.touched && valueInput.hasError('required')) {\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">Campo Obrigat\u00F3rio.</div>\n                  }\n                  @if (valueInput.touched && valueInput.hasError('unique')) {\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">J\u00E1 existe um item com esse nome.</div>\n                  }\n                }\n              </form>\n              <button smzButton type=\"button\" icon=\"fa-solid fa-check\" clickStopPropagation [disabled]=\"!editForm.valid\" class=\"p-nocustom inline_action_button\" (click)=\"onConfirmInlineEditing(item)\" [rounded]=\"true\" severity=\"success\" variant=\"text\"></button>\n              <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" clickStopPropagation class=\"p-nocustom inline_action_button\" (click)=\"cancelEdit()\" [rounded]=\"true\" severity=\"danger\" variant=\"text\"></button>\n            </div>\n          }\n        }\n\n        @if (current === item && !isInlineEditingEnabled) {\n          <div class=\"smz__list_item-actions\" clickStopPropagation>\n            @if (input.showEditButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-pencil\" class=\"p-nocustom\" (click)=\"onEdit(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n            @if (input.showRemoveButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-trash\" class=\"p-nocustom\" (click)=\"input.askBeforeRemoveItem ? askBeforeRemove(item) : remove(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n            @if (input.showMoveButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-up\" class=\"p-nocustom\" (click)=\"moveUp(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n            @if (input.showMoveButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-down\" class=\"p-nocustom\" (click)=\"moveDown(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n          </div>\n        }\n\n      </div>\n    </ng-template>\n\n    <ng-template smzTemplate=\"footer\">\n      @if (input.listBoxOptions.length === 0 && input.validatorsPreset?.isRequired) {\n        <span class=\"col-12 smz__footer-message\">*Campo obrigat\u00F3rio</span>\n      }\n      @if (input.limitCount != null && input.listBoxOptions?.length === input.limitCount) {\n        <span class=\"col-12 smz__footer-message text-blue-300\">*Limite atingido.</span>\n      }\n      @if (input.limitCount != null && input.listBoxOptions?.length > input.limitCount) {\n        <span class=\"col-12 smz__footer-message\">*Limite ultrapassado</span>\n      }\n    </ng-template>\n  </ui-listbox>\n</div>", dependencies: [{ kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzListboxComponent, selector: "ui-listbox", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "checkbox", "filter", "filterBy", "filterMatchMode", "metaKeySelection", "readonly", "emptyMessage", "emptyFilterMessage", "listStyle", "style", "styleClass"], outputs: ["changed", "clicked"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: LabelComponent, selector: "smz-label", inputs: ["text", "propertyName", "showLabel", "warning", "help", "popover"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputListComponent, isStandalone: false, selector: "smz-input-list", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<smz-label\r\n  class=\"smz__input_name\"\r\n  [text]=\"input.name\"\r\n  [propertyName]=\"input.propertyName\"\r\n  [showLabel]=\"input.hideName == false && input.hideLabel != true\"\r\n  [warning]=\"input.warning?.()\"\r\n  [help]=\"input.tooltip?.()\"\r\n    [popover]=\"input.popover?.()\">\r\n</smz-label>\r\n\r\n<div class=\"input_inner__wrapper\">\r\n  <ui-listbox [options]=\"input.listBoxOptions\" [metaKeySelection]=\"false\" [checkbox]=\"false\" [filter]=\"input.showFilter\" optionLabel=\"name\" dataKey=\"id\" [listStyle]=\"{'height': input.height ? input.height : '200px'}\" [style]=\"{'width':'100%'}\" [styleClass]=\"input.styleClass\" [disabled]=\"input.isDisabled\" (clicked)=\"onClick($event)\" [readonly]=\"isInlineEditingEnabled\" [emptyMessage]=\"input.emptyMessage\" [(ngModel)]=\"current\">\r\n\r\n    <ng-template smzTemplate=\"header\">\r\n      <div class=\"smz__list-header\">\r\n        @if (input.showAddButton && !input.allowBatchCreation) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAdd()\" [disabled]=\"input.limitCount != null && input.listBoxOptions?.length >= input.limitCount\" smzTooltip=\"Adicionar novo item\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n        @if (input.showAddButton && input.allowBatchCreation) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAddInBatch()\" smzTooltip=\"Adicionar novos itens\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n        @if (input.showSortButton) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-arrow-down-a-z\" clickStopPropagation class=\"p-nocustom\" (click)=\"onSort()\" smzTooltip=\"Reordenar\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n        @if (input.showClearButton) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" clickStopPropagation class=\"p-nocustom\" (click)=\"onClear()\" smzTooltip=\"Limpar a lista\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template let-item smzTemplate=\"item\">\r\n      <div class=\"grid grid-nogutter items-center w-full justify-between\">\r\n        @if (!isInlineEditingEnabled || (isInlineEditingEnabled && current !== item)) {\r\n          @if (input.crud?.inputType === 'float') {\r\n            <div class=\"smz__list_item-title\">{{ item.name | number : input.crud.digitsInfo : input.crud.labelLocale }}</div>\r\n          } @else {\r\n            <div class=\"smz__list_item-title\">{{ item.name }}</div>\r\n          }\r\n        }\r\n\r\n        @if (isInlineEditingEnabled && current === item) {\r\n          @if (editForm != null) {\r\n            <div class=\"col grid grid-nogutter items-center justify-center flex-gap-2 py-3 px-0\" clickStopPropagation>\r\n              <form #form [formGroup]=\"editForm\" class=\"col relative\">\r\n                <input type=\"text\" clickStopPropagation smzInputText formControlName=\"value\"/>\r\n                @if (editForm.get('value'); as valueInput) {\r\n                  @if (valueInput.touched && valueInput.hasError('required')) {\r\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">Campo Obrigat\u00F3rio.</div>\r\n                  }\r\n                  @if (valueInput.touched && valueInput.hasError('unique')) {\r\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">J\u00E1 existe um item com esse nome.</div>\r\n                  }\r\n                }\r\n              </form>\r\n              <button smzButton type=\"button\" icon=\"fa-solid fa-check\" clickStopPropagation [disabled]=\"!editForm.valid\" class=\"p-nocustom inline_action_button\" (click)=\"onConfirmInlineEditing(item)\" [rounded]=\"true\" severity=\"success\" variant=\"text\"></button>\r\n              <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" clickStopPropagation class=\"p-nocustom inline_action_button\" (click)=\"cancelEdit()\" [rounded]=\"true\" severity=\"danger\" variant=\"text\"></button>\r\n            </div>\r\n          }\r\n        }\r\n\r\n        @if (current === item && !isInlineEditingEnabled) {\r\n          <div class=\"smz__list_item-actions\" clickStopPropagation>\r\n            @if (input.showEditButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-pencil\" class=\"p-nocustom\" (click)=\"onEdit(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n            @if (input.showRemoveButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-trash\" class=\"p-nocustom\" (click)=\"input.askBeforeRemoveItem ? askBeforeRemove(item) : remove(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n            @if (input.showMoveButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-up\" class=\"p-nocustom\" (click)=\"moveUp(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n            @if (input.showMoveButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-down\" class=\"p-nocustom\" (click)=\"moveDown(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template smzTemplate=\"footer\">\r\n      @if (input.listBoxOptions.length === 0 && input.validatorsPreset?.isRequired) {\r\n        <span class=\"col-12 smz__footer-message\">*Campo obrigat\u00F3rio</span>\r\n      }\r\n      @if (input.limitCount != null && input.listBoxOptions?.length === input.limitCount) {\r\n        <span class=\"col-12 smz__footer-message text-blue-300\">*Limite atingido.</span>\r\n      }\r\n      @if (input.limitCount != null && input.listBoxOptions?.length > input.limitCount) {\r\n        <span class=\"col-12 smz__footer-message\">*Limite ultrapassado</span>\r\n      }\r\n    </ng-template>\r\n  </ui-listbox>\r\n</div>", dependencies: [{ kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzListboxComponent, selector: "ui-listbox", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "checkbox", "filter", "filterBy", "filterMatchMode", "metaKeySelection", "readonly", "emptyMessage", "emptyFilterMessage", "listStyle", "style", "styleClass"], outputs: ["changed", "clicked"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: LabelComponent, selector: "smz-label", inputs: ["text", "propertyName", "showLabel", "warning", "help", "popover"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     Confirmable('Deseja realmente excluir esse item ?', 'Exclusão')
@@ -4095,7 +4093,7 @@ __decorate([
 ], InputListComponent.prototype, "onClear", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-input-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<smz-label\n  class=\"smz__input_name\"\n  [text]=\"input.name\"\n  [propertyName]=\"input.propertyName\"\n  [showLabel]=\"input.hideName == false && input.hideLabel != true\"\n  [warning]=\"input.warning?.()\"\n  [help]=\"input.tooltip?.()\"\n    [popover]=\"input.popover?.()\">\n</smz-label>\n\n<div class=\"input_inner__wrapper\">\n  <ui-listbox [options]=\"input.listBoxOptions\" [metaKeySelection]=\"false\" [checkbox]=\"false\" [filter]=\"input.showFilter\" optionLabel=\"name\" dataKey=\"id\" [listStyle]=\"{'height': input.height ? input.height : '200px'}\" [style]=\"{'width':'100%'}\" [styleClass]=\"input.styleClass\" [disabled]=\"input.isDisabled\" (clicked)=\"onClick($event)\" [readonly]=\"isInlineEditingEnabled\" [emptyMessage]=\"input.emptyMessage\" [(ngModel)]=\"current\">\n\n    <ng-template smzTemplate=\"header\">\n      <div class=\"smz__list-header\">\n        @if (input.showAddButton && !input.allowBatchCreation) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAdd()\" [disabled]=\"input.limitCount != null && input.listBoxOptions?.length >= input.limitCount\" smzTooltip=\"Adicionar novo item\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n        @if (input.showAddButton && input.allowBatchCreation) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAddInBatch()\" smzTooltip=\"Adicionar novos itens\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n        @if (input.showSortButton) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-arrow-down-a-z\" clickStopPropagation class=\"p-nocustom\" (click)=\"onSort()\" smzTooltip=\"Reordenar\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n        @if (input.showClearButton) {\n          <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" clickStopPropagation class=\"p-nocustom\" (click)=\"onClear()\" smzTooltip=\"Limpar a lista\" [rounded]=\"true\" variant=\"text\"></button>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item smzTemplate=\"item\">\n      <div class=\"grid grid-nogutter items-center w-full justify-between\">\n        @if (!isInlineEditingEnabled || (isInlineEditingEnabled && current !== item)) {\n          @if (input.crud?.inputType === 'float') {\n            <div class=\"smz__list_item-title\">{{ item.name | number : input.crud.digitsInfo : input.crud.labelLocale }}</div>\n          } @else {\n            <div class=\"smz__list_item-title\">{{ item.name }}</div>\n          }\n        }\n\n        @if (isInlineEditingEnabled && current === item) {\n          @if (editForm != null) {\n            <div class=\"col grid grid-nogutter items-center justify-center flex-gap-2 py-3 px-0\" clickStopPropagation>\n              <form #form [formGroup]=\"editForm\" class=\"col relative\">\n                <input type=\"text\" clickStopPropagation smzInputText formControlName=\"value\"/>\n                @if (editForm.get('value'); as valueInput) {\n                  @if (valueInput.touched && valueInput.hasError('required')) {\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">Campo Obrigat\u00F3rio.</div>\n                  }\n                  @if (valueInput.touched && valueInput.hasError('unique')) {\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">J\u00E1 existe um item com esse nome.</div>\n                  }\n                }\n              </form>\n              <button smzButton type=\"button\" icon=\"fa-solid fa-check\" clickStopPropagation [disabled]=\"!editForm.valid\" class=\"p-nocustom inline_action_button\" (click)=\"onConfirmInlineEditing(item)\" [rounded]=\"true\" severity=\"success\" variant=\"text\"></button>\n              <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" clickStopPropagation class=\"p-nocustom inline_action_button\" (click)=\"cancelEdit()\" [rounded]=\"true\" severity=\"danger\" variant=\"text\"></button>\n            </div>\n          }\n        }\n\n        @if (current === item && !isInlineEditingEnabled) {\n          <div class=\"smz__list_item-actions\" clickStopPropagation>\n            @if (input.showEditButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-pencil\" class=\"p-nocustom\" (click)=\"onEdit(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n            @if (input.showRemoveButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-trash\" class=\"p-nocustom\" (click)=\"input.askBeforeRemoveItem ? askBeforeRemove(item) : remove(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n            @if (input.showMoveButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-up\" class=\"p-nocustom\" (click)=\"moveUp(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n            @if (input.showMoveButton) {\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-down\" class=\"p-nocustom\" (click)=\"moveDown(item)\" [rounded]=\"true\" variant=\"text\"></button>\n            }\n          </div>\n        }\n\n      </div>\n    </ng-template>\n\n    <ng-template smzTemplate=\"footer\">\n      @if (input.listBoxOptions.length === 0 && input.validatorsPreset?.isRequired) {\n        <span class=\"col-12 smz__footer-message\">*Campo obrigat\u00F3rio</span>\n      }\n      @if (input.limitCount != null && input.listBoxOptions?.length === input.limitCount) {\n        <span class=\"col-12 smz__footer-message text-blue-300\">*Limite atingido.</span>\n      }\n      @if (input.limitCount != null && input.listBoxOptions?.length > input.limitCount) {\n        <span class=\"col-12 smz__footer-message\">*Limite ultrapassado</span>\n      }\n    </ng-template>\n  </ui-listbox>\n</div>" }]
+            args: [{ selector: 'smz-input-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<smz-label\r\n  class=\"smz__input_name\"\r\n  [text]=\"input.name\"\r\n  [propertyName]=\"input.propertyName\"\r\n  [showLabel]=\"input.hideName == false && input.hideLabel != true\"\r\n  [warning]=\"input.warning?.()\"\r\n  [help]=\"input.tooltip?.()\"\r\n    [popover]=\"input.popover?.()\">\r\n</smz-label>\r\n\r\n<div class=\"input_inner__wrapper\">\r\n  <ui-listbox [options]=\"input.listBoxOptions\" [metaKeySelection]=\"false\" [checkbox]=\"false\" [filter]=\"input.showFilter\" optionLabel=\"name\" dataKey=\"id\" [listStyle]=\"{'height': input.height ? input.height : '200px'}\" [style]=\"{'width':'100%'}\" [styleClass]=\"input.styleClass\" [disabled]=\"input.isDisabled\" (clicked)=\"onClick($event)\" [readonly]=\"isInlineEditingEnabled\" [emptyMessage]=\"input.emptyMessage\" [(ngModel)]=\"current\">\r\n\r\n    <ng-template smzTemplate=\"header\">\r\n      <div class=\"smz__list-header\">\r\n        @if (input.showAddButton && !input.allowBatchCreation) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAdd()\" [disabled]=\"input.limitCount != null && input.listBoxOptions?.length >= input.limitCount\" smzTooltip=\"Adicionar novo item\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n        @if (input.showAddButton && input.allowBatchCreation) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-plus\" clickStopPropagation class=\"p-nocustom\" (click)=\"onAddInBatch()\" smzTooltip=\"Adicionar novos itens\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n        @if (input.showSortButton) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-arrow-down-a-z\" clickStopPropagation class=\"p-nocustom\" (click)=\"onSort()\" smzTooltip=\"Reordenar\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n        @if (input.showClearButton) {\r\n          <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" clickStopPropagation class=\"p-nocustom\" (click)=\"onClear()\" smzTooltip=\"Limpar a lista\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template let-item smzTemplate=\"item\">\r\n      <div class=\"grid grid-nogutter items-center w-full justify-between\">\r\n        @if (!isInlineEditingEnabled || (isInlineEditingEnabled && current !== item)) {\r\n          @if (input.crud?.inputType === 'float') {\r\n            <div class=\"smz__list_item-title\">{{ item.name | number : input.crud.digitsInfo : input.crud.labelLocale }}</div>\r\n          } @else {\r\n            <div class=\"smz__list_item-title\">{{ item.name }}</div>\r\n          }\r\n        }\r\n\r\n        @if (isInlineEditingEnabled && current === item) {\r\n          @if (editForm != null) {\r\n            <div class=\"col grid grid-nogutter items-center justify-center flex-gap-2 py-3 px-0\" clickStopPropagation>\r\n              <form #form [formGroup]=\"editForm\" class=\"col relative\">\r\n                <input type=\"text\" clickStopPropagation smzInputText formControlName=\"value\"/>\r\n                @if (editForm.get('value'); as valueInput) {\r\n                  @if (valueInput.touched && valueInput.hasError('required')) {\r\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">Campo Obrigat\u00F3rio.</div>\r\n                  }\r\n                  @if (valueInput.touched && valueInput.hasError('unique')) {\r\n                    <div class=\"text-xs text-red-500 absolute right-3 my-1\">J\u00E1 existe um item com esse nome.</div>\r\n                  }\r\n                }\r\n              </form>\r\n              <button smzButton type=\"button\" icon=\"fa-solid fa-check\" clickStopPropagation [disabled]=\"!editForm.valid\" class=\"p-nocustom inline_action_button\" (click)=\"onConfirmInlineEditing(item)\" [rounded]=\"true\" severity=\"success\" variant=\"text\"></button>\r\n              <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" clickStopPropagation class=\"p-nocustom inline_action_button\" (click)=\"cancelEdit()\" [rounded]=\"true\" severity=\"danger\" variant=\"text\"></button>\r\n            </div>\r\n          }\r\n        }\r\n\r\n        @if (current === item && !isInlineEditingEnabled) {\r\n          <div class=\"smz__list_item-actions\" clickStopPropagation>\r\n            @if (input.showEditButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-pencil\" class=\"p-nocustom\" (click)=\"onEdit(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n            @if (input.showRemoveButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-trash\" class=\"p-nocustom\" (click)=\"input.askBeforeRemoveItem ? askBeforeRemove(item) : remove(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n            @if (input.showMoveButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-up\" class=\"p-nocustom\" (click)=\"moveUp(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n            @if (input.showMoveButton) {\r\n              <button clickStopPropagation smzButton type=\"button\" icon=\"fa-solid fa-arrow-down\" class=\"p-nocustom\" (click)=\"moveDown(item)\" [rounded]=\"true\" variant=\"text\"></button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template smzTemplate=\"footer\">\r\n      @if (input.listBoxOptions.length === 0 && input.validatorsPreset?.isRequired) {\r\n        <span class=\"col-12 smz__footer-message\">*Campo obrigat\u00F3rio</span>\r\n      }\r\n      @if (input.limitCount != null && input.listBoxOptions?.length === input.limitCount) {\r\n        <span class=\"col-12 smz__footer-message text-blue-300\">*Limite atingido.</span>\r\n      }\r\n      @if (input.limitCount != null && input.listBoxOptions?.length > input.limitCount) {\r\n        <span class=\"col-12 smz__footer-message\">*Limite ultrapassado</span>\r\n      }\r\n    </ng-template>\r\n  </ui-listbox>\r\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.Store }, { type: i1$3.Actions }, { type: i1$1.UntypedFormBuilder }], propDecorators: { input: [{
                 type: Input
             }], control: [{
@@ -4115,11 +4113,11 @@ class InputMaskComponent {
     control;
     behaviors;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: InputMaskComponent, isStandalone: false, selector: "smz-input-mask", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<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\r\n<div class=\"input_inner__wrapper\">\r\n    <ui-input-mask class=\"smz__input_value flex-1\" [mask]=\"input.mask\" [characterPattern]=\"input.characterPattern\" [unmask]=\"input.unmask\" [id]=\"input.propertyName\" type=\"text\" [formControl]=\"control\">\r\n    </ui-input-mask>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2.SmzInputMaskComponent, selector: "ui-input-mask", inputs: ["mask", "slotChar", "characterPattern", "unmask", "autoClear", "placeholder", "readonly", "inputId", "type"], outputs: ["inputed", "blurred", "completed"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: InputMaskComponent, isStandalone: false, selector: "smz-input-mask", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<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\n<div class=\"input_inner__wrapper\">\n    <ui-input-mask class=\"smz__input_value flex-1\" [mask]=\"input.mask\" [characterPattern]=\"input.characterPattern\" [unmask]=\"input.unmask\" [inputId]=\"input.propertyName\" [name]=\"input.propertyName\" type=\"text\" [formControl]=\"control\">\n    </ui-input-mask>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2.SmzInputMaskComponent, selector: "ui-input-mask", inputs: ["mask", "slotChar", "characterPattern", "unmask", "autoClear", "placeholder", "readonly", "inputId", "name", "type"], outputs: ["inputed", "blurred", "completed"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-input-mask', encapsulation: ViewEncapsulation.None, standalone: false, template: "<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\r\n<div class=\"input_inner__wrapper\">\r\n    <ui-input-mask class=\"smz__input_value flex-1\" [mask]=\"input.mask\" [characterPattern]=\"input.characterPattern\" [unmask]=\"input.unmask\" [id]=\"input.propertyName\" type=\"text\" [formControl]=\"control\">\r\n    </ui-input-mask>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>" }]
+            args: [{ selector: 'smz-input-mask', encapsulation: ViewEncapsulation.None, standalone: false, template: "<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\n<div class=\"input_inner__wrapper\">\n    <ui-input-mask class=\"smz__input_value flex-1\" [mask]=\"input.mask\" [characterPattern]=\"input.characterPattern\" [unmask]=\"input.unmask\" [inputId]=\"input.propertyName\" [name]=\"input.propertyName\" type=\"text\" [formControl]=\"control\">\n    </ui-input-mask>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>" }]
         }], propDecorators: { input: [{
                 type: Input
             }], control: [{
@@ -4151,11 +4149,11 @@ class InputNumberComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputNumberComponent, isStandalone: false, selector: "smz-input-number", inputs: { input: "input", control: "control", behaviors: "behaviors", form: "form" }, ngImport: i0, template: "<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\n<div class=\"input_inner__wrapper\">\n  @if (!input.useFraction) {\n    <ui-input-mask class=\"smz__input_value flex-1\" slotChar=\"\" [autoClear]=\"false\" mask=\"9?9999999999999999999999999999999\" characterPattern=\"([0-9])\" [id]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" [formControl]=\"control\" (blurred)=\"onInputMaskBlur()\" (inputed)=\"onInputMaskInput()\">\n    </ui-input-mask>\n  }\n  @if (input.useFraction) {\n    <ui-input-number class=\"smz__input_value flex-1\" [formControl]=\"control\" [locale]=\"input.locale\" [minFractionDigits]=\"input.minFractionDigits\" [maxFractionDigits]=\"input.maxFractionDigits\" [useGrouping]=\"input.useGrouping\" [id]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" (inputed)=\"onInput($event)\">\n    </ui-input-number>\n  }\n  <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2.SmzInputMaskComponent, selector: "ui-input-mask", inputs: ["mask", "slotChar", "characterPattern", "unmask", "autoClear", "placeholder", "readonly", "inputId", "type"], outputs: ["inputed", "blurred", "completed"] }, { kind: "component", type: i2.SmzInputNumberComponent, selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId"], outputs: ["inputed", "keyDown", "blurred", "focused"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.SmzAutoFocusDirective, selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputNumberComponent, isStandalone: false, selector: "smz-input-number", inputs: { input: "input", control: "control", behaviors: "behaviors", form: "form" }, ngImport: i0, template: "<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\n<div class=\"input_inner__wrapper\">\n  @if (!input.useFraction) {\n    <ui-input-mask class=\"smz__input_value flex-1\" slotChar=\"\" [autoClear]=\"false\" mask=\"9?9999999999999999999999999999999\" characterPattern=\"([0-9])\" [inputId]=\"input.propertyName\" [name]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" [formControl]=\"control\" (blurred)=\"onInputMaskBlur()\" (inputed)=\"onInputMaskInput()\">\n    </ui-input-mask>\n  }\n  @if (input.useFraction) {\n    <ui-input-number class=\"smz__input_value flex-1\" [formControl]=\"control\" [locale]=\"input.locale\" [minFractionDigits]=\"input.minFractionDigits\" [maxFractionDigits]=\"input.maxFractionDigits\" [useGrouping]=\"input.useGrouping\" [inputId]=\"input.propertyName\" [name]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" (inputed)=\"onInput($event)\">\n    </ui-input-number>\n  }\n  <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2.SmzInputMaskComponent, selector: "ui-input-mask", inputs: ["mask", "slotChar", "characterPattern", "unmask", "autoClear", "placeholder", "readonly", "inputId", "name", "type"], outputs: ["inputed", "blurred", "completed"] }, { kind: "component", type: i2.SmzInputNumberComponent, selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId", "name"], outputs: ["inputed", "keyDown", "blurred", "focused"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.SmzAutoFocusDirective, selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-input-number', standalone: false, template: "<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\n<div class=\"input_inner__wrapper\">\n  @if (!input.useFraction) {\n    <ui-input-mask class=\"smz__input_value flex-1\" slotChar=\"\" [autoClear]=\"false\" mask=\"9?9999999999999999999999999999999\" characterPattern=\"([0-9])\" [id]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" [formControl]=\"control\" (blurred)=\"onInputMaskBlur()\" (inputed)=\"onInputMaskInput()\">\n    </ui-input-mask>\n  }\n  @if (input.useFraction) {\n    <ui-input-number class=\"smz__input_value flex-1\" [formControl]=\"control\" [locale]=\"input.locale\" [minFractionDigits]=\"input.minFractionDigits\" [maxFractionDigits]=\"input.maxFractionDigits\" [useGrouping]=\"input.useGrouping\" [id]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" (inputed)=\"onInput($event)\">\n    </ui-input-number>\n  }\n  <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>" }]
+            args: [{ selector: 'smz-input-number', standalone: false, template: "<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\n<div class=\"input_inner__wrapper\">\n  @if (!input.useFraction) {\n    <ui-input-mask class=\"smz__input_value flex-1\" slotChar=\"\" [autoClear]=\"false\" mask=\"9?9999999999999999999999999999999\" characterPattern=\"([0-9])\" [inputId]=\"input.propertyName\" [name]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" [formControl]=\"control\" (blurred)=\"onInputMaskBlur()\" (inputed)=\"onInputMaskInput()\">\n    </ui-input-mask>\n  }\n  @if (input.useFraction) {\n    <ui-input-number class=\"smz__input_value flex-1\" [formControl]=\"control\" [locale]=\"input.locale\" [minFractionDigits]=\"input.minFractionDigits\" [maxFractionDigits]=\"input.maxFractionDigits\" [useGrouping]=\"input.useGrouping\" [inputId]=\"input.propertyName\" [name]=\"input.propertyName\" [smzAutoFocus]=\"input.autoFocus\" (inputed)=\"onInput($event)\">\n    </ui-input-number>\n  }\n  <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>" }]
         }], propDecorators: { input: [{
                 type: Input
             }], control: [{
@@ -4325,18 +4323,18 @@ class SmzAutocompleteSelectorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAutocompleteSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzAutocompleteSelectorComponent, isStandalone: true, selector: "smz-autocomplete-selector", inputs: { isRequired: "isRequired", allowCustomValues: "allowCustomValues", option: "option", suggestions: "suggestions" }, outputs: { selectedChange: "selectedChange", suggestionsChanged: "suggestionsChanged", finished: "finished" }, ngImport: i0, template: `
-    <div class="col-12 px-0 grid grid-nogutter items-center justify-start gap-2">
-      <ui-auto-complete class="col" styleClass="w-full" [(ngModel)]="option.selected" [suggestions]="suggestions" [dropdown]="true" [emptyMessage]="option.emptyMessage" (completeMethod)="search($event)" (cleared)="onClear()" (blurred)="handleSelection()" (selectedItem)="onSelect()" (keydown)="handleKeyDown($event)">
-
-        <ng-template smzTemplate="header">
-          @if (option.dataSourceDisplayName != null) {
-            <div class="text-blue-500 font-bold text-lg mx-5 mt-4 mb-0">{{ option.dataSourceDisplayName }}</div>
-          }
-        </ng-template>
-
-      </ui-auto-complete>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzAutocompleteSelectorComponent, isStandalone: true, selector: "smz-autocomplete-selector", inputs: { isRequired: "isRequired", allowCustomValues: "allowCustomValues", option: "option", suggestions: "suggestions" }, outputs: { selectedChange: "selectedChange", suggestionsChanged: "suggestionsChanged", finished: "finished" }, ngImport: i0, template: `
+    <div class="col-12 px-0 grid grid-nogutter items-center justify-start gap-2">
+      <ui-auto-complete class="col" styleClass="w-full" [(ngModel)]="option.selected" [suggestions]="suggestions" [dropdown]="true" [emptyMessage]="option.emptyMessage" (completeMethod)="search($event)" (cleared)="onClear()" (blurred)="handleSelection()" (selectedItem)="onSelect()" (keydown)="handleKeyDown($event)">
+
+        <ng-template smzTemplate="header">
+          @if (option.dataSourceDisplayName != null) {
+            <div class="text-blue-500 font-bold text-lg mx-5 mt-4 mb-0">{{ option.dataSourceDisplayName }}</div>
+          }
+        </ng-template>
+
+      </ui-auto-complete>
+    </div>
     `, isInline: true, dependencies: [{ kind: "component", type: SmzAutoCompleteComponent, selector: "ui-auto-complete", inputs: ["suggestions", "field", "dropdown", "emptyMessage", "minLength", "delay", "forceSelection", "showClear", "placeholder", "inputId", "styleClass", "appendTo"], outputs: ["completeMethod", "selectedItem", "cleared", "blurred", "focused"] }, { kind: "directive", type: SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAutocompleteSelectorComponent, decorators: [{
@@ -4350,18 +4348,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         FormsModule
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <div class="col-12 px-0 grid grid-nogutter items-center justify-start gap-2">
-      <ui-auto-complete class="col" styleClass="w-full" [(ngModel)]="option.selected" [suggestions]="suggestions" [dropdown]="true" [emptyMessage]="option.emptyMessage" (completeMethod)="search($event)" (cleared)="onClear()" (blurred)="handleSelection()" (selectedItem)="onSelect()" (keydown)="handleKeyDown($event)">
-
-        <ng-template smzTemplate="header">
-          @if (option.dataSourceDisplayName != null) {
-            <div class="text-blue-500 font-bold text-lg mx-5 mt-4 mb-0">{{ option.dataSourceDisplayName }}</div>
-          }
-        </ng-template>
-
-      </ui-auto-complete>
-    </div>
+                    template: `
+    <div class="col-12 px-0 grid grid-nogutter items-center justify-start gap-2">
+      <ui-auto-complete class="col" styleClass="w-full" [(ngModel)]="option.selected" [suggestions]="suggestions" [dropdown]="true" [emptyMessage]="option.emptyMessage" (completeMethod)="search($event)" (cleared)="onClear()" (blurred)="handleSelection()" (selectedItem)="onSelect()" (keydown)="handleKeyDown($event)">
+
+        <ng-template smzTemplate="header">
+          @if (option.dataSourceDisplayName != null) {
+            <div class="text-blue-500 font-bold text-lg mx-5 mt-4 mb-0">{{ option.dataSourceDisplayName }}</div>
+          }
+        </ng-template>
+
+      </ui-auto-complete>
+    </div>
     `
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { isRequired: [{
@@ -4632,56 +4630,56 @@ class SmzInputAutocompleteTagArea {
         };
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputAutocompleteTagArea, deps: [{ token: i1$1.NgModel, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzInputAutocompleteTagArea, isStandalone: false, selector: "smz-input-autocomplete-tag-area", inputs: { input: "input", control: "control", behaviors: "behaviors" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: SmzPopoverComponent, descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputArea"], descendants: true }, { propertyName: "selectorElement", first: true, predicate: ["elementSelector"], descendants: true }], ngImport: i0, template: `
-    @if (input.hideLabel != true) {
-      <label class="smz__input_name" [innerHTML]="input.name"></label>
-    }
-    <div class="input_inner__wrapper" [id]="input.propertyName">
-      <textarea #inputArea id="inputArea" smzTextarea smzSmartAutocompleteTag [formControl]="$any(control)" [options]="input.config.options" [rows]="input.textAreaRows" (tagTyped)="onTag($event)" class="col-12"></textarea>
-      <smz-validation-messages [input]="input" [control]="$any(control)" [behaviors]="behaviors"></smz-validation-messages>
-    </div>
-
-    <ui-popover #overlay appendTo="body" [style]="{width: '450px'}" (hidden)="onHideOverlay()" styleClass="tag-overlay">
-      <ng-template pTemplate>
-        @if (currentOption) {
-          <smz-autocomplete-selector
-            #elementSelector
-            styleClass="tag-dropdown"
-            [option]="currentOption"
-            [allowCustomValues]="input.allowCustomValues"
-            (finished)="hide()"
-            >
-          </smz-autocomplete-selector>
-        }
-      </ng-template>
-    </ui-popover>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzInputAutocompleteTagArea, isStandalone: false, selector: "smz-input-autocomplete-tag-area", inputs: { input: "input", control: "control", behaviors: "behaviors" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: SmzPopoverComponent, descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputArea"], descendants: true }, { propertyName: "selectorElement", first: true, predicate: ["elementSelector"], descendants: true }], ngImport: i0, template: `
+    @if (input.hideLabel != true) {
+      <label class="smz__input_name" [innerHTML]="input.name"></label>
+    }
+    <div class="input_inner__wrapper" [id]="input.propertyName">
+      <textarea #inputArea id="inputArea" smzTextarea smzSmartAutocompleteTag [formControl]="$any(control)" [options]="input.config.options" [rows]="input.textAreaRows" (tagTyped)="onTag($event)" class="col-12"></textarea>
+      <smz-validation-messages [input]="input" [control]="$any(control)" [behaviors]="behaviors"></smz-validation-messages>
+    </div>
+
+    <ui-popover #overlay appendTo="body" [style]="{width: '450px'}" (hidden)="onHideOverlay()" styleClass="tag-overlay">
+      <ng-template pTemplate>
+        @if (currentOption) {
+          <smz-autocomplete-selector
+            #elementSelector
+            styleClass="tag-dropdown"
+            [option]="currentOption"
+            [allowCustomValues]="input.allowCustomValues"
+            (finished)="hide()"
+            >
+          </smz-autocomplete-selector>
+        }
+      </ng-template>
+    </ui-popover>
     `, isInline: true, styles: [".p-overlaypanel.autocomplete-tag-overlay{box-shadow:unset}\n", ".p-overlaypanel.autocomplete-tag-overlay .p-overlaypanel-content{padding:0}\n", ".tag-dropdown.p-dropdown{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid", "autoResize"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SmzAutocompleteSelectorComponent, selector: "smz-autocomplete-selector", inputs: ["isRequired", "allowCustomValues", "option", "suggestions"], outputs: ["selectedChange", "suggestionsChanged", "finished"] }, { kind: "directive", type: SmzSmartAutocompleteTagDirective, selector: "[smzSmartAutocompleteTag]", inputs: ["options"], outputs: ["tagTyped"] }, { kind: "component", type: i2.SmzPopoverComponent, selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }, { kind: "component", type: ValidationMessagesComponent, selector: "smz-validation-messages", inputs: ["input", "control", "behaviors", "extraMessages"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputAutocompleteTagArea, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-input-autocomplete-tag-area', template: `
-    @if (input.hideLabel != true) {
-      <label class="smz__input_name" [innerHTML]="input.name"></label>
-    }
-    <div class="input_inner__wrapper" [id]="input.propertyName">
-      <textarea #inputArea id="inputArea" smzTextarea smzSmartAutocompleteTag [formControl]="$any(control)" [options]="input.config.options" [rows]="input.textAreaRows" (tagTyped)="onTag($event)" class="col-12"></textarea>
-      <smz-validation-messages [input]="input" [control]="$any(control)" [behaviors]="behaviors"></smz-validation-messages>
-    </div>
-
-    <ui-popover #overlay appendTo="body" [style]="{width: '450px'}" (hidden)="onHideOverlay()" styleClass="tag-overlay">
-      <ng-template pTemplate>
-        @if (currentOption) {
-          <smz-autocomplete-selector
-            #elementSelector
-            styleClass="tag-dropdown"
-            [option]="currentOption"
-            [allowCustomValues]="input.allowCustomValues"
-            (finished)="hide()"
-            >
-          </smz-autocomplete-selector>
-        }
-      </ng-template>
-    </ui-popover>
+            args: [{ selector: 'smz-input-autocomplete-tag-area', template: `
+    @if (input.hideLabel != true) {
+      <label class="smz__input_name" [innerHTML]="input.name"></label>
+    }
+    <div class="input_inner__wrapper" [id]="input.propertyName">
+      <textarea #inputArea id="inputArea" smzTextarea smzSmartAutocompleteTag [formControl]="$any(control)" [options]="input.config.options" [rows]="input.textAreaRows" (tagTyped)="onTag($event)" class="col-12"></textarea>
+      <smz-validation-messages [input]="input" [control]="$any(control)" [behaviors]="behaviors"></smz-validation-messages>
+    </div>
+
+    <ui-popover #overlay appendTo="body" [style]="{width: '450px'}" (hidden)="onHideOverlay()" styleClass="tag-overlay">
+      <ng-template pTemplate>
+        @if (currentOption) {
+          <smz-autocomplete-selector
+            #elementSelector
+            styleClass="tag-dropdown"
+            [option]="currentOption"
+            [allowCustomValues]="input.allowCustomValues"
+            (finished)="hide()"
+            >
+          </smz-autocomplete-selector>
+        }
+      </ng-template>
+    </ui-popover>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, styles: [".p-overlaypanel.autocomplete-tag-overlay{box-shadow:unset}\n", ".p-overlaypanel.autocomplete-tag-overlay .p-overlaypanel-content{padding:0}\n", ".tag-dropdown.p-dropdown{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgModel, decorators: [{
                     type: Optional
@@ -4708,11 +4706,11 @@ class InputTextComponent {
     control;
     behaviors;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: InputTextComponent, isStandalone: false, selector: "smz-input-text", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<smz-label\n    class=\"smz__input_name\"\n    [text]=\"input.name\"\n    [propertyName]=\"input.propertyName\"\n    [showLabel]=\"input.hideName == false && input.hideLabel != true\"\n    [warning]=\"input.warning?.()\"\n    [help]=\"input.tooltip?.()\"\n    [popover]=\"input.popover?.()\">\n</smz-label>\n\n<div class=\"input_inner__wrapper\">\n    <input\n        smzInputText\n        class=\"col-12 smz__input_value flex-1\"\n        [id]=\"input.propertyName\"\n        type=\"text\"\n        [formControl]=\"control\"\n        [smzAutoFocus]=\"input.autoFocus\">\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>", dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.SmzAutoFocusDirective, selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: InputTextComponent, isStandalone: false, selector: "smz-input-text", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<smz-label\r\n    class=\"smz__input_name\"\r\n    [text]=\"input.name\"\r\n    [propertyName]=\"input.propertyName\"\r\n    [showLabel]=\"input.hideName == false && input.hideLabel != true\"\r\n    [warning]=\"input.warning?.()\"\r\n    [help]=\"input.tooltip?.()\"\r\n    [popover]=\"input.popover?.()\">\r\n</smz-label>\r\n\r\n<div class=\"input_inner__wrapper\">\r\n    <input\r\n        smzInputText\r\n        class=\"col-12 smz__input_value flex-1\"\r\n        [id]=\"input.propertyName\"\r\n        type=\"text\"\r\n        [formControl]=\"control\"\r\n        [smzAutoFocus]=\"input.autoFocus\">\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.SmzAutoFocusDirective, selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-input-text', standalone: false, template: "<smz-label\n    class=\"smz__input_name\"\n    [text]=\"input.name\"\n    [propertyName]=\"input.propertyName\"\n    [showLabel]=\"input.hideName == false && input.hideLabel != true\"\n    [warning]=\"input.warning?.()\"\n    [help]=\"input.tooltip?.()\"\n    [popover]=\"input.popover?.()\">\n</smz-label>\n\n<div class=\"input_inner__wrapper\">\n    <input\n        smzInputText\n        class=\"col-12 smz__input_value flex-1\"\n        [id]=\"input.propertyName\"\n        type=\"text\"\n        [formControl]=\"control\"\n        [smzAutoFocus]=\"input.autoFocus\">\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n</div>" }]
+            args: [{ selector: 'smz-input-text', standalone: false, template: "<smz-label\r\n    class=\"smz__input_name\"\r\n    [text]=\"input.name\"\r\n    [propertyName]=\"input.propertyName\"\r\n    [showLabel]=\"input.hideName == false && input.hideLabel != true\"\r\n    [warning]=\"input.warning?.()\"\r\n    [help]=\"input.tooltip?.()\"\r\n    [popover]=\"input.popover?.()\">\r\n</smz-label>\r\n\r\n<div class=\"input_inner__wrapper\">\r\n    <input\r\n        smzInputText\r\n        class=\"col-12 smz__input_value flex-1\"\r\n        [id]=\"input.propertyName\"\r\n        type=\"text\"\r\n        [formControl]=\"control\"\r\n        [smzAutoFocus]=\"input.autoFocus\">\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>" }]
         }], propDecorators: { input: [{
                 type: Input
             }], control: [{
@@ -4779,11 +4777,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) {\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    <ui-tree-select class=\"col-12 grid-nogutter smz__input_value flex-1\" containerStyleClass=\"w-full\" [formControl]=\"control\" [options]=\"nodes\" [placeholder]=\"input.name\" appendTo=\"body\" [filter]=\"input.showFilter ? true : false\" [selectionMode]=\"input.selectionMode\" [filterInputAutoFocus]=\"input.autofocusFilter\" [emptyMessage]=\"input.emptyMessage\" [showClear]=\"input.showClear\" [filterPlaceholder]=\"input.emptyFilterMessage\" [scrollHeight]=\"input.scrollHeight\" [display]=\"input.display\">\n      @for (inputType of input.allTypes; track inputType) {\n        <ng-template let-node [smzTemplate]=\"inputType\">\n          @if (node != null) {\n            <div [innerHTML]=\"node.label | safeHtml\" [smzTooltip]=\"node.tooltip\"></div>\n          }\n        </ng-template>\n      }\n    </ui-tree-select>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n  </div>\n}", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzTreeSelectComponent, selector: "ui-tree-select", inputs: ["options", "selectionMode", "placeholder", "filter", "filterPlaceholder", "emptyMessage", "showClear", "scrollHeight", "styleClass", "containerStyleClass", "appendTo", "display", "filterInputAutoFocus"] }, { 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.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) {\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    <ui-tree-select class=\"col-12 grid-nogutter smz__input_value flex-1\" containerStyleClass=\"w-full\" [formControl]=\"control\" [options]=\"nodes\" [placeholder]=\"input.name\" appendTo=\"body\" [filter]=\"input.showFilter ? true : false\" [selectionMode]=\"input.selectionMode\" [filterInputAutoFocus]=\"input.autofocusFilter\" [emptyMessage]=\"input.emptyMessage\" [showClear]=\"input.showClear\" [filterPlaceholder]=\"input.emptyFilterMessage\" [scrollHeight]=\"input.scrollHeight\" [display]=\"input.display\">\r\n      @for (inputType of input.allTypes; track inputType) {\r\n        <ng-template let-node [smzTemplate]=\"inputType\">\r\n          @if (node != null) {\r\n            <div [innerHTML]=\"node.label | safeHtml\" [smzTooltip]=\"node.tooltip\"></div>\r\n          }\r\n        </ng-template>\r\n      }\r\n    </ui-tree-select>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n  </div>\r\n}", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzTreeSelectComponent, selector: "ui-tree-select", inputs: ["options", "selectionMode", "placeholder", "filter", "filterPlaceholder", "emptyMessage", "showClear", "scrollHeight", "styleClass", "containerStyleClass", "appendTo", "display", "filterInputAutoFocus"] }, { 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.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) {\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    <ui-tree-select class=\"col-12 grid-nogutter smz__input_value flex-1\" containerStyleClass=\"w-full\" [formControl]=\"control\" [options]=\"nodes\" [placeholder]=\"input.name\" appendTo=\"body\" [filter]=\"input.showFilter ? true : false\" [selectionMode]=\"input.selectionMode\" [filterInputAutoFocus]=\"input.autofocusFilter\" [emptyMessage]=\"input.emptyMessage\" [showClear]=\"input.showClear\" [filterPlaceholder]=\"input.emptyFilterMessage\" [scrollHeight]=\"input.scrollHeight\" [display]=\"input.display\">\n      @for (inputType of input.allTypes; track inputType) {\n        <ng-template let-node [smzTemplate]=\"inputType\">\n          @if (node != null) {\n            <div [innerHTML]=\"node.label | safeHtml\" [smzTooltip]=\"node.tooltip\"></div>\n          }\n        </ng-template>\n      }\n    </ui-tree-select>\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\n  </div>\n}" }]
+            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    <ui-tree-select class=\"col-12 grid-nogutter smz__input_value flex-1\" containerStyleClass=\"w-full\" [formControl]=\"control\" [options]=\"nodes\" [placeholder]=\"input.name\" appendTo=\"body\" [filter]=\"input.showFilter ? true : false\" [selectionMode]=\"input.selectionMode\" [filterInputAutoFocus]=\"input.autofocusFilter\" [emptyMessage]=\"input.emptyMessage\" [showClear]=\"input.showClear\" [filterPlaceholder]=\"input.emptyFilterMessage\" [scrollHeight]=\"input.scrollHeight\" [display]=\"input.display\">\r\n      @for (inputType of input.allTypes; track inputType) {\r\n        <ng-template let-node [smzTemplate]=\"inputType\">\r\n          @if (node != null) {\r\n            <div [innerHTML]=\"node.label | safeHtml\" [smzTooltip]=\"node.tooltip\"></div>\r\n          }\r\n        </ng-template>\r\n      }\r\n    </ui-tree-select>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n  </div>\r\n}" }]
         }], ctorParameters: () => [{ type: SmzFormsDropdownService }], propDecorators: { input: [{
                 type: Input
             }], formId: [{
@@ -5630,6 +5628,7 @@ var SmzBreakpoints;
         LARGE: 'large',
         EXTRA_LARGE: 'extraLarge',
     };
+    /** Prefixos de variante do Tailwind; os limites (576/768/992/1200px) sao os `screens` do preset. */
     SmzBreakpoints.Tags = {
         [SmzBreakpoints.Breakpoint.EXTRA_SMALL]: '',
         [SmzBreakpoints.Breakpoint.SMALL]: 'sm:',
@@ -5637,46 +5636,40 @@ var SmzBreakpoints;
         [SmzBreakpoints.Breakpoint.LARGE]: 'lg:',
         [SmzBreakpoints.Breakpoint.EXTRA_LARGE]: 'xl:',
     };
-    SmzBreakpoints.ReplacePositions = {
-        row: 4,
-        verticalAlignment: 12,
-        horizontalAlignment: 16,
-    };
-    SmzBreakpoints.ResponsiveGeneralTag = {
-        row: {
-            ['col-1']: '1',
-            ['col-2']: '2',
-            ['col-3']: '3',
-            ['col-4']: '4',
-            ['col-5']: '5',
-            ['col-6']: '6',
-            ['col-7']: '7',
-            ['col-8']: '8',
-            ['col-9']: '9',
-            ['col-10']: '10',
-            ['col-11']: '11',
-            ['col-12']: '12',
-        },
-        verticalAlignment: {
-            ['items-start']: 'start',
-            ['items-center']: 'center',
-            ['items-end']: 'end',
-        },
-        horizontalAlignment: {
-            ['justify-start']: 'start',
-            ['justify-center']: 'center',
-            ['justify-end']: 'end',
-            ['justify-around']: 'around',
-            ['justify-between']: 'between',
-        }
-    };
-    SmzBreakpoints.ResponsivePrimeTag = {
-        row: { withTag: '', emptyTag: 'col-' },
-        verticalAlignment: { withTag: 'items-', emptyTag: 'items-' },
-        horizontalAlignment: { withTag: 'justify-', emptyTag: 'justify-' }
-    };
 })(SmzBreakpoints || (SmzBreakpoints = {}));
 
+const ORDER = ['extraSmall', 'small', 'medium', 'large', 'extraLarge'];
+/**
+ * Classes de layout de um template responsivo. Funcao pura (sem Angular) para ser testavel em vitest.
+ *
+ * - `span`  (padrao): filhos de `grid grid-cols-12` -> `col-span-N`, `sm:col-span-N`, ...
+ * - `width`: elementos fora de uma grade (o proprio dialog, filho flex da mascara) -> `w-N/12` (`w-full` para 12).
+ *
+ * As classes sao montadas em runtime, por isso o preset do ui-kit as publica em `safelist`.
+ */
+function SetTemplateClasses(template, properties = ['row'], variant = 'span') {
+    if (template == null || !properties.includes('row')) {
+        return '';
+    }
+    const classes = [];
+    for (const breakpoint of ORDER) {
+        const columns = template[breakpoint]?.row;
+        if (columns == null) {
+            continue;
+        }
+        const prefix = SmzBreakpoints.Tags[breakpoint];
+        classes.push(`${prefix}${columnsClass(columns, variant)}`);
+    }
+    return classes.join(' ');
+}
+function columnsClass(columns, variant) {
+    const value = Math.min(12, Math.max(1, Math.round(Number(columns))));
+    if (variant === 'width') {
+        return value === 12 ? 'w-full' : `w-${value}/12`;
+    }
+    return `col-span-${value}`;
+}
+
 class SetTemplateClassesPipe {
     transform(template, properties, append = []) {
         const stylesToAppend = append == null ? '' : append.filter(x => x != null).join(' ');
@@ -5705,35 +5698,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     exports: [SetTemplateClassesPipe],
                 }]
         }] });
-function SetTemplateClasses(template, properties) {
-    let response = '';
-    if (template == null) {
-        return response;
-    }
-    const tagKeys = Object.keys(template);
-    for (const tag of tagKeys) {
-        const tagConfig = template[tag];
-        if (tagConfig == null) {
-            continue;
-        }
-        const tagsMap = SmzBreakpoints.Tags;
-        const prefix = `${tagsMap[tag]}col-`;
-        for (const property of properties) {
-            const propValue = tagConfig[property];
-            if (propValue != null) {
-                const replacePositions = SmzBreakpoints.ReplacePositions;
-                const position = replacePositions[property];
-                const value = String(propValue);
-                const columns = value.slice(position, value.length);
-                const responsivePrimeTag = SmzBreakpoints.ResponsivePrimeTag;
-                const primeTag = responsivePrimeTag[property];
-                const responsiveTag = prefix.length === 0 ? primeTag.emptyTag : primeTag.withTag;
-                response += ` ${responsiveTag}${prefix}${columns}`;
-            }
-        }
-    }
-    return response;
-}
 
 /* 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, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-member-accessibility, local-rules/no-unknown-member-access, max-len */
 class FormGroupComponent {
@@ -6165,11 +6129,11 @@ class FormGroupComponent {
         this.repository.remove(this.config);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormGroupComponent, deps: [{ token: i1$1.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) {\n  <div class=\"smz_form_grid_container\">\n    @if (viewdata?.form != null && !configHasErrors) {\n      <form focusFirstInput [focus]=\"!config.behaviors.avoidFocusOnLoad\" [formGroup]=\"viewdata.form\" class=\"smz_form__wrapper\" [attr.data-testid]=\"config.formTestId ?? null\" (submit)=\"$event.preventDefault()\" (keydown.enter)=\"onEnter($event)\">\n        <ng-container *ngTemplateOutlet=\"groupTemplate\"></ng-container>\n      </form>\n    }\n    @if (configHasErrors) {\n      <div>Error</div>\n    }\n  </div>\n}\n\n<ng-template #groupTemplate>\n\n  <div class=\"w-full px-0 mx-auto\">\n    <div class=\"grid grid-nogutter flex-wrap items-start justify-start flex-gap-2\" [ngClass]=\"config.template | setTemplateClasses : ['horizontalAlignment', 'verticalAlignment']\">\n      @for (group of config.groups; track group) {\n        @if (!group.isHide) {\n          <div class=\"col\" [ngClass]=\"group.template | setTemplateClasses : ['row']\">\n            @if (group.showName) {\n              <div class=\"smz__group_name\">{{ group.name }}</div>\n            }\n            <div [ngClass]=\"group.styleClass ?? 'grid grid-nogutter flex-wrap items-start justify-start flex-gap-2'\">\n              @for (input of group.children; track input) {\n                @if (input.isVisible) {\n                  <div class=\"input__control__wrapper col relative\" [ngClass]=\"input.template | setTemplateClasses : ['row'] : [input.styleClass, group.inputStyleClass]\">\n                    <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: input }\"></ng-container>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #inputTemplate let-input>\n\n  @if (input.type == controlTypes.PASSWORD) {\n    <smz-input-password [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-password>\n  }\n\n  @if (input.type == controlTypes.TEXT_MASK) {\n    <smz-input-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-mask>\n  }\n\n  @if (input.type == controlTypes.TEXT) {\n    <smz-input-text [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text>\n  }\n\n  @if (input.type == controlTypes.LIST) {\n    <smz-input-list [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-list>\n  }\n\n  @if (input.type == controlTypes.NUMBER) {\n    <smz-input-number [input]=\"input\" [form]=\"viewdata.form\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-number>\n  }\n\n  @if (input.type == controlTypes.TEXT_AREA) {\n    <smz-input-text-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text-area>\n  }\n\n  @if (input.type == controlTypes.CONTENT_MASK) {\n    <smz-input-content-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-content-mask>\n  }\n\n  @if (input.type == controlTypes.TAG_AREA) {\n    <input-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></input-tag-area>\n  }\n\n  @if (input.type == controlTypes.AUTOCOMPLETE_TAG_AREA) {\n    <smz-input-autocomplete-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-autocomplete-tag-area>\n  }\n\n  @if (input.type == controlTypes.RADIO) {\n    <smz-radio-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-radio-button>\n  }\n\n  @if (input.type == controlTypes.SWITCH) {\n    <smz-input-switch [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-switch>\n  }\n\n  @if (input.type == controlTypes.CHECKBOX) {\n    <smz-checkbox [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-checkbox>\n  }\n\n  @if (input.type == controlTypes.CHECKBOX_GROUP) {\n    <smz-checkbox-group [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-checkbox-group>\n  }\n\n  @if (input.type == controlTypes.CALENDAR) {\n    <smz-calendar [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-calendar>\n  }\n\n  @if (input.type == controlTypes.DROPDOWN) {\n    <smz-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-dropdown>\n  }\n\n  @if (input.type == controlTypes.LINKED_DROPDOWN) {\n    <smz-linked-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-dropdown>\n  }\n\n  @if (input.type == controlTypes.FILE) {\n    <smz-file-upload [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [form]=\"viewdata.form\" [behaviors]=\"config.behaviors\"></smz-file-upload>\n  }\n\n  @if (input.type == controlTypes.CURRENCY) {\n    <smz-input-currency [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-currency>\n  }\n\n  @if (input.type == controlTypes.MULTI_SELECT) {\n    <smz-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-multi-select>\n  }\n\n  @if (input.type == controlTypes.LINKED_MULTISELECT) {\n    <smz-linked-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-multi-select>\n  }\n\n  @if (input.type == controlTypes.COLOR_PICKER) {\n    <smz-color-picker [input]=\"input\" [control]=\"$any(viewdata.form.controls[input.propertyName])\" [behaviors]=\"config.behaviors\"></smz-color-picker>\n  }\n\n  @if (input.type == controlTypes.TEXT_BUTTON) {\n    <smz-input-text-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [viewdata]=\"viewdata\" [behaviors]=\"config.behaviors\"></smz-input-text-button>\n  }\n\n  @if (input.type == controlTypes.TREE) {\n    <smz-input-tree [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-input-tree>\n  }\n\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.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 ɵ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\" [attr.data-testid]=\"config.formTestId ?? null\" (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-cols-12 gap-4 items-start\">\r\n      @for (group of config.groups; track group) {\r\n        @if (!group.isHide) {\r\n          <div class=\"min-w-0\" [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-cols-12 gap-4 items-start'\">\r\n              @for (input of group.children; track input) {\r\n                @if (input.isVisible) {\r\n                  <div class=\"input__control__wrapper relative min-w-0\" [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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.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, providers: [SmzFormValidationMessagesService], standalone: false, template: "@if (config != null) {\n  <div class=\"smz_form_grid_container\">\n    @if (viewdata?.form != null && !configHasErrors) {\n      <form focusFirstInput [focus]=\"!config.behaviors.avoidFocusOnLoad\" [formGroup]=\"viewdata.form\" class=\"smz_form__wrapper\" [attr.data-testid]=\"config.formTestId ?? null\" (submit)=\"$event.preventDefault()\" (keydown.enter)=\"onEnter($event)\">\n        <ng-container *ngTemplateOutlet=\"groupTemplate\"></ng-container>\n      </form>\n    }\n    @if (configHasErrors) {\n      <div>Error</div>\n    }\n  </div>\n}\n\n<ng-template #groupTemplate>\n\n  <div class=\"w-full px-0 mx-auto\">\n    <div class=\"grid grid-nogutter flex-wrap items-start justify-start flex-gap-2\" [ngClass]=\"config.template | setTemplateClasses : ['horizontalAlignment', 'verticalAlignment']\">\n      @for (group of config.groups; track group) {\n        @if (!group.isHide) {\n          <div class=\"col\" [ngClass]=\"group.template | setTemplateClasses : ['row']\">\n            @if (group.showName) {\n              <div class=\"smz__group_name\">{{ group.name }}</div>\n            }\n            <div [ngClass]=\"group.styleClass ?? 'grid grid-nogutter flex-wrap items-start justify-start flex-gap-2'\">\n              @for (input of group.children; track input) {\n                @if (input.isVisible) {\n                  <div class=\"input__control__wrapper col relative\" [ngClass]=\"input.template | setTemplateClasses : ['row'] : [input.styleClass, group.inputStyleClass]\">\n                    <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: input }\"></ng-container>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #inputTemplate let-input>\n\n  @if (input.type == controlTypes.PASSWORD) {\n    <smz-input-password [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-password>\n  }\n\n  @if (input.type == controlTypes.TEXT_MASK) {\n    <smz-input-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-mask>\n  }\n\n  @if (input.type == controlTypes.TEXT) {\n    <smz-input-text [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text>\n  }\n\n  @if (input.type == controlTypes.LIST) {\n    <smz-input-list [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-list>\n  }\n\n  @if (input.type == controlTypes.NUMBER) {\n    <smz-input-number [input]=\"input\" [form]=\"viewdata.form\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-number>\n  }\n\n  @if (input.type == controlTypes.TEXT_AREA) {\n    <smz-input-text-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-text-area>\n  }\n\n  @if (input.type == controlTypes.CONTENT_MASK) {\n    <smz-input-content-mask [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-content-mask>\n  }\n\n  @if (input.type == controlTypes.TAG_AREA) {\n    <input-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></input-tag-area>\n  }\n\n  @if (input.type == controlTypes.AUTOCOMPLETE_TAG_AREA) {\n    <smz-input-autocomplete-tag-area [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-autocomplete-tag-area>\n  }\n\n  @if (input.type == controlTypes.RADIO) {\n    <smz-radio-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-radio-button>\n  }\n\n  @if (input.type == controlTypes.SWITCH) {\n    <smz-input-switch [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-switch>\n  }\n\n  @if (input.type == controlTypes.CHECKBOX) {\n    <smz-checkbox [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-checkbox>\n  }\n\n  @if (input.type == controlTypes.CHECKBOX_GROUP) {\n    <smz-checkbox-group [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-checkbox-group>\n  }\n\n  @if (input.type == controlTypes.CALENDAR) {\n    <smz-calendar [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-calendar>\n  }\n\n  @if (input.type == controlTypes.DROPDOWN) {\n    <smz-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-dropdown>\n  }\n\n  @if (input.type == controlTypes.LINKED_DROPDOWN) {\n    <smz-linked-dropdown [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-dropdown>\n  }\n\n  @if (input.type == controlTypes.FILE) {\n    <smz-file-upload [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [form]=\"viewdata.form\" [behaviors]=\"config.behaviors\"></smz-file-upload>\n  }\n\n  @if (input.type == controlTypes.CURRENCY) {\n    <smz-input-currency [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [behaviors]=\"config.behaviors\"></smz-input-currency>\n  }\n\n  @if (input.type == controlTypes.MULTI_SELECT) {\n    <smz-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-multi-select>\n  }\n\n  @if (input.type == controlTypes.LINKED_MULTISELECT) {\n    <smz-linked-multi-select [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-linked-multi-select>\n  }\n\n  @if (input.type == controlTypes.COLOR_PICKER) {\n    <smz-color-picker [input]=\"input\" [control]=\"$any(viewdata.form.controls[input.propertyName])\" [behaviors]=\"config.behaviors\"></smz-color-picker>\n  }\n\n  @if (input.type == controlTypes.TEXT_BUTTON) {\n    <smz-input-text-button [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [viewdata]=\"viewdata\" [behaviors]=\"config.behaviors\"></smz-input-text-button>\n  }\n\n  @if (input.type == controlTypes.TREE) {\n    <smz-input-tree [input]=\"input\" [control]=\"getFormControl(input.propertyName)\" [formId]=\"config.formId\" [behaviors]=\"config.behaviors\"></smz-input-tree>\n  }\n\n</ng-template>\n" }]
+            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\" [attr.data-testid]=\"config.formTestId ?? null\" (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-cols-12 gap-4 items-start\">\r\n      @for (group of config.groups; track group) {\r\n        @if (!group.isHide) {\r\n          <div class=\"min-w-0\" [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-cols-12 gap-4 items-start'\">\r\n              @for (input of group.children; track input) {\r\n                @if (input.isVisible) {\r\n                  <div class=\"input__control__wrapper relative min-w-0\" [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$1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: SmzFormsManagerService }, { type: SmzFormsRepositoryService }, { type: SmzFormValidationMessagesService }], propDecorators: { config: [{
                 type: Input
             }], statusChanges: [{
@@ -7113,7 +7077,7 @@ class InputListDialogCrudComponent {
             propertyName: 'name', name: 'nome', type: SmzControlType.TEXT, hideName: true,
             validatorsPreset: { isRequired: true },
             advancedSettings: { validators: [MustBeUnique(this.config.data.input.options)], validationMessages: [{ type: 'unique', message: 'Já existe um item com esse dado.' }] },
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             defaultValue: defaultValue,
             autoFocus: true
         };
@@ -7132,7 +7096,7 @@ class InputListDialogCrudComponent {
                 {
                     name: '', showName: false,
                     children: [input ?? textInput],
-                    template: { large: { row: 'col-12' } }
+                    template: { large: { row: 12 } }
                 }
             ],
         };
@@ -7189,7 +7153,7 @@ class InputListInlineCrudComponent {
             propertyName: 'name', name: 'nome', type: SmzControlType.TEXT, hideName: true,
             validatorsPreset: { isRequired: true },
             advancedSettings: { validators: [MustBeUnique(this.input.options)], validationMessages: [{ type: 'unique', message: 'Já existe um item com esse dado.' }] },
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             defaultValue: this.defaultValue,
         };
         const input = this.input.crud?.inputData != null ? {
@@ -7207,7 +7171,7 @@ class InputListInlineCrudComponent {
                 {
                     name: '', showName: false,
                     children: [input ?? textInput],
-                    template: { large: { row: 'col-12' } }
+                    template: { large: { row: 12 } }
                 }
             ],
         };
@@ -7265,7 +7229,7 @@ class InputListBatchCrudComponent {
             propertyName: 'names', name: 'Nomes', type: SmzControlType.TEXT_AREA, hideName: true,
             validatorsPreset: { isRequired: true },
             advancedSettings: { validators: [unique(this.config.data.input.options)], validationMessages: [{ type: 'unique', message: 'Já existe um item com esse nome.' }] },
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             defaultValue: defaultValue,
         };
         const form = {
@@ -7275,7 +7239,7 @@ class InputListBatchCrudComponent {
                 {
                     name: '', showName: false,
                     children: [input],
-                    template: { large: { row: 'col-12' } }
+                    template: { large: { row: 12 } }
                 }
             ],
         };
@@ -7840,11 +7804,11 @@ class DialogContentManagerComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogContentManagerComponent, deps: [{ token: DynamicDialogRef }, { token: SmzDynamicDialogConfig }, { token: SmzDialogsVisibilityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogContentManagerComponent, isStandalone: false, selector: "smz-dialog-content-manager", ngImport: i0, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n  <div class=\"smz-dialog-container\">\r\n    <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-nogutter items-start justify-start'\">\r\n\r\n      <!-- <ui-progress-bar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" class=\"dialog-loading\"></ui-progress-bar> -->\r\n      @for (error of config.data._context.apiErrors; track error) {\r\n        <ui-message [ngStyle]=\"{ 'width': '100%;' }\" class=\"dialog-messages\">\r\n          {{error}}\r\n        </ui-message>\r\n      }\r\n\r\n      @for (feature of config.data._context.injectables; track feature) {\r\n        <div class=\"col\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n          @if (feature.visibilityDependsOn != null) {\r\n            @if ((visibility.observers[feature.componentId + feature.component.name].visibility$ | async); as visibilityState) {\r\n              @if (!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state) {\r\n                <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n              }\r\n            }\r\n          }\r\n          @if (feature.visibilityDependsOn == null) {\r\n            <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n          }\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.SmzMessageComponent, selector: "ui-message", inputs: ["severity", "text", "icon"] }, { kind: "directive", type: InjectComponentDirective, selector: "[appInjectComponent]", inputs: ["appInjectComponent", "context"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SetTemplateClassesPipe, name: "setTemplateClasses" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogContentManagerComponent, isStandalone: false, selector: "smz-dialog-content-manager", ngImport: i0, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n  <div class=\"smz-dialog-container\">\r\n    <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-cols-12 items-start'\">\r\n\r\n      <!-- <ui-progress-bar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" class=\"dialog-loading\"></ui-progress-bar> -->\r\n      @for (error of config.data._context.apiErrors; track error) {\r\n        <ui-message class=\"dialog-messages col-span-full w-full\">\r\n          {{error}}\r\n        </ui-message>\r\n      }\r\n\r\n      @for (feature of config.data._context.injectables; track feature) {\r\n        <div class=\"min-w-0\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n          @if (feature.visibilityDependsOn != null) {\r\n            @if ((visibility.observers[feature.componentId + feature.component.name].visibility$ | async); as visibilityState) {\r\n              @if (!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state) {\r\n                <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n              }\r\n            }\r\n          }\r\n          @if (feature.visibilityDependsOn == null) {\r\n            <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n          }\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SmzMessageComponent, selector: "ui-message", inputs: ["severity", "text", "icon"] }, { kind: "directive", type: InjectComponentDirective, selector: "[appInjectComponent]", inputs: ["appInjectComponent", "context"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SetTemplateClassesPipe, name: "setTemplateClasses" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogContentManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-dialog-content-manager', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n  <div class=\"smz-dialog-container\">\r\n    <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-nogutter items-start justify-start'\">\r\n\r\n      <!-- <ui-progress-bar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" class=\"dialog-loading\"></ui-progress-bar> -->\r\n      @for (error of config.data._context.apiErrors; track error) {\r\n        <ui-message [ngStyle]=\"{ 'width': '100%;' }\" class=\"dialog-messages\">\r\n          {{error}}\r\n        </ui-message>\r\n      }\r\n\r\n      @for (feature of config.data._context.injectables; track feature) {\r\n        <div class=\"col\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n          @if (feature.visibilityDependsOn != null) {\r\n            @if ((visibility.observers[feature.componentId + feature.component.name].visibility$ | async); as visibilityState) {\r\n              @if (!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state) {\r\n                <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n              }\r\n            }\r\n          }\r\n          @if (feature.visibilityDependsOn == null) {\r\n            <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n          }\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"] }]
+            args: [{ selector: 'smz-dialog-content-manager', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"smz-dialog-content smz_form_grid_container\" [ngClass]=\"config.data.contentClass\">\r\n\r\n  <div class=\"smz-dialog-container\">\r\n    <div [ngClass]=\"config.data.featureContainerClass ?? 'grid grid-cols-12 items-start'\">\r\n\r\n      <!-- <ui-progress-bar *ngIf=\"config.data._context.isLoading\" mode=\"indeterminate\" [ngStyle]=\"{ 'width': '100%;' }\" class=\"dialog-loading\"></ui-progress-bar> -->\r\n      @for (error of config.data._context.apiErrors; track error) {\r\n        <ui-message class=\"dialog-messages col-span-full w-full\">\r\n          {{error}}\r\n        </ui-message>\r\n      }\r\n\r\n      @for (feature of config.data._context.injectables; track feature) {\r\n        <div class=\"min-w-0\" [ngClass]=\"(feature.template != null ? feature.template : config.data._context.featureTemplate) | setTemplateClasses : ['row']\">\r\n          @if (feature.visibilityDependsOn != null) {\r\n            @if ((visibility.observers[feature.componentId + feature.component.name].visibility$ | async); as visibilityState) {\r\n              @if (!feature.visibilityDependsOn.reversed === visibilityState.state || feature.visibilityDependsOn.reversed === !visibilityState.state) {\r\n                <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n              }\r\n            }\r\n          }\r\n          @if (feature.visibilityDependsOn == null) {\r\n            <ng-template [appInjectComponent]=\"feature\" [context]=\"config.data._context\"></ng-template>\r\n          }\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [":root{--smz-dialog-padding: 1em}smz-general-dialog p-toolbar .ui-toolbar{background-color:unset;border:unset;padding:var(--smz-dialog-padding)}smz-general-dialog .smz-dialog-container{position:absolute;top:var(--smz-dialog-padding);left:var(--smz-dialog-padding);right:var(--smz-dialog-padding);bottom:calc(var(--smz-dialog-padding) * 4);overflow:scroll}smz-general-dialog .smz-dialog-footer{position:absolute;bottom:0;left:0;right:0;z-index:auto}smz-general-dialog .smz_dialog_disabled{-webkit-user-select:none!important;user-select:none!important;pointer-events:none!important;filter:brightness(70%)!important}smz-general-dialog .smz-group-right{float:right}\n"] }]
         }], ctorParameters: () => [{ type: DynamicDialogRef }, { type: SmzDynamicDialogConfig }, { type: SmzDialogsVisibilityService }] });
 
 class MessageContentComponent {
@@ -8248,6 +8212,7 @@ class DynamicDialogComponent {
                 this.container = event.element;
                 this.wrapper = this.container.parentElement;
                 this.moveOnTop();
+                this.promoteToTopLayer();
                 this.bindGlobalListeners();
                 if (this.config.modal !== false) {
                     this.enableModality();
@@ -8261,6 +8226,25 @@ class DynamicDialogComponent {
                 break;
         }
     }
+    /**
+     * Overlays do CDK (ui-drawer, ui-dialog, menus...) vivem na top layer do navegador (Popover API), onde `z-index` nao
+     * adianta: um dialog fora dela fica SEMPRE atras do backdrop deles. Promove a mascara do dialog a `popover="manual"`:
+     * a top layer empilha pela ordem de abertura, entao um dialog aberto depois aparece acima do que ja estava aberto.
+     * Sem suporte a Popover API, segue so com z-index.
+     */
+    promoteToTopLayer() {
+        const mask = this.maskViewChild?.nativeElement;
+        if (!mask || typeof mask.showPopover !== 'function') {
+            return;
+        }
+        try {
+            mask.setAttribute('popover', 'manual');
+            mask.showPopover();
+        }
+        catch {
+            mask.removeAttribute('popover');
+        }
+    }
     onAnimationEnd(event) {
         if (event.toState === 'void') {
             this.onContainerDestroy();
@@ -8298,6 +8282,7 @@ class DynamicDialogComponent {
     }
     maximize() {
         this.maximized = !this.maximized;
+        this.syncSizeAroundMaximize();
         if (!this.config.modal) {
             if (this.maximized) {
                 SmzDomHandler.addClass(document.body, 'p-overflow-hidden');
@@ -8308,6 +8293,32 @@ class DynamicDialogComponent {
         }
         this.onMaximize.emit({ maximized: this.maximized });
     }
+    /**
+     * O dialog tem tamanho automatico (segue o conteudo). Conteudo que fixa tamanho em px enquanto o dialog esta
+     * maximizado (tabelas, graficos, componentes que medem o contentor) o deixaria maior ao restaurar. Guarda o
+     * tamanho de antes de maximizar e, ao restaurar, o usa como teto (max-width/max-height): o dialog volta ao
+     * tamanho original e ainda pode encolher se o conteudo encolher. Tamanhos definidos pelo consumidor (`width`,
+     * `height`, `style`) sao respeitados e nao sao tocados.
+     */
+    syncSizeAroundMaximize() {
+        const container = this.container;
+        if (!container)
+            return;
+        container.style.removeProperty('max-width');
+        container.style.removeProperty('max-height');
+        if (this.maximized) {
+            this.preMaximizeContainerWidth = container.offsetWidth;
+            this.preMaximizeContainerHeight = container.offsetHeight;
+            return;
+        }
+        const style = (this.config.style ?? {});
+        if (this.preMaximizeContainerWidth > 0 && !this.config.width && style['width'] == null && style['maxWidth'] == null) {
+            container.style.maxWidth = `${this.preMaximizeContainerWidth}px`;
+        }
+        if (this.preMaximizeContainerHeight > 0 && !this.config.height && style['height'] == null && style['maxHeight'] == null) {
+            container.style.maxHeight = `${this.preMaximizeContainerHeight}px`;
+        }
+    }
     enableModality() {
         if (this.config.closable !== false && this.config.dismissableMask) {
             this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => {
@@ -8403,16 +8414,24 @@ class DynamicDialogComponent {
         }
     }
     bindDocumentEscapeListener() {
-        const maskEl = this.maskViewChild?.nativeElement;
-        const documentTarget = maskEl?.ownerDocument ?? window.document;
-        const teardown = this.renderer.listen(documentTarget, 'keydown', (event) => {
-            if (event.which === 27 && this.container) {
-                if (parseInt(this.container.style.zIndex, 10) === SmzZIndex.getCurrent()) {
-                    this.hide();
-                }
+        // Captura na `window` (antes do listener no `body` do CDK): o ESC do dialog do topo fecha so ele e nao chega a um
+        // overlay do CDK aberto por baixo (ex.: ui-drawer), que fecharia junto.
+        const listener = (event) => {
+            if (event.key !== 'Escape' || !this.container) {
+                return;
             }
-        });
-        this.documentEscapeListener = teardown ?? null;
+            if (parseInt(this.container.style.zIndex, 10) !== SmzZIndex.getCurrent()) {
+                return;
+            }
+            event.stopPropagation();
+            const data = this.dialogConfig.data;
+            const dialogContext = data.context ?? data['_context'];
+            if (!dialogContext?.isLoading) {
+                this.zone.run(() => this.hide());
+            }
+        };
+        window.addEventListener('keydown', listener, true);
+        this.documentEscapeListener = () => window.removeEventListener('keydown', listener, true);
     }
     unbindDocumentEscapeListener() {
         if (this.documentEscapeListener) {
@@ -8434,69 +8453,69 @@ class DynamicDialogComponent {
         this.overlayPanel?.kill();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: SmzDynamicDialogConfig }, { token: SmzDockService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DynamicDialogComponent, isStandalone: false, selector: "smz-dynamicDialog", outputs: { onMaximize: "onMaximize", onMinimize: "onMinimize" }, host: { listeners: { "document:keydown.escape": "onEscapeHandler($event)" }, properties: { "attr.id": "this.domId" }, classAttribute: "p-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "insertionFooter", first: true, predicate: DynamicDialogFooter, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "highlightPanelViewChild", first: true, predicate: ["highlightPanel"], descendants: true }, { propertyName: "overlayPanelClipViewChild", first: true, predicate: ["overlayPanelClip"], descendants: true }, { propertyName: "overlayBlendClipViewChild", first: true, predicate: ["overlayBlendClip"], descendants: true }], ngImport: i0, template: `
-
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
-}
-<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
-  @if (visible) {
-    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
-      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
-      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
-      [style.width]="config.width" [style.height]="config.height">
-      @if (config.showHeader === false ? false: true) {
-        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
-          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
-          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
-            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
-              @if (topbarButton.visible) {
-                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
-                  <span [ngClass]="topbarButton.class"></span>
-                </button>
-              }
-            }
-            @if (config.minimizable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
-                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
-              </button>
-            }
-            @if (config.maximizable !== false && !maximized) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
-              </button>
-            }
-            @if (maximized && !config.blockRestoreButton) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
-              </button>
-            }
-            @if (config.closable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
-                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
-              </button>
-            }
-          </div>
-        </div>
-      }
-      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
-        <ng-template pDynamicDialogContent></ng-template>
-      </div>
-      @if (config.footer) {
-        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
-          <ng-template pDynamicDialogFooter></ng-template>
-        </div>
-      }
-    </div>
-  }
-</div>
-`, isInline: true, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => SmzTooltipDirective), selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i0.forwardRef(() => SmzAutoFocusDirective), selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogFooter), selector: "[pDynamicDialogFooter]" }, { kind: "pipe", type: i0.forwardRef(() => SafeHtmlPipe$1), name: "safeHtml" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DynamicDialogComponent, isStandalone: false, selector: "smz-dynamicDialog", outputs: { onMaximize: "onMaximize", onMinimize: "onMinimize" }, host: { listeners: { "document:keydown.escape": "onEscapeHandler($event)" }, properties: { "attr.id": "this.domId" }, classAttribute: "p-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "insertionFooter", first: true, predicate: DynamicDialogFooter, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "highlightPanelViewChild", first: true, predicate: ["highlightPanel"], descendants: true }, { propertyName: "overlayPanelClipViewChild", first: true, predicate: ["overlayPanelClip"], descendants: true }, { propertyName: "overlayBlendClipViewChild", first: true, predicate: ["overlayBlendClip"], descendants: true }], ngImport: i0, template: `
+
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
+}
+<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
+  @if (visible) {
+    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
+      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
+      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
+      [style.width]="config.width" [style.height]="config.height">
+      @if (config.showHeader === false ? false: true) {
+        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
+          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
+          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
+            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
+              @if (topbarButton.visible) {
+                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
+                  <span [ngClass]="topbarButton.class"></span>
+                </button>
+              }
+            }
+            @if (config.minimizable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
+                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
+              </button>
+            }
+            @if (config.maximizable !== false && !maximized) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
+              </button>
+            }
+            @if (maximized && !config.blockRestoreButton) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
+              </button>
+            }
+            @if (config.closable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
+                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
+              </button>
+            }
+          </div>
+        </div>
+      }
+      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
+        <ng-template pDynamicDialogContent></ng-template>
+      </div>
+      @if (config.footer) {
+        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
+          <ng-template pDynamicDialogFooter></ng-template>
+        </div>
+      }
+    </div>
+  }
+</div>
+`, isInline: true, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}.p-dialog-mask[popover]{margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;inset:0;max-width:none;max-height:none;width:100%;height:100%}.p-dialog-mask[popover]::backdrop{display:none}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => SmzTooltipDirective), selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i0.forwardRef(() => SmzAutoFocusDirective), selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogFooter), selector: "[pDynamicDialogFooter]" }, { kind: "pipe", type: i0.forwardRef(() => SafeHtmlPipe$1), name: "safeHtml" }], animations: [
             trigger('animation', [
                 transition('void => visible', [
                     useAnimation(showAnimation)
@@ -8509,68 +8528,68 @@ class DynamicDialogComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-dynamicDialog', template: `
-
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
-}
-<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
-  @if (visible) {
-    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
-      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
-      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
-      [style.width]="config.width" [style.height]="config.height">
-      @if (config.showHeader === false ? false: true) {
-        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
-          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
-          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
-            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
-              @if (topbarButton.visible) {
-                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
-                  <span [ngClass]="topbarButton.class"></span>
-                </button>
-              }
-            }
-            @if (config.minimizable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
-                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
-              </button>
-            }
-            @if (config.maximizable !== false && !maximized) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
-              </button>
-            }
-            @if (maximized && !config.blockRestoreButton) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
-              </button>
-            }
-            @if (config.closable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
-                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
-              </button>
-            }
-          </div>
-        </div>
-      }
-      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
-        <ng-template pDynamicDialogContent></ng-template>
-      </div>
-      @if (config.footer) {
-        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
-          <ng-template pDynamicDialogFooter></ng-template>
-        </div>
-      }
-    </div>
-  }
-</div>
+            args: [{ selector: 'smz-dynamicDialog', template: `
+
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
+}
+<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
+  @if (visible) {
+    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
+      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
+      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
+      [style.width]="config.width" [style.height]="config.height">
+      @if (config.showHeader === false ? false: true) {
+        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
+          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
+          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
+            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
+              @if (topbarButton.visible) {
+                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
+                  <span [ngClass]="topbarButton.class"></span>
+                </button>
+              }
+            }
+            @if (config.minimizable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
+                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
+              </button>
+            }
+            @if (config.maximizable !== false && !maximized) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
+              </button>
+            }
+            @if (maximized && !config.blockRestoreButton) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
+              </button>
+            }
+            @if (config.closable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
+                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
+              </button>
+            }
+          </div>
+        </div>
+      }
+      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
+        <ng-template pDynamicDialogContent></ng-template>
+      </div>
+      @if (config.footer) {
+        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
+          <ng-template pDynamicDialogFooter></ng-template>
+        </div>
+      }
+    </div>
+  }
+</div>
 `, animations: [
                         trigger('animation', [
                             transition('void => visible', [
@@ -8582,7 +8601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         ])
                     ], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'p-element'
-                    }, standalone: false, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}\n"] }]
+                    }, standalone: false, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}.p-dialog-mask[popover]{margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;inset:0;max-width:none;max-height:none;width:100%;height:100%}.p-dialog-mask[popover]::backdrop{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: DynamicDialogConfig }, { type: DynamicDialogRef }, { type: i0.NgZone }, { type: SmzDynamicDialogConfig }, { type: SmzDockService }], propDecorators: { insertionPoint: [{
                 type: ViewChild,
                 args: [DynamicDialogContent]
@@ -8822,7 +8841,35 @@ class DialogFooterComponent {
         this.actions$ = actions$;
         this.store = store;
     }
+    ngZone = inject(NgZone);
     ngOnInit() {
+        this.watchValidity();
+    }
+    /**
+     * `isValid` dos componentes injetados e um campo comum (nao signal): sem zone.js (zoneless) mudar `instance.isValid`
+     * nao agenda deteccao de mudancas, e o `[disabled]` dos botoes `dependsOnValidation` ficava defasado ate a proxima
+     * interacao. Enquanto houver botao que depende de validacao, a validade e amostrada e o footer e marcado quando muda.
+     */
+    watchValidity() {
+        const context = this.dialogConfig.data?._context;
+        const dependsOnValidation = (context?.customButtons ?? []).some((button) => button.dependsOnValidation)
+            || context?.builtInButtons?.confirmDependsOnValidation
+            || context?.builtInButtons?.okDependsOnValidation
+            || context?.builtInButtons?.saveDependsOnValidation;
+        if (!dependsOnValidation) {
+            return;
+        }
+        let last = this.isValid();
+        this.ngZone.runOutsideAngular(() => {
+            const handle = setInterval(() => {
+                const current = this.isValid();
+                if (current !== last) {
+                    last = current;
+                    this.ngZone.run(() => this.cdf.markForCheck());
+                }
+            }, 150);
+            this.destroyRef.onDestroy(() => clearInterval(handle));
+        });
     }
     buildDialogTestId(suffix) {
         return buildSmzDialogTestId(this.dialogConfig.data?.dialogTestId, suffix);
@@ -9177,11 +9224,11 @@ class DialogFooterComponent {
         return response;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogFooterComponent, deps: [{ token: DynamicDialogRef }, { token: SmzDynamicDialogConfig }, { token: SmzDialogsVisibilityService }, { token: InjectComponentService }, { token: i0.ChangeDetectorRef }, { token: i1$3.Actions }, { token: i1$3.Store }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogFooterComponent, isStandalone: false, selector: "smz-dialog-footer", ngImport: i0, template: "@if (dialogConfig.data._context; as context) {\r\n  <ui-toolbar class=\"smz-dialog-footer\">\r\n    <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n      @if (context.customButtonsOrder == null || context.customButtonsOrder === 'first') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n      @if (context.behaviors.showCancelButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('cancel')\" [label]=\"context.builtInButtons.cancelName\" [styleClass]=\"context.builtInButtons.cancelClass\" (click)=\"close()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showConfirmButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('confirm')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.confirmName\" [styleClass]=\"context.builtInButtons.confirmClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"confirm()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showOkButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('ok')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.okName\" [styleClass]=\"context.builtInButtons.okClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"ok()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showSaveButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('save')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.saveName\" [styleClass]=\"context.builtInButtons.saveClass\" [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\" [disabled]=\"context.isGlobalDisabled\" (click)=\"save()\">\r\n        </button>\r\n      }\r\n      @if (context.customButtonsOrder === 'last') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          <!-- DependsOnValidation -->\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </ui-toolbar>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => i2.SmzButtonComponent), selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i0.forwardRef(() => i2.SmzToolbarComponent), selector: "ui-toolbar" }, { kind: "directive", type: i0.forwardRef(() => i2.SmzTooltipDirective), selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i0.forwardRef(() => ConfirmOnEnterDirective), selector: "[confirmOnEnter]", inputs: ["confirmOnEnter", "clickEvent", "delayConfirmation", "disabled", "dialogId"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogFooterComponent, isStandalone: false, selector: "smz-dialog-footer", ngImport: i0, template: "@if (dialogConfig.data._context; as context) {\r\n  <ui-toolbar class=\"smz-dialog-footer\">\r\n    <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n      @if (context.customButtonsOrder == null || context.customButtonsOrder === 'first') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n      @if (context.behaviors.showCancelButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('cancel')\" [label]=\"context.builtInButtons.cancelName\" [styleClass]=\"context.builtInButtons.cancelClass\" (click)=\"close()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showConfirmButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('confirm')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.confirmName\" [styleClass]=\"context.builtInButtons.confirmClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"confirm()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showOkButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('ok')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.okName\" [styleClass]=\"context.builtInButtons.okClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"ok()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showSaveButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('save')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.saveName\" [styleClass]=\"context.builtInButtons.saveClass\" [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\" [disabled]=\"context.isGlobalDisabled\" (click)=\"save()\">\r\n        </button>\r\n      }\r\n      @if (context.customButtonsOrder === 'last') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          <!-- DependsOnValidation -->\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </ui-toolbar>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i0.forwardRef(() => i2.SmzButtonComponent), selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i0.forwardRef(() => i2.SmzToolbarComponent), selector: "ui-toolbar" }, { kind: "directive", type: i0.forwardRef(() => i2.SmzTooltipDirective), selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i0.forwardRef(() => ConfirmOnEnterDirective), selector: "[confirmOnEnter]", inputs: ["confirmOnEnter", "clickEvent", "delayConfirmation", "disabled", "dialogId"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-dialog-footer', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (dialogConfig.data._context; as context) {\r\n  <ui-toolbar class=\"smz-dialog-footer\">\r\n    <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n      @if (context.customButtonsOrder == null || context.customButtonsOrder === 'first') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n      @if (context.behaviors.showCancelButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('cancel')\" [label]=\"context.builtInButtons.cancelName\" [styleClass]=\"context.builtInButtons.cancelClass\" (click)=\"close()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showConfirmButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('confirm')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.confirmName\" [styleClass]=\"context.builtInButtons.confirmClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"confirm()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showOkButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('ok')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.okName\" [styleClass]=\"context.builtInButtons.okClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"ok()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showSaveButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('save')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.saveName\" [styleClass]=\"context.builtInButtons.saveClass\" [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\" [disabled]=\"context.isGlobalDisabled\" (click)=\"save()\">\r\n        </button>\r\n      }\r\n      @if (context.customButtonsOrder === 'last') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          <!-- DependsOnValidation -->\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </ui-toolbar>\r\n}\r\n" }]
+            args: [{ selector: 'smz-dialog-footer', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (dialogConfig.data._context; as context) {\r\n  <ui-toolbar class=\"smz-dialog-footer\">\r\n    <div class=\"grid grid-nogutter items-center justify-end gap-2\">\r\n      @if (context.customButtonsOrder == null || context.customButtonsOrder === 'first') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n      @if (context.behaviors.showCancelButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('cancel')\" [label]=\"context.builtInButtons.cancelName\" [styleClass]=\"context.builtInButtons.cancelClass\" (click)=\"close()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showConfirmButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('confirm')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.confirmName\" [styleClass]=\"context.builtInButtons.confirmClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"confirm()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showOkButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('ok')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.okName\" [styleClass]=\"context.builtInButtons.okClass\" [disabled]=\"context.isGlobalDisabled\" (click)=\"ok()\">\r\n        </button>\r\n      }\r\n      <!-- DependsOnValidation -->\r\n      @if (context.behaviors.showSaveButton) {\r\n        <button smzButton [attr.data-testid]=\"buildDialogTestId('save')\" [confirmOnEnter]=\"context.isLoading ? false : context.behaviors.confirmOnEnter\" [dialogId]=\"context.id\" [label]=\"context.builtInButtons.saveName\" [styleClass]=\"context.builtInButtons.saveClass\" [icon]=\"context.isLoading ? 'fa-solid fa-spinner fa-spin' : ''\" [disabled]=\"context.isGlobalDisabled\" (click)=\"save()\">\r\n        </button>\r\n      }\r\n      @if (context.customButtonsOrder === 'last') {\r\n        @for (customButton of context.customButtons; track customButton) {\r\n          <!-- DependsOnValidation -->\r\n          @if (customButton.visible == null || customButton.visible) {\r\n            <button smzButton [attr.data-testid]=\"buildCustomButtonTestId(customButton)\" [label]=\"customButton.name\" [styleClass]=\"customButton.class\" [disabled]=\"context.isGlobalDisabled || customButton.dependsOnValidation && !isValid() || customButton.disabled\" [smzTooltip]=\"customButton.tooltip\" tooltipPosition=\"top\" (click)=\"customClick(customButton)\">\r\n            </button>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </ui-toolbar>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: DynamicDialogRef }, { type: SmzDynamicDialogConfig }, { type: SmzDialogsVisibilityService }, { type: InjectComponentService }, { type: i0.ChangeDetectorRef }, { type: i1$3.Actions }, { type: i1$3.Store }] });
 class ConfirmOnEnterDirective {
     el;
@@ -17448,7 +17495,7 @@ class ColumnFilterFormElement {
             }
           }
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => SmzInputTextDirective), selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i0.forwardRef(() => SmzCheckboxComponent), selector: "ui-checkbox", inputs: ["label", "inputId", "value", "binary", "name"], outputs: ["changed"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => SmzDatePickerComponent), selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "component", type: i0.forwardRef(() => SmzInputNumberComponent), selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId"], outputs: ["inputed", "keyDown", "blurred", "focused"] }], encapsulation: i0.ViewEncapsulation.None });
+        `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => SmzInputTextDirective), selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i0.forwardRef(() => SmzCheckboxComponent), selector: "ui-checkbox", inputs: ["label", "inputId", "value", "binary", "name"], outputs: ["changed"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => SmzDatePickerComponent), selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "component", type: i0.forwardRef(() => SmzInputNumberComponent), selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId", "name"], outputs: ["inputed", "keyDown", "blurred", "focused"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
@@ -21906,6 +21953,8 @@ class SmzTableComponent {
         return this.buildTableTestId();
     }
     selectionChange = new EventEmitter();
+    /** Validade da tabela (selecao obrigatoria). O `state` pode ser substituido por uma copia internamente, entao a validade tambem sai por aqui. */
+    validChange = new EventEmitter();
     filterChange = new EventEmitter();
     columnVisibilityChange = new EventEmitter();
     create = new EventEmitter();
@@ -22497,6 +22546,7 @@ class SmzTableComponent {
         }
         if (this.state.caption.rowSelection.validationMode === 'required') {
             this.state.isValid = event.length > 0;
+            this.validChange.emit(this.state.isValid);
         }
     }
     onFilter(event) {
@@ -22559,11 +22609,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$3.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" }, host: { properties: { "attr.data-testid": "this.hostTestId" } }, providers: [TableEditableService, TableFormsService], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], 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) {\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) {\n    <smz-data-info\n      [attr.data-testid]=\"buildTableTestId('empty')\"\n      [image]=\"context.state.emptyFeedback.image\"\n      [message]=\"context.state.emptyFeedback.message\"\n      [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\n      [actions]=\"context.state.emptyFeedback.actionButtons\">\n      <ng-template smzTemplate=\"actions\">\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\n      </ng-template>\n    </smz-data-info>\n  } @else {\n    <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\n      <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\n        @if (((observableSource ?? signalSource ?? items) | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize); as clonedData) {\n          <p-table #dt\n            dataKey=\"id\"\n            editMode=\"row\"\n            [stripedRows]=\"context.state.styles.striped\"\n            [value]=\"clonedData.items\"\n            [(selection)]=\"selectedItems\"\n            [tableStyleClass]=\"context.state.styles.tableStyleClass\"\n            [size]=\"context.state.styles.size === 'extra-small' ? 'small' : context.state.styles.size === 'small' ? 'small' : context.state.styles.size === 'large' ? 'large' : undefined\"\n            [class]=\"'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' : '')\"\n            [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\n            [rows]=\"context.state.pagination.rows\"\n            [first]=\"context.state.pagination.state.first\"\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\n            [loading]=\"loading || isViewportInitializing\"\n            [style.visibility]=\"isViewportInitializing ? 'hidden' : null\"\n            [paginator]=\"context.state.pagination.isVisible\"\n            paginatorDropdownAppendTo=\"body\"\n            [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\n            [sortField]=\"context.state.sort.field\"\n            [sortMode]=\"context.state.sort.mode\"\n            [sortOrder]=\"context.state.sort.order\"\n            [multiSortMeta]=\"context.state.sort.multiSortMeta\"\n            [scrollable]=\"context.state.viewport.scrollable\"\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\n            [filterDelay]=\"0\"\n            [globalFilterFields]=\"context.globalFilter\"\n            [columns]=\"context.visibleColumns\"\n            [frozenColumns]=\"context.frozenColumns\"\n            [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\n            [resizableColumns]=\"context.state.viewport.resizableColumns\"\n            [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\n            (onPage)=\"onPage($event)\"\n            (onFilter)=\"onFilter($event)\"\n            (selectionChange)=\"emitSelection($event)\"\n            >\n            @if (context.state.caption.isVisible) {\n              <ng-template smzTemplate=\"caption\">\n                <div class=\"grid grid-nogutter items-center gap-2\" [attr.data-testid]=\"buildTableTestId('caption')\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n                  @if (context.state.caption.title != null) {\n                    <div class=\"col database-title\" [attr.data-testid]=\"buildTableTestId('title')\" [innerHTML]=\"context.state.caption.title\"></div>\n                  }\n                  <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\n                  <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\" [tableTestId]=\"state.tableTestId\"></smz-table-caption-buttons>\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-pdf')\" [label]=\"context.state.locale.exportToPdf.label\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-excel')\" [label]=\"context.state.locale.exportToExcel.label\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.editable.creation.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('create')\" [label]=\"context.state.editable.creation.buttonLabel\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-selection')\" [label]=\"context.state.locale.rowSelection.label\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.rowExpansion.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-expansion')\" [label]=\"context.state.rowExpansion.label\" icon=\"fa-solid fa-list\" (click)=\"onRowExpansion(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('clear-filters')\" [label]=\"context.state.locale.clearFilters.label\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\n                    <ui-multi-select #columnMultiselect [attr.data-testid]=\"buildTableTestId('column-visibility')\" class=\"ml-2 col-12 md:col-2\" styleClass=\"w-full\" appendTo=\"body\" [options]=\"context.hideableColumns\" [(ngModel)]=\"selectedColumns\" [placeholder]=\"context.state.locale.columnVisibility.placeholder\" [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\" optionLabel=\"name\" dataKey=\"field\" optionLabel=\"header\" [filter]=\"true\" (panelHide)=\"updateColumnsVisibility(true)\" [smzTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\n                    </ui-multi-select>\n                  }\n                  @if (context.state.caption.globalFilter.isVisible) {\n                    <ui-icon-field class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\n                      <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\n                      <input #inputGlobal [(ngModel)]=\"globalSearchInput\" smzInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" [attr.data-testid]=\"buildTableTestId('search')\" />\n                    </ui-icon-field>\n                  }\n                </div>\n                @if (toolbarTemplate != null) {\n                  <div class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\n                  </div>\n                }\n              </ng-template>\n            }\n            <ng-template smzTemplate=\"header\" let-columns>\n              <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\n                @if (context.state.caption.rowSelection.isEnabled) {\n                  <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\n                    @if (!context.state.actions.batchActions.isVisible) {\n                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                    }\n                  </th>\n                }\n                @if (context.state.rowExpansion.isEnabled) {\n                  <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\n                }\n                @for (col of columns; track col.field) {\n                  @if (context.state.viewport.resizableColumns) {\n                    @if (col.isOrderable) {\n                      <th [pSortableColumn]=\"col.sortField\" pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                    @if (!col.isOrderable) {\n                      <th pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                  } @else {\n                    @if (col.isOrderable) {\n                      <th [pSortableColumn]=\"col.sortField\" [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                    @if (!col.isOrderable) {\n                      <th [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                  }\n                  <ng-template #headerContent>\n                    <div class=\"flex justify-start items-center\">\n                      <span class=\"mr-1\">{{ col.header }}</span>\n                      @if (col.showHeaderActions) {\n                        <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\n                      }\n                      @if (!clonedData.showSkeleton && col.isOrderable) {\n                        <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\n                      }\n                      @if (!clonedData.showSkeleton) {\n                        @switch (col.filter.type) {\n                          @case (filterTypes.currency) {\n                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.numeric) {\n                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.date) {\n                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\n                          }\n                          @case (filterTypes.text) {\n                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.boolean) {\n                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.dropdown) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                          @case (filterTypes.multiselect) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-multi-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                          @case (filterTypes.multiselect_array) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                          @case (filterTypes.multiselect_string) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                        }\n                      }\n                      @if (context.state.caption.columnVisibility.showColumnHideButton) {\n                        <button smzButton type=\"button\" icon=\"fa-solid fa-eye-slash\" (click)=\"hideColumn(col, context)\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n                      }\n                    </div>\n                  </ng-template>\n                }\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\n                  <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\n                }\n              </tr>\n              @if (context.state.actions.batchActions.isVisible) {\n                <tr>\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)\"\n                    [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n                    <div class=\"grid grid-nogutter items-center justify-start\">\n                      <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\n                      @if (selectedItems?.length > 0) {\n                        @for (batchItem of context.state.actions.batchActions.items; track batchItem.label) {\n                          @if (batchItem.visible) {\n                            <button smzButton [label]=\"batchItem.label\" class=\"animate__animated animate__fadeIn\" [styleClass]=\"'p-button-plain ' + (batchItem.styleClass)\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [smzTooltip]=\"batchItem.tooltip\" [rounded]=\"true\" variant=\"text\"></button>\n                          }\n                        }\n                      }\n                    </div>\n                  </th>\n                </tr>\n              }\n            </ng-template>\n            <ng-template smzTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\n              <tr #editableRowElement\n                [pEditableRow]=\"item\"\n                tableItemAction\n                [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\n                [callback]=\"context.state.actions.rowBehavior.clickCallback\"\n                [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\n                [item]=\"item\"\n                class=\"p-selectable-row\"\n                [attr.data-testid]=\"buildRowTestId(item, rowIndex)\"\n                [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\n                >\n                @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\n                  <td\n                    clickStopPropagation\n                    class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\n                    [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\n                    [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\n                    >\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                  </td>\n                }\n                @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\n                  <td\n                    clickStopPropagation\n                    class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\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 }\"\n                    [ngStyle]=\"context.state.rowExpansion.ngStyle\"\n                    >\n                    <button smzButton type=\"button\" class=\"smz-table-row-expansion-toggle\" [icon]=\"item._isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\" (click)=\"item._isExpanded = !item._isExpanded; item._isNew = false\" variant=\"text\" [rounded]=\"true\" size=\"sm\"></button>\n                    @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\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>\n                    }\n                  </td>\n                }\n                @for (col of columns; track col.field) {\n                  @if (clonedData.showSkeleton) {\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton></td>\n                  } @else {\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [attr.data-testid]=\"buildCellTestId(item, rowIndex, col.field)\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\n                      <span class=\"p-column-title\">{{ col.header }}</span>\n                      <p-cellEditor>\n                        <!-- CELULAR COM EDITOR -->\n                        <ng-template smzTemplate=\"input\">\n                          @switch (col.editable.type) {\n                            @case (editableTypes.none) {\n                              <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\n                            }\n                            @case (editableTypes.custom) {\n                              <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\n                            }\n                            <!-- INPUT TEXT -->\n                            @case (editableTypes.text) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <input smzInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT NUMBER -->\n                            @case (editableTypes.number) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-input-number *ngVar=\"col.editable.data as numberData\" [formControl]=\"$any(control)\" [mode]=\"numberData.mode\" [minFractionDigits]=\"numberData.minFractionDigits\" [maxFractionDigits]=\"numberData.maxFractionDigits\" [currency]=\"numberData.currency\" [useGrouping]=\"numberData.useGrouping\" [allowEmpty]=\"numberData.allowEmpty\" [showClear]=\"numberData.showClear\" [showButtons]=\"numberData.showButtons\" [prefix]=\"numberData.prefix\" [suffix]=\"numberData.suffix\">\n                                    </ui-input-number>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT SWITCH -->\n                            @case (editableTypes.switch) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-toggle-switch [formControl]=\"$any(control)\"></ui-toggle-switch>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT TEXT AREA -->\n                            @case (editableTypes.area) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <textarea smzTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT DROPDOWN -->\n                            @case (editableTypes.dropdown) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-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\"></ui-select>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT CALENDAR -->\n                            @case (editableTypes.calendar) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-date-picker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></ui-date-picker>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                          }\n                        </ng-template>\n                        <!-- CELULAR COM CONTE\u00DADO -->\n                        <ng-template smzTemplate=\"output\">\n                          <smz-table-content\n                            [col]=\"col\"\n                            [smzTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\n                            tooltipPosition=\"left\"\n                            [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\n                          </smz-table-content>\n                        </ng-template>\n                      </p-cellEditor>\n                    </td>\n                  }\n                }\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\n                  <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n                    <div class=\"grid grid-nogutter items-center justify-center\">\n                      @if (clonedData.showSkeleton) {\n                        <div class=\"w-full\">\n                          <ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton>\n                        </div>\n                      } @else {\n                        <!-- SEM EDITAR -->\n                        @if (!editing) {\n                          @if (context.state.editable.update.isButtonVisible) {\n                            <button smzButton type=\"button\" icon=\"fa-solid fa-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow [rounded]=\"true\" variant=\"text\"></button>\n                          }\n                          @if (context.state.editable.remove.isButtonVisible) {\n                            <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\"></button>\n                          }\n                        }\n                        <!-- EDITANDO -->\n                        @if (editing) {\n                          @if (editableService.context[item.id]; as editableContext) {\n                            <!-- COM LOADING -->\n                            @if (editableContext.isLoading) {\n                              <button smzButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-info\"></button>\n                            }\n                            <!-- SEM LOADING -->\n                            @if (!editableContext.isLoading) {\n                              <!-- EDITANDO -->\n                              @if (!editableContext.hasErrors) {\n                                <!-- CRIANDO -->\n                                @if (item._context?.isCreating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                                <!-- ATUALIZANDO -->\n                                @if (item._context?.isUpdating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                              }\n                              <!-- COM ERRORS -->\n                              @if (editableContext.hasErrors) {\n                                <ui-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\n                                  <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\n                                </ui-popover>\n                                <button smzButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"mr-2\" (click)=\"errorsOverlay.toggle($event)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                <!-- CRIANDO -->\n                                @if (item._context?.isCreating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                                <!-- ATUALIZANDO -->\n                                @if (item._context?.isUpdating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                              }\n                            }\n                          }\n                        }\n                        <!-- CUSTOM MENU -->\n                        @if (context.state.actions.customActions.isVisible && !editing) {\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\n                        }\n                        <!-- MENU -->\n                        @if (context.state.actions.menu.isVisible && !editing) {\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\" [testId]=\"buildRowMenuTestId(item, rowIndex)\"></smz-menu>\n                        }\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n              @if (item?._isExpanded) {\n                <tr>\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)\">\n                    <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\n                  </td>\n                </tr>\n              }\n            </ng-template>\n            <ng-template smzTemplate=\"emptymessage\" let-columns>\n              <tr>\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' }\">\n                  <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\n                  @if (context.state.caption.clearFilters.isButtonVisible && hasFilters()) {\n                    <button smzButton [label]=\"context.state.locale.clearFilters.label\" class=\"mt-3\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" variant=\"outlined\"></button>\n                  }\n                </td>\n              </tr>\n            </ng-template>\n          </p-table>\n        }\n      </ng-container>\n    </ng-container>\n  }\n} @else {\n  @if (emptyStateTemplate != null) {\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\n  }\n}\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "stripedRows", "size", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: CellEditor, selector: "p-cellEditor" }, { kind: "component", type: SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzMultiSelectComponent, selector: "ui-multi-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "showToggleAll", "emptyMessage", "emptyFilterMessage", "maxSelectedLabels", "selectedItemsLabel", "panelStyle", "styleClass", "inputId", "autofocusFilter", "appendTo", "display"], outputs: ["changed", "panelHide", "panelShow"] }, { kind: "component", type: i2.SmzSelectComponent, selector: "ui-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "emptyMessage", "emptyFilterMessage", "styleClass", "inputId", "ariaLabel", "appendTo"], outputs: ["changed", "showed", "hidden"] }, { kind: "component", type: i2.SmzDatePickerComponent, selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableItemActionsDirective, selector: "[tableItemAction]", inputs: ["isClickable", "item", "callback", "expandRowOnClick"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSkeletonComponent, selector: "ui-skeleton", inputs: ["shape", "width", "height"] }, { kind: "directive", type: i2.SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid", "autoResize"] }, { kind: "component", type: i2.SmzPopoverComponent, selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.SmzToggleSwitchComponent, selector: "ui-toggle-switch", inputs: ["name"], outputs: ["changed"] }, { kind: "component", type: i2.SmzInputNumberComponent, selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId"], outputs: ["inputed", "keyDown", "blurred", "focused"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior", "testId"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzIconFieldComponent, selector: "ui-icon-field" }, { kind: "component", type: i2.SmzInputIconComponent, selector: "ui-input-icon", inputs: ["styleClass"] }, { kind: "component", type: SmzColumnFilterComponent, selector: "smz-column-filter", inputs: ["currency", "display", "field", "matchMode", "showAddButton", "showMatchModes", "showOperator", "showApplyButton", "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", "tableTestId"] }, { kind: "component", type: SmzTableHeaderActionsComponent, selector: "smz-table-header-actions", inputs: ["col"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UniqueFilterPipe, name: "uniqueFilter" }, { kind: "pipe", type: SmzTableContextPipe, name: "tableContext" }, { kind: "pipe", type: SmzFilterObjectPipe, name: "filterObject" }, { kind: "pipe", type: SmzCloneTableItemsPipe, name: "cloneTableItems" }, { kind: "pipe", type: SmzEditableSourcePipe, name: "editableSource" }, { kind: "pipe", type: SmzContentErrorsPipe, name: "contentErrors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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", validChange: "validChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange", create: "create", update: "update", delete: "delete" }, host: { properties: { "attr.data-testid": "this.hostTestId" } }, providers: [TableEditableService, TableFormsService], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], 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      [attr.data-testid]=\"buildTableTestId('empty')\"\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 smzTemplate=\"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            [size]=\"context.state.styles.size === 'extra-small' ? 'small' : context.state.styles.size === 'small' ? 'small' : context.state.styles.size === 'large' ? 'large' : undefined\"\r\n            [class]=\"'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            [first]=\"context.state.pagination.state.first\"\r\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\r\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\r\n            [loading]=\"loading || isViewportInitializing\"\r\n            [style.visibility]=\"isViewportInitializing ? 'hidden' : null\"\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 smzTemplate=\"caption\">\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [attr.data-testid]=\"buildTableTestId('caption')\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                  @if (context.state.caption.title != null) {\r\n                    <div class=\"col database-title\" [attr.data-testid]=\"buildTableTestId('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\" [tableTestId]=\"state.tableTestId\"></smz-table-caption-buttons>\r\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-pdf')\" [label]=\"context.state.locale.exportToPdf.label\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-excel')\" [label]=\"context.state.locale.exportToExcel.label\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.editable.creation.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('create')\" [label]=\"context.state.editable.creation.buttonLabel\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-selection')\" [label]=\"context.state.locale.rowSelection.label\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.rowExpansion.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-expansion')\" [label]=\"context.state.rowExpansion.label\" icon=\"fa-solid fa-list\" (click)=\"onRowExpansion(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('clear-filters')\" [label]=\"context.state.locale.clearFilters.label\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\r\n                    <ui-multi-select #columnMultiselect [attr.data-testid]=\"buildTableTestId('column-visibility')\" class=\"ml-2 col-12 md:col-2\" styleClass=\"w-full\" appendTo=\"body\" [options]=\"context.hideableColumns\" [(ngModel)]=\"selectedColumns\" [placeholder]=\"context.state.locale.columnVisibility.placeholder\" [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\" optionLabel=\"name\" dataKey=\"field\" optionLabel=\"header\" [filter]=\"true\" (panelHide)=\"updateColumnsVisibility(true)\" [smzTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\r\n                    </ui-multi-select>\r\n                  }\r\n                  @if (context.state.caption.globalFilter.isVisible) {\r\n                    <ui-icon-field class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\r\n                      <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\r\n                      <input #inputGlobal [(ngModel)]=\"globalSearchInput\" smzInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" [attr.data-testid]=\"buildTableTestId('search')\" />\r\n                    </ui-icon-field>\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 smzTemplate=\"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.field) {\r\n                  @if (context.state.viewport.resizableColumns) {\r\n                    @if (col.isOrderable) {\r\n                      <th [pSortableColumn]=\"col.sortField\" pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [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 [attr.data-testid]=\"buildColumnTestId(col.field)\" [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\" [attr.data-testid]=\"buildColumnTestId(col.field)\" [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 [attr.data-testid]=\"buildColumnTestId(col.field)\" [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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-multi-select>\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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\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 smzButton type=\"button\" icon=\"fa-solid fa-eye-slash\" (click)=\"hideColumn(col, context)\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></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.label) {\r\n                          @if (batchItem.visible) {\r\n                            <button smzButton [label]=\"batchItem.label\" class=\"animate__animated animate__fadeIn\" [styleClass]=\"'p-button-plain ' + (batchItem.styleClass)\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [smzTooltip]=\"batchItem.tooltip\" [rounded]=\"true\" variant=\"text\"></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 smzTemplate=\"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                [attr.data-testid]=\"buildRowTestId(item, rowIndex)\"\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                    <button smzButton type=\"button\" class=\"smz-table-row-expansion-toggle\" [icon]=\"item._isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\" (click)=\"item._isExpanded = !item._isExpanded; item._isNew = false\" variant=\"text\" [rounded]=\"true\" size=\"sm\"></button>\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.field) {\r\n                  @if (clonedData.showSkeleton) {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton></td>\r\n                  } @else {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [attr.data-testid]=\"buildCellTestId(item, rowIndex, col.field)\" [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 smzTemplate=\"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 smzInputText 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                                    <ui-input-number *ngVar=\"col.editable.data as numberData\" [formControl]=\"$any(control)\" [mode]=\"numberData.mode\" [minFractionDigits]=\"numberData.minFractionDigits\" [maxFractionDigits]=\"numberData.maxFractionDigits\" [currency]=\"numberData.currency\" [useGrouping]=\"numberData.useGrouping\" [allowEmpty]=\"numberData.allowEmpty\" [showClear]=\"numberData.showClear\" [showButtons]=\"numberData.showButtons\" [prefix]=\"numberData.prefix\" [suffix]=\"numberData.suffix\">\r\n                                    </ui-input-number>\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                                    <ui-toggle-switch [formControl]=\"$any(control)\"></ui-toggle-switch>\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 smzTextarea 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                                    <ui-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\"></ui-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                                    <ui-date-picker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></ui-date-picker>\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 smzTemplate=\"output\">\r\n                          <smz-table-content\r\n                            [col]=\"col\"\r\n                            [smzTooltip]=\"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                          <ui-skeleton width=\"100%\" height=\"1rem\"></ui-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 smzButton type=\"button\" icon=\"fa-solid fa-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow [rounded]=\"true\" variant=\"text\"></button>\r\n                          }\r\n                          @if (context.state.editable.remove.isButtonVisible) {\r\n                            <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\"></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 smzButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-info\"></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 smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (item._context?.isUpdating) {\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                }\r\n                              }\r\n                              <!-- COM ERRORS -->\r\n                              @if (editableContext.hasErrors) {\r\n                                <ui-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                  <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                </ui-popover>\r\n                                <button smzButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"mr-2\" (click)=\"errorsOverlay.toggle($event)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                <!-- CRIANDO -->\r\n                                @if (item._context?.isCreating) {\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (item._context?.isUpdating) {\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"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\" [testId]=\"buildRowMenuTestId(item, rowIndex)\"></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 smzTemplate=\"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 smzButton [label]=\"context.state.locale.clearFilters.label\" class=\"mt-3\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" variant=\"outlined\"></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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "stripedRows", "size", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: CellEditor, selector: "p-cellEditor" }, { kind: "component", type: SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzMultiSelectComponent, selector: "ui-multi-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "showToggleAll", "emptyMessage", "emptyFilterMessage", "maxSelectedLabels", "selectedItemsLabel", "panelStyle", "styleClass", "inputId", "autofocusFilter", "appendTo", "display"], outputs: ["changed", "panelHide", "panelShow"] }, { kind: "component", type: i2.SmzSelectComponent, selector: "ui-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "emptyMessage", "emptyFilterMessage", "styleClass", "inputId", "ariaLabel", "appendTo"], outputs: ["changed", "showed", "hidden"] }, { kind: "component", type: i2.SmzDatePickerComponent, selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableItemActionsDirective, selector: "[tableItemAction]", inputs: ["isClickable", "item", "callback", "expandRowOnClick"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSkeletonComponent, selector: "ui-skeleton", inputs: ["shape", "width", "height"] }, { kind: "directive", type: i2.SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid", "autoResize"] }, { kind: "component", type: i2.SmzPopoverComponent, selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.SmzToggleSwitchComponent, selector: "ui-toggle-switch", inputs: ["name"], outputs: ["changed"] }, { kind: "component", type: i2.SmzInputNumberComponent, selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId", "name"], outputs: ["inputed", "keyDown", "blurred", "focused"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior", "testId"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzIconFieldComponent, selector: "ui-icon-field" }, { kind: "component", type: i2.SmzInputIconComponent, selector: "ui-input-icon", inputs: ["styleClass"] }, { kind: "component", type: SmzColumnFilterComponent, selector: "smz-column-filter", inputs: ["currency", "display", "field", "matchMode", "showAddButton", "showMatchModes", "showOperator", "showApplyButton", "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", "tableTestId"] }, { kind: "component", type: SmzTableHeaderActionsComponent, selector: "smz-table-header-actions", inputs: ["col"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UniqueFilterPipe, name: "uniqueFilter" }, { kind: "pipe", type: SmzTableContextPipe, name: "tableContext" }, { kind: "pipe", type: SmzFilterObjectPipe, name: "filterObject" }, { kind: "pipe", type: SmzCloneTableItemsPipe, name: "cloneTableItems" }, { kind: "pipe", type: SmzEditableSourcePipe, name: "editableSource" }, { kind: "pipe", type: SmzContentErrorsPipe, name: "contentErrors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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) {\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) {\n    <smz-data-info\n      [attr.data-testid]=\"buildTableTestId('empty')\"\n      [image]=\"context.state.emptyFeedback.image\"\n      [message]=\"context.state.emptyFeedback.message\"\n      [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\n      [actions]=\"context.state.emptyFeedback.actionButtons\">\n      <ng-template smzTemplate=\"actions\">\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\n      </ng-template>\n    </smz-data-info>\n  } @else {\n    <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\n      <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\n        @if (((observableSource ?? signalSource ?? items) | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize); as clonedData) {\n          <p-table #dt\n            dataKey=\"id\"\n            editMode=\"row\"\n            [stripedRows]=\"context.state.styles.striped\"\n            [value]=\"clonedData.items\"\n            [(selection)]=\"selectedItems\"\n            [tableStyleClass]=\"context.state.styles.tableStyleClass\"\n            [size]=\"context.state.styles.size === 'extra-small' ? 'small' : context.state.styles.size === 'small' ? 'small' : context.state.styles.size === 'large' ? 'large' : undefined\"\n            [class]=\"'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' : '')\"\n            [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\n            [rows]=\"context.state.pagination.rows\"\n            [first]=\"context.state.pagination.state.first\"\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\n            [loading]=\"loading || isViewportInitializing\"\n            [style.visibility]=\"isViewportInitializing ? 'hidden' : null\"\n            [paginator]=\"context.state.pagination.isVisible\"\n            paginatorDropdownAppendTo=\"body\"\n            [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\n            [sortField]=\"context.state.sort.field\"\n            [sortMode]=\"context.state.sort.mode\"\n            [sortOrder]=\"context.state.sort.order\"\n            [multiSortMeta]=\"context.state.sort.multiSortMeta\"\n            [scrollable]=\"context.state.viewport.scrollable\"\n            [scrollHeight]=\"context.state.viewport.scrollHeight\"\n            [filterDelay]=\"0\"\n            [globalFilterFields]=\"context.globalFilter\"\n            [columns]=\"context.visibleColumns\"\n            [frozenColumns]=\"context.frozenColumns\"\n            [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\n            [resizableColumns]=\"context.state.viewport.resizableColumns\"\n            [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\n            (onPage)=\"onPage($event)\"\n            (onFilter)=\"onFilter($event)\"\n            (selectionChange)=\"emitSelection($event)\"\n            >\n            @if (context.state.caption.isVisible) {\n              <ng-template smzTemplate=\"caption\">\n                <div class=\"grid grid-nogutter items-center gap-2\" [attr.data-testid]=\"buildTableTestId('caption')\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n                  @if (context.state.caption.title != null) {\n                    <div class=\"col database-title\" [attr.data-testid]=\"buildTableTestId('title')\" [innerHTML]=\"context.state.caption.title\"></div>\n                  }\n                  <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\n                  <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\" [tableTestId]=\"state.tableTestId\"></smz-table-caption-buttons>\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-pdf')\" [label]=\"context.state.locale.exportToPdf.label\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-excel')\" [label]=\"context.state.locale.exportToExcel.label\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.editable.creation.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('create')\" [label]=\"context.state.editable.creation.buttonLabel\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-selection')\" [label]=\"context.state.locale.rowSelection.label\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.rowExpansion.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-expansion')\" [label]=\"context.state.rowExpansion.label\" icon=\"fa-solid fa-list\" (click)=\"onRowExpansion(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('clear-filters')\" [label]=\"context.state.locale.clearFilters.label\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n                  }\n                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\n                    <ui-multi-select #columnMultiselect [attr.data-testid]=\"buildTableTestId('column-visibility')\" class=\"ml-2 col-12 md:col-2\" styleClass=\"w-full\" appendTo=\"body\" [options]=\"context.hideableColumns\" [(ngModel)]=\"selectedColumns\" [placeholder]=\"context.state.locale.columnVisibility.placeholder\" [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\" optionLabel=\"name\" dataKey=\"field\" optionLabel=\"header\" [filter]=\"true\" (panelHide)=\"updateColumnsVisibility(true)\" [smzTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\n                    </ui-multi-select>\n                  }\n                  @if (context.state.caption.globalFilter.isVisible) {\n                    <ui-icon-field class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\n                      <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\n                      <input #inputGlobal [(ngModel)]=\"globalSearchInput\" smzInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" [attr.data-testid]=\"buildTableTestId('search')\" />\n                    </ui-icon-field>\n                  }\n                </div>\n                @if (toolbarTemplate != null) {\n                  <div class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\n                  </div>\n                }\n              </ng-template>\n            }\n            <ng-template smzTemplate=\"header\" let-columns>\n              <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\n                @if (context.state.caption.rowSelection.isEnabled) {\n                  <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\n                    @if (!context.state.actions.batchActions.isVisible) {\n                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                    }\n                  </th>\n                }\n                @if (context.state.rowExpansion.isEnabled) {\n                  <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\n                }\n                @for (col of columns; track col.field) {\n                  @if (context.state.viewport.resizableColumns) {\n                    @if (col.isOrderable) {\n                      <th [pSortableColumn]=\"col.sortField\" pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                    @if (!col.isOrderable) {\n                      <th pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                  } @else {\n                    @if (col.isOrderable) {\n                      <th [pSortableColumn]=\"col.sortField\" [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                    @if (!col.isOrderable) {\n                      <th [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n                      </th>\n                    }\n                  }\n                  <ng-template #headerContent>\n                    <div class=\"flex justify-start items-center\">\n                      <span class=\"mr-1\">{{ col.header }}</span>\n                      @if (col.showHeaderActions) {\n                        <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\n                      }\n                      @if (!clonedData.showSkeleton && col.isOrderable) {\n                        <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\n                      }\n                      @if (!clonedData.showSkeleton) {\n                        @switch (col.filter.type) {\n                          @case (filterTypes.currency) {\n                            <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.numeric) {\n                            <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.date) {\n                            <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\n                          }\n                          @case (filterTypes.text) {\n                            <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.boolean) {\n                            <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\n                          }\n                          @case (filterTypes.dropdown) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                          @case (filterTypes.multiselect) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-multi-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                          @case (filterTypes.multiselect_array) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                          @case (filterTypes.multiselect_string) {\n                            @if (col.filterField | filterObject; as filterField) {\n                              <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n                                <ng-template smzTemplate=\"header\">\n                                  <div class=\"px-3 pt-3 pb-0\">\n                                    <span class=\"p-text-bold\">{{ col.header }}</span>\n                                  </div>\n                                </ng-template>\n                                <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n                                </ng-template>\n                              </smz-column-filter>\n                            }\n                          }\n                        }\n                      }\n                      @if (context.state.caption.columnVisibility.showColumnHideButton) {\n                        <button smzButton type=\"button\" icon=\"fa-solid fa-eye-slash\" (click)=\"hideColumn(col, context)\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n                      }\n                    </div>\n                  </ng-template>\n                }\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\n                  <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\n                }\n              </tr>\n              @if (context.state.actions.batchActions.isVisible) {\n                <tr>\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)\"\n                    [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n                    <div class=\"grid grid-nogutter items-center justify-start\">\n                      <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\n                      @if (selectedItems?.length > 0) {\n                        @for (batchItem of context.state.actions.batchActions.items; track batchItem.label) {\n                          @if (batchItem.visible) {\n                            <button smzButton [label]=\"batchItem.label\" class=\"animate__animated animate__fadeIn\" [styleClass]=\"'p-button-plain ' + (batchItem.styleClass)\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [smzTooltip]=\"batchItem.tooltip\" [rounded]=\"true\" variant=\"text\"></button>\n                          }\n                        }\n                      }\n                    </div>\n                  </th>\n                </tr>\n              }\n            </ng-template>\n            <ng-template smzTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\n              <tr #editableRowElement\n                [pEditableRow]=\"item\"\n                tableItemAction\n                [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\n                [callback]=\"context.state.actions.rowBehavior.clickCallback\"\n                [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\n                [item]=\"item\"\n                class=\"p-selectable-row\"\n                [attr.data-testid]=\"buildRowTestId(item, rowIndex)\"\n                [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\n                >\n                @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\n                  <td\n                    clickStopPropagation\n                    class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\n                    [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\n                    [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\n                    >\n                    <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                  </td>\n                }\n                @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\n                  <td\n                    clickStopPropagation\n                    class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\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 }\"\n                    [ngStyle]=\"context.state.rowExpansion.ngStyle\"\n                    >\n                    <button smzButton type=\"button\" class=\"smz-table-row-expansion-toggle\" [icon]=\"item._isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\" (click)=\"item._isExpanded = !item._isExpanded; item._isNew = false\" variant=\"text\" [rounded]=\"true\" size=\"sm\"></button>\n                    @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\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>\n                    }\n                  </td>\n                }\n                @for (col of columns; track col.field) {\n                  @if (clonedData.showSkeleton) {\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton></td>\n                  } @else {\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [attr.data-testid]=\"buildCellTestId(item, rowIndex, col.field)\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\n                      <span class=\"p-column-title\">{{ col.header }}</span>\n                      <p-cellEditor>\n                        <!-- CELULAR COM EDITOR -->\n                        <ng-template smzTemplate=\"input\">\n                          @switch (col.editable.type) {\n                            @case (editableTypes.none) {\n                              <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\n                            }\n                            @case (editableTypes.custom) {\n                              <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\n                            }\n                            <!-- INPUT TEXT -->\n                            @case (editableTypes.text) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <input smzInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT NUMBER -->\n                            @case (editableTypes.number) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-input-number *ngVar=\"col.editable.data as numberData\" [formControl]=\"$any(control)\" [mode]=\"numberData.mode\" [minFractionDigits]=\"numberData.minFractionDigits\" [maxFractionDigits]=\"numberData.maxFractionDigits\" [currency]=\"numberData.currency\" [useGrouping]=\"numberData.useGrouping\" [allowEmpty]=\"numberData.allowEmpty\" [showClear]=\"numberData.showClear\" [showButtons]=\"numberData.showButtons\" [prefix]=\"numberData.prefix\" [suffix]=\"numberData.suffix\">\n                                    </ui-input-number>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT SWITCH -->\n                            @case (editableTypes.switch) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-toggle-switch [formControl]=\"$any(control)\"></ui-toggle-switch>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT TEXT AREA -->\n                            @case (editableTypes.area) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <textarea smzTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT DROPDOWN -->\n                            @case (editableTypes.dropdown) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-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\"></ui-select>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                            <!-- INPUT CALENDAR -->\n                            @case (editableTypes.calendar) {\n                              @if (editableService.context[item.id]?.form; as form) {\n                                @if (form.controls[col.editable.property]; as control) {\n                                  <div class=\"relative w-full\">\n                                    <ui-date-picker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></ui-date-picker>\n                                    <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n                                  </div>\n                                }\n                              }\n                            }\n                          }\n                        </ng-template>\n                        <!-- CELULAR COM CONTE\u00DADO -->\n                        <ng-template smzTemplate=\"output\">\n                          <smz-table-content\n                            [col]=\"col\"\n                            [smzTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\n                            tooltipPosition=\"left\"\n                            [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\n                          </smz-table-content>\n                        </ng-template>\n                      </p-cellEditor>\n                    </td>\n                  }\n                }\n                @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\n                  <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n                    <div class=\"grid grid-nogutter items-center justify-center\">\n                      @if (clonedData.showSkeleton) {\n                        <div class=\"w-full\">\n                          <ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton>\n                        </div>\n                      } @else {\n                        <!-- SEM EDITAR -->\n                        @if (!editing) {\n                          @if (context.state.editable.update.isButtonVisible) {\n                            <button smzButton type=\"button\" icon=\"fa-solid fa-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow [rounded]=\"true\" variant=\"text\"></button>\n                          }\n                          @if (context.state.editable.remove.isButtonVisible) {\n                            <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\"></button>\n                          }\n                        }\n                        <!-- EDITANDO -->\n                        @if (editing) {\n                          @if (editableService.context[item.id]; as editableContext) {\n                            <!-- COM LOADING -->\n                            @if (editableContext.isLoading) {\n                              <button smzButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-info\"></button>\n                            }\n                            <!-- SEM LOADING -->\n                            @if (!editableContext.isLoading) {\n                              <!-- EDITANDO -->\n                              @if (!editableContext.hasErrors) {\n                                <!-- CRIANDO -->\n                                @if (item._context?.isCreating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                                <!-- ATUALIZANDO -->\n                                @if (item._context?.isUpdating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                              }\n                              <!-- COM ERRORS -->\n                              @if (editableContext.hasErrors) {\n                                <ui-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\n                                  <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\n                                </ui-popover>\n                                <button smzButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"mr-2\" (click)=\"errorsOverlay.toggle($event)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                <!-- CRIANDO -->\n                                @if (item._context?.isCreating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                                <!-- ATUALIZANDO -->\n                                @if (item._context?.isUpdating) {\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n                                }\n                              }\n                            }\n                          }\n                        }\n                        <!-- CUSTOM MENU -->\n                        @if (context.state.actions.customActions.isVisible && !editing) {\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\n                        }\n                        <!-- MENU -->\n                        @if (context.state.actions.menu.isVisible && !editing) {\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\" [testId]=\"buildRowMenuTestId(item, rowIndex)\"></smz-menu>\n                        }\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n              @if (item?._isExpanded) {\n                <tr>\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)\">\n                    <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\n                  </td>\n                </tr>\n              }\n            </ng-template>\n            <ng-template smzTemplate=\"emptymessage\" let-columns>\n              <tr>\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' }\">\n                  <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\n                  @if (context.state.caption.clearFilters.isButtonVisible && hasFilters()) {\n                    <button smzButton [label]=\"context.state.locale.clearFilters.label\" class=\"mt-3\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" variant=\"outlined\"></button>\n                  }\n                </td>\n              </tr>\n            </ng-template>\n          </p-table>\n        }\n      </ng-container>\n    </ng-container>\n  }\n} @else {\n  @if (emptyStateTemplate != null) {\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\n  }\n}\n\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      [attr.data-testid]=\"buildTableTestId('empty')\"\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 smzTemplate=\"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            [size]=\"context.state.styles.size === 'extra-small' ? 'small' : context.state.styles.size === 'small' ? 'small' : context.state.styles.size === 'large' ? 'large' : undefined\"\r\n            [class]=\"'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            [first]=\"context.state.pagination.state.first\"\r\n            [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\r\n            [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\r\n            [loading]=\"loading || isViewportInitializing\"\r\n            [style.visibility]=\"isViewportInitializing ? 'hidden' : null\"\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 smzTemplate=\"caption\">\r\n                <div class=\"grid grid-nogutter items-center gap-2\" [attr.data-testid]=\"buildTableTestId('caption')\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\r\n                  @if (context.state.caption.title != null) {\r\n                    <div class=\"col database-title\" [attr.data-testid]=\"buildTableTestId('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\" [tableTestId]=\"state.tableTestId\"></smz-table-caption-buttons>\r\n                  @if (context.state.caption.exportToPdf.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-pdf')\" [label]=\"context.state.locale.exportToPdf.label\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.exportToExcel.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('export-excel')\" [label]=\"context.state.locale.exportToExcel.label\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.editable.creation.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('create')\" [label]=\"context.state.editable.creation.buttonLabel\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.rowSelection.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-selection')\" [label]=\"context.state.locale.rowSelection.label\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.rowExpansion.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('row-expansion')\" [label]=\"context.state.rowExpansion.label\" icon=\"fa-solid fa-list\" (click)=\"onRowExpansion(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.clearFilters.isButtonVisible) {\r\n                    <button smzButton [attr.data-testid]=\"buildTableTestId('clear-filters')\" [label]=\"context.state.locale.clearFilters.label\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\r\n                  }\r\n                  @if (context.state.caption.columnVisibility.showDropdownSelector) {\r\n                    <ui-multi-select #columnMultiselect [attr.data-testid]=\"buildTableTestId('column-visibility')\" class=\"ml-2 col-12 md:col-2\" styleClass=\"w-full\" appendTo=\"body\" [options]=\"context.hideableColumns\" [(ngModel)]=\"selectedColumns\" [placeholder]=\"context.state.locale.columnVisibility.placeholder\" [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\" optionLabel=\"name\" dataKey=\"field\" optionLabel=\"header\" [filter]=\"true\" (panelHide)=\"updateColumnsVisibility(true)\" [smzTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\r\n                    </ui-multi-select>\r\n                  }\r\n                  @if (context.state.caption.globalFilter.isVisible) {\r\n                    <ui-icon-field class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\r\n                      <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\r\n                      <input #inputGlobal [(ngModel)]=\"globalSearchInput\" smzInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\"  [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" [attr.data-testid]=\"buildTableTestId('search')\" />\r\n                    </ui-icon-field>\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 smzTemplate=\"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.field) {\r\n                  @if (context.state.viewport.resizableColumns) {\r\n                    @if (col.isOrderable) {\r\n                      <th [pSortableColumn]=\"col.sortField\" pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [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 [attr.data-testid]=\"buildColumnTestId(col.field)\" [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\" [attr.data-testid]=\"buildColumnTestId(col.field)\" [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 [attr.data-testid]=\"buildColumnTestId(col.field)\" [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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-multi-select>\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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\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 smzTemplate=\"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 smzTemplate=\"filter\" let-value let-filter=\"filter\">\r\n                                  <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\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 smzButton type=\"button\" icon=\"fa-solid fa-eye-slash\" (click)=\"hideColumn(col, context)\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></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.label) {\r\n                          @if (batchItem.visible) {\r\n                            <button smzButton [label]=\"batchItem.label\" class=\"animate__animated animate__fadeIn\" [styleClass]=\"'p-button-plain ' + (batchItem.styleClass)\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [smzTooltip]=\"batchItem.tooltip\" [rounded]=\"true\" variant=\"text\"></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 smzTemplate=\"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                [attr.data-testid]=\"buildRowTestId(item, rowIndex)\"\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                    <button smzButton type=\"button\" class=\"smz-table-row-expansion-toggle\" [icon]=\"item._isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\" (click)=\"item._isExpanded = !item._isExpanded; item._isNew = false\" variant=\"text\" [rounded]=\"true\" size=\"sm\"></button>\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.field) {\r\n                  @if (clonedData.showSkeleton) {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton></td>\r\n                  } @else {\r\n                    <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [attr.data-testid]=\"buildCellTestId(item, rowIndex, col.field)\" [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 smzTemplate=\"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 smzInputText 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                                    <ui-input-number *ngVar=\"col.editable.data as numberData\" [formControl]=\"$any(control)\" [mode]=\"numberData.mode\" [minFractionDigits]=\"numberData.minFractionDigits\" [maxFractionDigits]=\"numberData.maxFractionDigits\" [currency]=\"numberData.currency\" [useGrouping]=\"numberData.useGrouping\" [allowEmpty]=\"numberData.allowEmpty\" [showClear]=\"numberData.showClear\" [showButtons]=\"numberData.showButtons\" [prefix]=\"numberData.prefix\" [suffix]=\"numberData.suffix\">\r\n                                    </ui-input-number>\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                                    <ui-toggle-switch [formControl]=\"$any(control)\"></ui-toggle-switch>\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 smzTextarea 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                                    <ui-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\"></ui-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                                    <ui-date-picker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></ui-date-picker>\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 smzTemplate=\"output\">\r\n                          <smz-table-content\r\n                            [col]=\"col\"\r\n                            [smzTooltip]=\"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                          <ui-skeleton width=\"100%\" height=\"1rem\"></ui-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 smzButton type=\"button\" icon=\"fa-solid fa-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow [rounded]=\"true\" variant=\"text\"></button>\r\n                          }\r\n                          @if (context.state.editable.remove.isButtonVisible) {\r\n                            <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\"></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 smzButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-info\"></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 smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (item._context?.isUpdating) {\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                }\r\n                              }\r\n                              <!-- COM ERRORS -->\r\n                              @if (editableContext.hasErrors) {\r\n                                <ui-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\r\n                                  <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\r\n                                </ui-popover>\r\n                                <button smzButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"mr-2\" (click)=\"errorsOverlay.toggle($event)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                <!-- CRIANDO -->\r\n                                @if (item._context?.isCreating) {\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\r\n                                }\r\n                                <!-- ATUALIZANDO -->\r\n                                @if (item._context?.isUpdating) {\r\n                                  <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"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\" [testId]=\"buildRowMenuTestId(item, rowIndex)\"></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 smzTemplate=\"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 smzButton [label]=\"context.state.locale.clearFilters.label\" class=\"mt-3\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" variant=\"outlined\"></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$3.Store }, { type: SmzExcelService }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [SmzTemplateDirective]
@@ -22584,6 +22634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 args: ['attr.data-testid']
             }], selectionChange: [{
                 type: Output
+            }], validChange: [{
+                type: Output
             }], filterChange: [{
                 type: Output
             }], columnVisibilityChange: [{
@@ -23063,16 +23115,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class TableContentComponent {
     items$;
     state;
+    /** Validade informada pela tabela (que pode trabalhar com uma copia de `state`); `null` ate a primeira mudanca. */
+    tableValid = null;
     get isValid() {
-        return this.state == null ? true : this.state.isValid;
+        return this.state == null ? true : (this.tableValid ?? this.state.isValid);
     }
     onValidationError$ = new BehaviorSubject(null);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableContentComponent, isStandalone: false, selector: "smz-table-content", inputs: { items$: "items$", state: "state" }, ngImport: i0, template: "@if (onValidationError$ | async; as onValidationError) {\r\n  <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n    @if (onValidationError) {\r\n      <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n    }\r\n  </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\"></smz-ui-table>", styles: [""], dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableContentComponent, isStandalone: false, selector: "smz-table-content", inputs: { items$: "items$", state: "state" }, ngImport: i0, template: "@if (onValidationError$ | async; as onValidationError) {\r\n  <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n    @if (onValidationError) {\r\n      <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n    }\r\n  </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\" (validChange)=\"tableValid = $event\"></smz-ui-table>", styles: [""], dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-table-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (onValidationError$ | async; as onValidationError) {\r\n  <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n    @if (onValidationError) {\r\n      <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n    }\r\n  </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\"></smz-ui-table>" }]
+            args: [{ selector: 'smz-table-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (onValidationError$ | async; as onValidationError) {\r\n  <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n    @if (onValidationError) {\r\n      <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n    }\r\n  </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\" (validChange)=\"tableValid = $event\"></smz-ui-table>" }]
         }], propDecorators: { items$: [{
                 type: Input
             }], state: [{
@@ -24581,8 +24635,8 @@ class SmzFormGroupBuilder extends SmzBuilderUtilities {
         this.formBuilderRef = formBuilderRef;
         this.group = group;
     }
-    setLayout(breakpoint, colType) {
-        const template = getSmzTemplate(breakpoint, colType);
+    setLayout(breakpoint, columns) {
+        const template = getSmzTemplate(breakpoint, columns);
         this.group.template = { ...this.group.template, ...template };
         return this;
     }
@@ -25178,8 +25232,8 @@ class SmzFormInputBuilder {
             this.inputRef.advancedSettings = {};
         }
     }
-    setLayout(breakpoint, colType) {
-        const template = getSmzTemplate(breakpoint, colType);
+    setLayout(breakpoint, columns) {
+        const template = getSmzTemplate(breakpoint, columns);
         this.inputRef.template = { ...this.inputRef.template, ...template };
         return this.that;
     }
@@ -25862,7 +25916,7 @@ class SmzFormListBuilder extends SmzFormInputBuilder {
             propertyName: 'name', name: 'nome', type: SmzControlType.TEXT, hideName: true,
             validatorsPreset: { isRequired: true },
             advancedSettings: { validators: [MustBeUnique(this._listInput.options)], validationMessages: [{ type: 'unique', message: 'Já existe um item com esse dado.' }] },
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
         };
         this._listInput.crud.inputData = textInput;
     }
@@ -25913,7 +25967,7 @@ class SmzFormListBuilder extends SmzFormInputBuilder {
     useFractionNumberInput(label = 'Dado', digits = 2) {
         const numberInput = {
             propertyName: 'name', name: label, type: SmzControlType.NUMBER,
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             locale: this._listInput.crud.inputLocale,
             useFraction: true,
             minFractionDigits: digits,
@@ -25928,7 +25982,7 @@ class SmzFormListBuilder extends SmzFormInputBuilder {
     useNumberInput(label = 'Dado') {
         const numberInput = {
             propertyName: 'name', name: label, type: SmzControlType.NUMBER,
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             useFraction: false,
             autoFocus: true
         };
@@ -26135,18 +26189,20 @@ class SmzFormInputValidatorBuilder extends SmzBuilderUtilities {
         return this.inputRefBuilder;
     }
 }
-function getSmzTemplate(breakpoint, colType) {
+/** Template de um breakpoint. Sem numero de colunas assume 12 (largura toda), o que o legado `col-auto` fazia na pratica. */
+function getSmzTemplate(breakpoint, columns) {
+    const row = columns ?? 12;
     switch (breakpoint) {
         case 'EXTRA_SMALL':
-            return { extraSmall: { row: colType == null ? 'col-auto' : colType } };
+            return { extraSmall: { row } };
         case 'SMALL':
-            return { small: { row: colType == null ? 'col-auto' : colType } };
+            return { small: { row } };
         case 'MEDIUM':
-            return { medium: { row: colType == null ? 'col-auto' : colType } };
+            return { medium: { row } };
         case 'LARGE':
-            return { large: { row: colType == null ? 'col-auto' : colType } };
+            return { large: { row } };
         case 'EXTRA_LARGE':
-            return { extraLarge: { row: colType == null ? 'col-auto' : colType } };
+            return { extraLarge: { row } };
         default:
             return {};
     }
@@ -26508,8 +26564,8 @@ class SmzBaseUiDefinitionBuilder {
         this.uiDefinitionOptions.fieldsToOverwriteOrder = properties;
         return this.that;
     }
-    useLayout(field, breakpoint, colType = null) {
-        const template = getSmzTemplate(breakpoint, colType);
+    useLayout(field, breakpoint, columns = null) {
+        const template = getSmzTemplate(breakpoint, columns);
         this.uiDefinitionOptions.fieldsWithLayoutTemplates.push({ propertyName: field, template: template });
         return this.that;
     }
@@ -26562,8 +26618,6 @@ class SmzFormBuilder {
         formId: generateGUID(),
         groups: [],
         template: {
-            extraSmall: { horizontalAlignment: 'justify-between', verticalAlignment: 'items-start' },
-            small: { horizontalAlignment: 'justify-between', verticalAlignment: 'items-start' },
             ...this.defaultConfig?.forms?.formTemplates
         },
         behaviors: {
@@ -26849,21 +26903,21 @@ const SmzPreset = {
                 okDependsOnValidation: false
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-10' },
-                medium: { row: 'col-8' },
-                large: { row: 'col-8' },
-                extraLarge: { row: 'col-6' },
+                extraSmall: { row: 12 },
+                small: { row: 10 },
+                medium: { row: 8 },
+                large: { row: 8 },
+                extraLarge: { row: 6 },
             }
         },
         features: {
             formBehaviors: {},
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {},
             formControlTemplate: {}
@@ -26891,21 +26945,21 @@ const SmzPreset = {
                 okDependsOnValidation: false
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-10' },
-                medium: { row: 'col-8' },
-                large: { row: 'col-8' },
-                extraLarge: { row: 'col-6' },
+                extraSmall: { row: 12 },
+                small: { row: 10 },
+                medium: { row: 8 },
+                large: { row: 8 },
+                extraLarge: { row: 6 },
             }
         },
         features: {
             formBehaviors: {},
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {},
             formControlTemplate: {}
@@ -26933,21 +26987,21 @@ const SmzPreset = {
                 okDependsOnValidation: false
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-10' },
-                large: { row: 'col-10' },
-                extraLarge: { row: 'col-10' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 10 },
+                large: { row: 10 },
+                extraLarge: { row: 10 },
             }
         },
         features: {
             formBehaviors: {},
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {},
             formControlTemplate: {}
@@ -26975,11 +27029,11 @@ const SmzPreset = {
                 okDependsOnValidation: false
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-10' },
-                medium: { row: 'col-8' },
-                large: { row: 'col-8' },
-                extraLarge: { row: 'col-6' },
+                extraSmall: { row: 12 },
+                small: { row: 10 },
+                medium: { row: 8 },
+                large: { row: 8 },
+                extraLarge: { row: 6 },
             }
         },
         features: {
@@ -26992,25 +27046,25 @@ const SmzPreset = {
                 showErrorsMethod: 'touched',
             },
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formControlTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             }
         },
         globals: {
@@ -27040,11 +27094,11 @@ const SmzPreset = {
                 saveName: 'SALVAR'
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-10' },
-                medium: { row: 'col-8' },
-                large: { row: 'col-8' },
-                extraLarge: { row: 'col-6' },
+                extraSmall: { row: 12 },
+                small: { row: 10 },
+                medium: { row: 8 },
+                large: { row: 8 },
+                extraLarge: { row: 6 },
             }
         },
         features: {
@@ -27057,25 +27111,25 @@ const SmzPreset = {
                 showErrorsMethod: 'dirty',
             },
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formControlTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             }
         },
         globals: {
@@ -27105,11 +27159,11 @@ const SmzPreset = {
                 okDependsOnValidation: false
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-10' },
-                medium: { row: 'col-8' },
-                large: { row: 'col-8' },
-                extraLarge: { row: 'col-6' },
+                extraSmall: { row: 12 },
+                small: { row: 10 },
+                medium: { row: 8 },
+                large: { row: 8 },
+                extraLarge: { row: 6 },
             }
         },
         features: {
@@ -27122,25 +27176,25 @@ const SmzPreset = {
                 showErrorsMethod: 'touched',
             },
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formControlTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             }
         },
         globals: {
@@ -27172,21 +27226,21 @@ const SmzPreset = {
                 cancelName: 'Não'
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-10' },
-                medium: { row: 'col-8' },
-                large: { row: 'col-8' },
-                extraLarge: { row: 'col-6' },
+                extraSmall: { row: 12 },
+                small: { row: 10 },
+                medium: { row: 8 },
+                large: { row: 8 },
+                extraLarge: { row: 6 },
             }
         },
         features: {
             formBehaviors: {},
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {},
             formControlTemplate: {}
@@ -27218,21 +27272,21 @@ const SmzPreset = {
                 cancelClass: 'p-button-outlined',
             },
             dialogTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-10' },
-                medium: { row: 'col-8' },
-                large: { row: 'col-8' },
-                extraLarge: { row: 'col-6' },
+                extraSmall: { row: 12 },
+                small: { row: 10 },
+                medium: { row: 8 },
+                large: { row: 8 },
+                extraLarge: { row: 6 },
             }
         },
         features: {
             formBehaviors: {},
             featureTemplate: {
-                extraSmall: { row: 'col-12' },
-                small: { row: 'col-12' },
-                medium: { row: 'col-12' },
-                large: { row: 'col-12' },
-                extraLarge: { row: 'col-12' },
+                extraSmall: { row: 12 },
+                small: { row: 12 },
+                medium: { row: 12 },
+                large: { row: 12 },
+                extraLarge: { row: 12 },
             },
             formGroupTemplate: {},
             formControlTemplate: {}
@@ -27522,7 +27576,7 @@ class SmzDialogsService {
             contentStyle: { 'overflow': 'auto', ...paddingStyle },
             headerStyle: { ...paddingStyle, 'padding-bottom': '0em' },
             footerStyle: { ...paddingStyle, 'padding-top': '0em' },
-            styleClass: data.behaviors.showAsLinkedOverlayPanel ? data.overlayPanel.styleClass : SetTemplateClasses(data._context.dialogTemplate, ['row']),
+            styleClass: data.behaviors.showAsLinkedOverlayPanel ? data.overlayPanel.styleClass : SetTemplateClasses(data._context.dialogTemplate, ['row'], 'width'),
             footer: behaviors.showFooter ? '-' : null,
             closable: behaviors.showCloseButton === true,
             minimizable: behaviors.showMinimizeButton === true,
@@ -28034,8 +28088,8 @@ class SmzDialogHelpButtonBuilder {
                         .setTitle(this.helpTitle)
                         .allowMaximize()
                         .html([data])
-                        .setLayout('EXTRA_SMALL', 'col-12')
-                        .setLayout('EXTRA_LARGE', 'col-6')
+                        .setLayout('EXTRA_SMALL', 12)
+                        .setLayout('EXTRA_LARGE', 6)
                         .hideFooter()
                         .build());
                 });
@@ -28045,8 +28099,8 @@ class SmzDialogHelpButtonBuilder {
                     .setTitle(this.helpTitle)
                     .allowMaximize()
                     .html([this.helpData])
-                    .setLayout('EXTRA_SMALL', 'col-12')
-                    .setLayout('EXTRA_LARGE', 'col-6')
+                    .setLayout('EXTRA_SMALL', 12)
+                    .setLayout('EXTRA_LARGE', 6)
                     .hideFooter()
                     .build());
             }
@@ -28266,9 +28320,9 @@ class SmzDialogBuilder extends SmzBuilderUtilities {
             ...this.defaultConfig?.dialogs?.builtInButtons
         },
         dialogTemplate: {
-            extraSmall: { row: 'col-12' },
-            large: { row: 'col-8' },
-            extraLarge: { row: 'col-6' },
+            extraSmall: { row: 12 },
+            large: { row: 8 },
+            extraLarge: { row: 6 },
             ...this.defaultConfig?.dialogs?.dialogTemplate
         },
         presetId: null,
@@ -28381,8 +28435,8 @@ class SmzDialogBuilder extends SmzBuilderUtilities {
         this.dialogState.callbacks.postProcessResponse = callback;
         return this;
     }
-    setLayout(breakpoint, colType = null) {
-        const template = getSmzTemplate(breakpoint, colType);
+    setLayout(breakpoint, columns = null) {
+        const template = getSmzTemplate(breakpoint, columns);
         this.dialogState.dialogTemplate = { ...this.dialogState.dialogTemplate, ...template };
         return this;
     }
@@ -28534,8 +28588,8 @@ class SmzDialogComponentBuilder {
         this.feature.data.outputs.push({ output, callback });
         return this;
     }
-    setLayout(breakpoint, colType = null) {
-        const template = getSmzTemplate(breakpoint, colType);
+    setLayout(breakpoint, columns = null) {
+        const template = getSmzTemplate(breakpoint, columns);
         this.feature.template = { ...this.feature.template, ...template };
         return this;
     }
@@ -28550,8 +28604,8 @@ class SmzDialogFormBuilder {
         this.dialogBuilderRef = dialogBuilderRef;
         this.feature = feature;
     }
-    setLayout(breakpoint, colType = null) {
-        const template = getSmzTemplate(breakpoint, colType);
+    setLayout(breakpoint, columns = null) {
+        const template = getSmzTemplate(breakpoint, columns);
         this.feature.template = { ...this.feature.template, ...template };
         return this;
     }
@@ -28571,8 +28625,8 @@ class SmzDialogTableBuilder {
         this.dialogBuilderRef = dialogBuilderRef;
         this.feature = feature;
     }
-    setLayout(breakpoint, colType = null) {
-        const template = getSmzTemplate(breakpoint, colType);
+    setLayout(breakpoint, columns = null) {
+        const template = getSmzTemplate(breakpoint, columns);
         this.feature.template = { ...this.feature.template, ...template };
         return this;
     }
@@ -28778,8 +28832,8 @@ class SmzHelpDialogService {
                 .setTitle('Ajuda')
                 .allowMaximize()
                 .html([data])
-                .setLayout('EXTRA_SMALL', 'col-12')
-                .setLayout('EXTRA_LARGE', 'col-6')
+                .setLayout('EXTRA_SMALL', 12)
+                .setLayout('EXTRA_LARGE', 6)
                 .hideFooter()
                 .build());
         });
@@ -28908,10 +28962,10 @@ function showObjectDialog(title, event, confirmCallback = () => { }) {
     GlobalInjector.instance.get(SmzDialogsService)
         .open(new SmzDialogBuilder()
         .setTitle(title)
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-6')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('MEDIUM', 6)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 6)
         .closeOnEscape()
         .html([new PrettyJsonPipe$1().transform(JSON.stringify(event), [true, 3])])
         .buttons()
@@ -28926,10 +28980,10 @@ function showMarkdownDialog(title, message) {
     GlobalInjector.instance.get(SmzDialogsService)
         .open(new SmzDialogBuilder()
         .setTitle(title)
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-6')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('MEDIUM', 6)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 6)
         .closeOnEscape()
         .markdown(message)
         .hideFooter()
@@ -31756,9 +31810,9 @@ function buildShowSetUserRoleDialog(user, success) {
     const roles = store.selectSnapshot(RolesSelectors.all);
     dialogs.open(new SmzDialogBuilder()
         .setTitle('Edição de Perfil')
-        .setLayout('EXTRA_LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('EXTRA_SMALL', 12)
         .postProcessResponse(data => ({ ...data, roleIds: [data['roleId']] }))
         .form()
         .group()
@@ -31770,7 +31824,7 @@ function buildShowSetUserRoleDialog(user, success) {
         .disable()
         .group
         .dropdown('role', 'Perfil', roles, getFirst(user.roles)?.id)
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_SMALL', 12)
         .validators().required().input
         .group
         .form
@@ -31796,9 +31850,9 @@ function buildShowSetUserRolesDialog(user, success) {
     const roles = store.selectSnapshot(RolesSelectors.all);
     dialogs.open(new SmzDialogBuilder()
         .setTitle('Edição de Perfis')
-        .setLayout('EXTRA_LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('EXTRA_SMALL', 12)
         .form()
         .group()
         .text('id', '', user.id).hide().group
@@ -31809,7 +31863,7 @@ function buildShowSetUserRolesDialog(user, success) {
         .disable()
         .group
         .multiselect('role', 'Perfil', roles, user.roles.map(x => x.id))
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_SMALL', 12)
         .validators().required().input
         .group
         .form
@@ -31872,8 +31926,8 @@ class UserClaimsComponent {
     addItemToTarget(event) {
         this.dialogs.open(new SmzDialogBuilder()
             .setTitle('Nível de Acesso')
-            .setLayout('MEDIUM', 'col-4')
-            .setLayout('EXTRA_SMALL', 'col-12')
+            .setLayout('MEDIUM', 4)
+            .setLayout('EXTRA_SMALL', 12)
             .message('Que tipo de acesso deseja dar para o claim(s) escolhido(s) ?')
             .buttons()
             .confirm('Permitir')
@@ -31907,11 +31961,11 @@ class UserClaimsComponent {
         this.claims = claims.filter(claim => this.user?.claims.findIndex(u => u.id === claim.id) !== -1 ? false : true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: UserClaimsComponent, deps: [{ token: i1$3.Store }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: UserClaimsComponent, isStandalone: false, selector: "app-user-claims", inputs: { username: "username" }, outputs: { desassociateClaim: "desassociateClaim" }, ngImport: i0, template: "<div class=\"ui-g form-group\">\n  <div class=\"ui-g-12 ui-md-12\">\n    <ui-pick-list [source]=\"claims\" [target]=\"targetClaims\" [responsive]=\"true\" sourceHeader=\"Claims dispon\u00EDveis\" targetHeader=\"Claims associados\" sourceFilterPlaceholder=\"Filtrar claims\" targetFilterPlaceholder=\"Filtrar claims\" filterBy=\"name\" [showSourceControls]=\"false\" [showTargetControls]=\"false\" [dragdrop]=\"true\" (movedToTarget)=\"addItemToTarget($event)\" (movedToSource)=\"addItemToSource($event)\" (movedAllToTarget)=\"addItemToTarget($event)\" (movedAllToSource)=\"addItemToSource($event)\">\n      <ng-template let-item smzTemplate=\"item\">\n\n        <!-- TARGET -->\n        @if (item.access != null) {\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n            <div class=\"claim-access-type-indicator\">\n              @if (item.access.id === 0) {\n                <strong class=\"block-text\"><i class=\"fa-solid fa-lock\" [title]=\"item.access.name\"></i></strong>\n              }\n              @if (item.access.id === 1) {\n                <strong class=\"allow-text\"><i class=\"fa-solid fa-lock-open\" [title]=\"item.access.name\"></i></strong>\n              }\n            </div>\n            <div>{{ item.claim.name }}</div>\n          </div>\n          <div></div>\n        } @else {\n          {{ item.description }}\n        }\n\n        <!-- SOURCE -->\n\n      </ng-template>\n    </ui-pick-list>\n  </div>\n</div>", styles: ["app-user-claims .nameInput{height:60px}app-user-claims .p-picklist .p-picklist-filter-container{padding-right:30px!important}app-user-claims .p-picklist .p-picklist-filter-container .p-picklist-filter-icon{right:10px!important;left:unset}app-user-claims .p-picklist .p-picklist-list{height:300px}app-user-claims .p-picklist.p-picklist-responsive .p-picklist-listwrapper.p-picklist-listwrapper-nocontrols{width:50%}app-user-claims .claim-access-type-indicator{float:right}app-user-claims .allow-text{color:#1a9c2a}app-user-claims .block-text{color:#9c1a1a}\n"], dependencies: [{ kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzPickListComponent, selector: "ui-pick-list", inputs: ["source", "target", "sourceHeader", "targetHeader", "sourceFilterPlaceholder", "targetFilterPlaceholder", "filterBy", "dragdrop", "responsive", "listStyle", "showSourceControls", "showTargetControls"], outputs: ["movedToTarget", "movedToSource", "movedAllToTarget", "movedAllToSource"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: UserClaimsComponent, isStandalone: false, selector: "app-user-claims", inputs: { username: "username" }, outputs: { desassociateClaim: "desassociateClaim" }, ngImport: i0, template: "<div class=\"ui-g form-group\">\r\n  <div class=\"ui-g-12 ui-md-12\">\r\n    <ui-pick-list [source]=\"claims\" [target]=\"targetClaims\" [responsive]=\"true\" sourceHeader=\"Claims dispon\u00EDveis\" targetHeader=\"Claims associados\" sourceFilterPlaceholder=\"Filtrar claims\" targetFilterPlaceholder=\"Filtrar claims\" filterBy=\"name\" [showSourceControls]=\"false\" [showTargetControls]=\"false\" [dragdrop]=\"true\" (movedToTarget)=\"addItemToTarget($event)\" (movedToSource)=\"addItemToSource($event)\" (movedAllToTarget)=\"addItemToTarget($event)\" (movedAllToSource)=\"addItemToSource($event)\">\r\n      <ng-template let-item smzTemplate=\"item\">\r\n\r\n        <!-- TARGET -->\r\n        @if (item.access != null) {\r\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n            <div class=\"claim-access-type-indicator\">\r\n              @if (item.access.id === 0) {\r\n                <strong class=\"block-text\"><i class=\"fa-solid fa-lock\" [title]=\"item.access.name\"></i></strong>\r\n              }\r\n              @if (item.access.id === 1) {\r\n                <strong class=\"allow-text\"><i class=\"fa-solid fa-lock-open\" [title]=\"item.access.name\"></i></strong>\r\n              }\r\n            </div>\r\n            <div>{{ item.claim.name }}</div>\r\n          </div>\r\n          <div></div>\r\n        } @else {\r\n          {{ item.description }}\r\n        }\r\n\r\n        <!-- SOURCE -->\r\n\r\n      </ng-template>\r\n    </ui-pick-list>\r\n  </div>\r\n</div>", styles: ["app-user-claims .nameInput{height:60px}app-user-claims .p-picklist .p-picklist-filter-container{padding-right:30px!important}app-user-claims .p-picklist .p-picklist-filter-container .p-picklist-filter-icon{right:10px!important;left:unset}app-user-claims .p-picklist .p-picklist-list{height:300px}app-user-claims .p-picklist.p-picklist-responsive .p-picklist-listwrapper.p-picklist-listwrapper-nocontrols{width:50%}app-user-claims .claim-access-type-indicator{float:right}app-user-claims .allow-text{color:#1a9c2a}app-user-claims .block-text{color:#9c1a1a}\n"], dependencies: [{ kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzPickListComponent, selector: "ui-pick-list", inputs: ["source", "target", "sourceHeader", "targetHeader", "sourceFilterPlaceholder", "targetFilterPlaceholder", "filterBy", "dragdrop", "responsive", "listStyle", "showSourceControls", "showTargetControls"], outputs: ["movedToTarget", "movedToSource", "movedAllToTarget", "movedAllToSource"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: UserClaimsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-claims', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"ui-g form-group\">\n  <div class=\"ui-g-12 ui-md-12\">\n    <ui-pick-list [source]=\"claims\" [target]=\"targetClaims\" [responsive]=\"true\" sourceHeader=\"Claims dispon\u00EDveis\" targetHeader=\"Claims associados\" sourceFilterPlaceholder=\"Filtrar claims\" targetFilterPlaceholder=\"Filtrar claims\" filterBy=\"name\" [showSourceControls]=\"false\" [showTargetControls]=\"false\" [dragdrop]=\"true\" (movedToTarget)=\"addItemToTarget($event)\" (movedToSource)=\"addItemToSource($event)\" (movedAllToTarget)=\"addItemToTarget($event)\" (movedAllToSource)=\"addItemToSource($event)\">\n      <ng-template let-item smzTemplate=\"item\">\n\n        <!-- TARGET -->\n        @if (item.access != null) {\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n            <div class=\"claim-access-type-indicator\">\n              @if (item.access.id === 0) {\n                <strong class=\"block-text\"><i class=\"fa-solid fa-lock\" [title]=\"item.access.name\"></i></strong>\n              }\n              @if (item.access.id === 1) {\n                <strong class=\"allow-text\"><i class=\"fa-solid fa-lock-open\" [title]=\"item.access.name\"></i></strong>\n              }\n            </div>\n            <div>{{ item.claim.name }}</div>\n          </div>\n          <div></div>\n        } @else {\n          {{ item.description }}\n        }\n\n        <!-- SOURCE -->\n\n      </ng-template>\n    </ui-pick-list>\n  </div>\n</div>", styles: ["app-user-claims .nameInput{height:60px}app-user-claims .p-picklist .p-picklist-filter-container{padding-right:30px!important}app-user-claims .p-picklist .p-picklist-filter-container .p-picklist-filter-icon{right:10px!important;left:unset}app-user-claims .p-picklist .p-picklist-list{height:300px}app-user-claims .p-picklist.p-picklist-responsive .p-picklist-listwrapper.p-picklist-listwrapper-nocontrols{width:50%}app-user-claims .claim-access-type-indicator{float:right}app-user-claims .allow-text{color:#1a9c2a}app-user-claims .block-text{color:#9c1a1a}\n"] }]
+            args: [{ selector: 'app-user-claims', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"ui-g form-group\">\r\n  <div class=\"ui-g-12 ui-md-12\">\r\n    <ui-pick-list [source]=\"claims\" [target]=\"targetClaims\" [responsive]=\"true\" sourceHeader=\"Claims dispon\u00EDveis\" targetHeader=\"Claims associados\" sourceFilterPlaceholder=\"Filtrar claims\" targetFilterPlaceholder=\"Filtrar claims\" filterBy=\"name\" [showSourceControls]=\"false\" [showTargetControls]=\"false\" [dragdrop]=\"true\" (movedToTarget)=\"addItemToTarget($event)\" (movedToSource)=\"addItemToSource($event)\" (movedAllToTarget)=\"addItemToTarget($event)\" (movedAllToSource)=\"addItemToSource($event)\">\r\n      <ng-template let-item smzTemplate=\"item\">\r\n\r\n        <!-- TARGET -->\r\n        @if (item.access != null) {\r\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n            <div class=\"claim-access-type-indicator\">\r\n              @if (item.access.id === 0) {\r\n                <strong class=\"block-text\"><i class=\"fa-solid fa-lock\" [title]=\"item.access.name\"></i></strong>\r\n              }\r\n              @if (item.access.id === 1) {\r\n                <strong class=\"allow-text\"><i class=\"fa-solid fa-lock-open\" [title]=\"item.access.name\"></i></strong>\r\n              }\r\n            </div>\r\n            <div>{{ item.claim.name }}</div>\r\n          </div>\r\n          <div></div>\r\n        } @else {\r\n          {{ item.description }}\r\n        }\r\n\r\n        <!-- SOURCE -->\r\n\r\n      </ng-template>\r\n    </ui-pick-list>\r\n  </div>\r\n</div>", styles: ["app-user-claims .nameInput{height:60px}app-user-claims .p-picklist .p-picklist-filter-container{padding-right:30px!important}app-user-claims .p-picklist .p-picklist-filter-container .p-picklist-filter-icon{right:10px!important;left:unset}app-user-claims .p-picklist .p-picklist-list{height:300px}app-user-claims .p-picklist.p-picklist-responsive .p-picklist-listwrapper.p-picklist-listwrapper-nocontrols{width:50%}app-user-claims .claim-access-type-indicator{float:right}app-user-claims .allow-text{color:#1a9c2a}app-user-claims .block-text{color:#9c1a1a}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Store }, { type: SmzDialogsService }], propDecorators: { username: [{
                 type: Input
             }], desassociateClaim: [{
@@ -31924,9 +31978,9 @@ function showUpdateUserClaimsDialog(user) {
     const helpService = GlobalInjector.instance.get(SmzHelpDialogService);
     dialogs.open(new SmzDialogBuilder()
         .setTitle('Edição de Permissões de Acesso')
-        .setLayout('EXTRA_LARGE', 'col-8')
-        .setLayout('MEDIUM', 'col-10')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 8)
+        .setLayout('MEDIUM', 10)
+        .setLayout('EXTRA_SMALL', 12)
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- builder accepts ComponentDataBase | Record; component class is Type
         .component(UserClaimsComponent)
         .addInput('username', user.username)
@@ -32134,11 +32188,11 @@ class UsersPageComponent {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: UsersPageComponent, deps: [{ token: i1$3.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: UsersPageComponent, isStandalone: false, selector: "smz-ui-users-page", ngImport: i0, template: "\n<ng-container *ngVar=\"(users$ | async) as users\">\n\n  <smz-ui-table #smzdt [items]=\"users\" [state]=\"tableState\" [loading]=\"false\">\n\n    <ng-template smzTemplate=\"caption\" let-primeTable>\n      @for (action of (uiConfig.rbkUtils.authorization.users.pageActions | smzFlattenMenu : null); track action) {\n        @if (action.visible) {\n          <button smzButton type=\"button\" smzMenuItemAction [item]=\"action\" [label]=\"action.label\" [icon]=\"action.icon\" [styleClass]=\"action.styleClass\" [disabled]=\"action.disabled\"></button>\n        }\n      }\n\n      @if (uiConfig.rbkUtils.authorization.users.removalBehavior === 'deactivation') {\n        <ui-select-button appendTo=\"body\" [options]=\"viewOptions\" [(ngModel)]=\"selectedView\" (changed)=\"handleViewOptionChange($event.value)\" optionLabel=\"label\" optionValue=\"value\">\n        </ui-select-button>\n      }\n\n    </ng-template>\n\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\n    <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n      @switch (col.field) {\n        @case ('displayName') {\n          <div class=\"grid grid-nogutter items-center gap-3 justify-start\">\n            <!-- CONTROLE DE ACESSO N\u00C3O ENCONTROU O IDENTIFICADOR DO USU\u00C1RIO -->\n            @if (item.avatar == null) {\n              <img\n                [src]=\"uiConfig.rbkUtils.authorization.users.avatarPlaceholderPath\"\n                class=\"w-14 align-middle\"\n                />\n            }\n            <!-- USU\u00C1RIO COM AVATAR INFORMADO PELO CONTROLE DE ACESSO -->\n            @if (item.avatar != null) {\n              <img\n                [src]=\"item.avatar\"\n                (error)=\"handleMissingImage($event, item.name, item.avatar)\"\n                class=\"w-14 align-middle\"\n                />\n            }\n            <span>{{ item.displayName }}</span>\n          </div>\n        }\n        @case ('role.name') {\n          {{ item.role?.name }}\n        }\n      }\n\n    </ng-template>\n\n  </smz-ui-table>\n\n</ng-container>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: SmzMenuItemActionsDirective, selector: "[smzMenuItemAction]", inputs: ["item", "data"], outputs: ["collapse"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzFlattenMenuPipe, name: "smzFlattenMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: UsersPageComponent, isStandalone: false, selector: "smz-ui-users-page", ngImport: i0, 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 smzTemplate=\"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 smzButton type=\"button\" smzMenuItemAction [item]=\"action\" [label]=\"action.label\" [icon]=\"action.icon\" [styleClass]=\"action.styleClass\" [disabled]=\"action.disabled\"></button>\r\n        }\r\n      }\r\n\r\n      @if (uiConfig.rbkUtils.authorization.users.removalBehavior === 'deactivation') {\r\n        <ui-select-button appendTo=\"body\" [options]=\"viewOptions\" [(ngModel)]=\"selectedView\" (changed)=\"handleViewOptionChange($event.value)\" optionLabel=\"label\" optionValue=\"value\">\r\n        </ui-select-button>\r\n      }\r\n\r\n    </ng-template>\r\n\r\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n    <ng-template smzTemplate=\"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>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: SmzMenuItemActionsDirective, selector: "[smzMenuItemAction]", inputs: ["item", "data"], outputs: ["collapse"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzFlattenMenuPipe, name: "smzFlattenMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: UsersPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-users-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "\n<ng-container *ngVar=\"(users$ | async) as users\">\n\n  <smz-ui-table #smzdt [items]=\"users\" [state]=\"tableState\" [loading]=\"false\">\n\n    <ng-template smzTemplate=\"caption\" let-primeTable>\n      @for (action of (uiConfig.rbkUtils.authorization.users.pageActions | smzFlattenMenu : null); track action) {\n        @if (action.visible) {\n          <button smzButton type=\"button\" smzMenuItemAction [item]=\"action\" [label]=\"action.label\" [icon]=\"action.icon\" [styleClass]=\"action.styleClass\" [disabled]=\"action.disabled\"></button>\n        }\n      }\n\n      @if (uiConfig.rbkUtils.authorization.users.removalBehavior === 'deactivation') {\n        <ui-select-button appendTo=\"body\" [options]=\"viewOptions\" [(ngModel)]=\"selectedView\" (changed)=\"handleViewOptionChange($event.value)\" optionLabel=\"label\" optionValue=\"value\">\n        </ui-select-button>\n      }\n\n    </ng-template>\n\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\n    <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n      @switch (col.field) {\n        @case ('displayName') {\n          <div class=\"grid grid-nogutter items-center gap-3 justify-start\">\n            <!-- CONTROLE DE ACESSO N\u00C3O ENCONTROU O IDENTIFICADOR DO USU\u00C1RIO -->\n            @if (item.avatar == null) {\n              <img\n                [src]=\"uiConfig.rbkUtils.authorization.users.avatarPlaceholderPath\"\n                class=\"w-14 align-middle\"\n                />\n            }\n            <!-- USU\u00C1RIO COM AVATAR INFORMADO PELO CONTROLE DE ACESSO -->\n            @if (item.avatar != null) {\n              <img\n                [src]=\"item.avatar\"\n                (error)=\"handleMissingImage($event, item.name, item.avatar)\"\n                class=\"w-14 align-middle\"\n                />\n            }\n            <span>{{ item.displayName }}</span>\n          </div>\n        }\n        @case ('role.name') {\n          {{ item.role?.name }}\n        }\n      }\n\n    </ng-template>\n\n  </smz-ui-table>\n\n</ng-container>" }]
+            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 smzTemplate=\"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 smzButton type=\"button\" smzMenuItemAction [item]=\"action\" [label]=\"action.label\" [icon]=\"action.icon\" [styleClass]=\"action.styleClass\" [disabled]=\"action.disabled\"></button>\r\n        }\r\n      }\r\n\r\n      @if (uiConfig.rbkUtils.authorization.users.removalBehavior === 'deactivation') {\r\n        <ui-select-button appendTo=\"body\" [options]=\"viewOptions\" [(ngModel)]=\"selectedView\" (changed)=\"handleViewOptionChange($event.value)\" optionLabel=\"label\" optionValue=\"value\">\r\n        </ui-select-button>\r\n      }\r\n\r\n    </ng-template>\r\n\r\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n    <ng-template smzTemplate=\"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$3.Store }, { type: i0.ChangeDetectorRef }] });
 
 const routes$7 = [
@@ -32216,9 +32270,9 @@ function UpdateClaimDialog(claim) {
     const store = GlobalInjector.instance.get(Store);
     return new SmzDialogBuilder()
         .setTitle('Renomear Permissão de Acesso')
-        .setLayout('LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('SMALL', 'col-12')
+        .setLayout('LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('SMALL', 12)
         .confirmOnEnter()
         .closeOnEscape()
         .form()
@@ -32247,9 +32301,9 @@ function CreateClaimDialog() {
     const store = GlobalInjector.instance.get(Store);
     return new SmzDialogBuilder()
         .setTitle('Criar Permissão de Acesso')
-        .setLayout('LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('SMALL', 'col-12')
+        .setLayout('LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('SMALL', 12)
         .confirmOnEnter()
         .closeOnEscape()
         .form()
@@ -32344,7 +32398,7 @@ class ClaimsPageComponent {
         this.dialogs.open(CreateClaimDialog());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ClaimsPageComponent, deps: [{ token: i1$3.Store }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ClaimsPageComponent, isStandalone: false, selector: "app-claims-page", ngImport: i0, template: "<smz-ui-table [items]=\"claims$ | async\" [state]=\"tableState\">\n\n    <ng-template smzTemplate=\"caption\">\n      <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n    </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ClaimsPageComponent, isStandalone: false, selector: "app-claims-page", ngImport: i0, template: "<smz-ui-table [items]=\"claims$ | async\" [state]=\"tableState\">\n\n    <ng-template smzTemplate=\"caption\">\n      <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n    </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     Confirmable('Tem certeza de que deseja excluir essa permissão de acesso ?', 'Atenção', true)
@@ -32410,9 +32464,9 @@ function UpdateRoleDialog(claim) {
     const store = GlobalInjector.instance.get(Store);
     return new SmzDialogBuilder()
         .setTitle('Renomea Perfil')
-        .setLayout('LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('SMALL', 'col-12')
+        .setLayout('LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('SMALL', 12)
         .confirmOnEnter()
         .closeOnEscape()
         .form()
@@ -32443,9 +32497,9 @@ function UpdateRoleClaimsDialog(role) {
     const claims = store.selectSnapshot(ClaimsSelectors.all).map(x => ({ id: x.id, name: x.description }));
     return new SmzDialogBuilder()
         .setTitle('Editar permissões de acesso do perfil')
-        .setLayout('LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('SMALL', 'col-12')
+        .setLayout('LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('SMALL', 12)
         .confirmOnEnter()
         .closeOnEscape()
         .form()
@@ -32478,9 +32532,9 @@ function CreateRoleDialog() {
     const store = GlobalInjector.instance.get(Store);
     return new SmzDialogBuilder()
         .setTitle('Criar Perfil')
-        .setLayout('LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('SMALL', 'col-12')
+        .setLayout('LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('SMALL', 12)
         .confirmOnEnter()
         .closeOnEscape()
         .form()
@@ -32514,9 +32568,9 @@ function showRoleClaimsDialog(role) {
   `;
     dialogs.open(new SmzDialogBuilder()
         .setTitle('Permissões')
-        .setLayout('LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('SMALL', 'col-12')
+        .setLayout('LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('SMALL', 12)
         .confirmOnEnter()
         .closeOnEscape()
         .message(html)
@@ -32615,14 +32669,14 @@ class RolesPageComponent {
         this.dialogs.open(CreateRoleDialog());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RolesPageComponent, deps: [{ token: i1$3.Store }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RolesPageComponent, isStandalone: false, selector: "app-roles-page", ngImport: i0, template: "<smz-ui-table [items]=\"roles$ | async\" [state]=\"tableState\">\n\n  <ng-template smzTemplate=\"caption\">\n    <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" [disabled]=\"!(canCreateClaims | rbkCanAccessAny)\" severity=\"primary\"></button>\n  </ng-template>\n\n  <!-- CONTE\u00DADOS COM OVERRIDE -->\n  <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n    @switch (col.field) {\n      @case ('claims') {\n        <div class=\"grid grid-nogutter items-start justify-start flex-col gap-1\">\n          <ng-container *ngVar=\"(item.claims | smzInitial : 3) as limitedClaims\">\n            <!-- <div [innerHTML]=\"limitedClaims | prettyjson\"></div> -->\n            <ul class=\"list-disc\">\n              @for (claim of limitedClaims; track claim) {\n                <li class=\"\">{{ $any(claim).name }}</li>\n              }\n              @if (item.claims.length > 3) {\n                <li>(...)</li>\n              }\n            </ul>\n            @if (item.claims.length > 3) {\n              <button\n                type=\"button\"\n                (click)=\"onShowRoleClaimsDialog(item)\"\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\">\n                <i class=\"fa-solid fa-circle-info mr-2\"></i>Ver mais\n              </button>\n            }\n          </ng-container>\n        </div>\n      }\n    }\n\n  </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzInitialPipe, name: "smzInitial" }, { kind: "pipe", type: RbkCanAccessAnyPipe, name: "rbkCanAccessAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RolesPageComponent, isStandalone: false, selector: "app-roles-page", ngImport: i0, template: "<smz-ui-table [items]=\"roles$ | async\" [state]=\"tableState\">\r\n\r\n  <ng-template smzTemplate=\"caption\">\r\n    <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" [disabled]=\"!(canCreateClaims | rbkCanAccessAny)\" severity=\"primary\"></button>\r\n  </ng-template>\r\n\r\n  <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n  <ng-template smzTemplate=\"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", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzInitialPipe, name: "smzInitial" }, { kind: "pipe", type: RbkCanAccessAnyPipe, name: "rbkCanAccessAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     Confirmable('Tem certeza de que deseja excluir esse perfil ?', 'Atenção', true)
 ], RolesPageComponent.prototype, "showDeleteConfirmation", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RolesPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-roles-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<smz-ui-table [items]=\"roles$ | async\" [state]=\"tableState\">\n\n  <ng-template smzTemplate=\"caption\">\n    <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" [disabled]=\"!(canCreateClaims | rbkCanAccessAny)\" severity=\"primary\"></button>\n  </ng-template>\n\n  <!-- CONTE\u00DADOS COM OVERRIDE -->\n  <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n    @switch (col.field) {\n      @case ('claims') {\n        <div class=\"grid grid-nogutter items-start justify-start flex-col gap-1\">\n          <ng-container *ngVar=\"(item.claims | smzInitial : 3) as limitedClaims\">\n            <!-- <div [innerHTML]=\"limitedClaims | prettyjson\"></div> -->\n            <ul class=\"list-disc\">\n              @for (claim of limitedClaims; track claim) {\n                <li class=\"\">{{ $any(claim).name }}</li>\n              }\n              @if (item.claims.length > 3) {\n                <li>(...)</li>\n              }\n            </ul>\n            @if (item.claims.length > 3) {\n              <button\n                type=\"button\"\n                (click)=\"onShowRoleClaimsDialog(item)\"\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\">\n                <i class=\"fa-solid fa-circle-info mr-2\"></i>Ver mais\n              </button>\n            }\n          </ng-container>\n        </div>\n      }\n    }\n\n  </ng-template>\n\n</smz-ui-table>\n" }]
+            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 smzTemplate=\"caption\">\r\n    <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" [disabled]=\"!(canCreateClaims | rbkCanAccessAny)\" severity=\"primary\"></button>\r\n  </ng-template>\r\n\r\n  <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n  <ng-template smzTemplate=\"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$3.Store }, { type: SmzDialogsService }], propDecorators: { showDeleteConfirmation: [] } });
 
 const data$4 = {
@@ -32715,9 +32769,9 @@ function showUpdateTenantDialog(tenant) {
     const displayName = GlobalInjector.config.locale.authorization.tenant.displayName;
     dialogs.open(new SmzDialogBuilder()
         .setTitle(`Renomear ${displayName}`)
-        .setLayout('LARGE', 'col-4')
-        .setLayout('MEDIUM', 'col-6')
-        .setLayout('SMALL', 'col-12')
+        .setLayout('LARGE', 4)
+        .setLayout('MEDIUM', 6)
+        .setLayout('SMALL', 12)
         .confirmOnEnter()
         .closeOnEscape()
         .form()
@@ -32748,28 +32802,28 @@ function showCreateTenantDialog() {
     const dialogs = GlobalInjector.instance.get(SmzDialogsService);
     dialogs.open(new SmzDialogBuilder()
         .setTitle(`Criar ${displayName}`)
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-8')
-        .setLayout('EXTRA_LARGE', 'col-6')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 8)
+        .setLayout('EXTRA_LARGE', 6)
         .form()
         .group(`${displayName}`)
         .text(nameof('alias'), 'Identificador')
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-6')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 6)
         .setSaveFormat(SmzTextPattern.CLAIM_PATTERN)
         .validators().required().input
         .group
         .text(nameof('name'), 'Nome')
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-6')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 6)
         .validators().required().input
         .group
         .textArea(nameof('metadata'), 'Metadado')
@@ -32778,43 +32832,43 @@ function showCreateTenantDialog() {
         .form
         .group('Usuário Admin')
         .text(namesof('adminInfo', 'username'), 'Usuário')
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-4')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 4)
         .validators().required().input
         .group
         .text(namesof('adminInfo', 'displayName'), 'Nome')
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-4')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 4)
         .validators().required().input
         .group
         .text(namesof('adminInfo', 'email'), 'Email')
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-4')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 4)
         .validators().email().required().input
         .group
         .password(namesof('adminInfo', 'password'), 'Senha')
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-6')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 6)
         .validators().required().input
         .group
         .addPasswordConfirmation(namesof('adminInfo', 'password'), 'Confirmação')
-        .setLayout('EXTRA_SMALL', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('LARGE', 'col-6')
-        .setLayout('EXTRA_LARGE', 'col-6')
+        .setLayout('EXTRA_SMALL', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('LARGE', 6)
+        .setLayout('EXTRA_LARGE', 6)
         .validators().required().input
         .group
         .form
@@ -32871,7 +32925,7 @@ class TenantsPageComponent {
         showCreateTenantDialog();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantsPageComponent, deps: [{ token: i1$3.Store }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TenantsPageComponent, isStandalone: false, selector: "app-tenants-page", ngImport: i0, template: "<smz-ui-table [items]=\"tenants$ | async\" [state]=\"tableState\">\n\n    <ng-template smzTemplate=\"caption\">\n      <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n    </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TenantsPageComponent, isStandalone: false, selector: "app-tenants-page", ngImport: i0, template: "<smz-ui-table [items]=\"tenants$ | async\" [state]=\"tableState\">\n\n    <ng-template smzTemplate=\"caption\">\n      <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n    </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantsPageComponent, decorators: [{
             type: Component,
@@ -33873,7 +33927,7 @@ class SmzLoginBuilder {
                         {
                             propertyName: 'username', type: SmzControlType.TEXT, name: 'Usuário',
                             validatorsPreset: { isRequired: true },
-                            template: { extraSmall: { row: 'col-12' } }
+                            template: { extraSmall: { row: 12 } }
                         },
                         {
                             propertyName: 'password', type: SmzControlType.PASSWORD, name: 'Senha',
@@ -33886,10 +33940,10 @@ class SmzLoginBuilder {
                             mediumRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
                             strongRegex: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).',
                             validatorsPreset: { isRequired: true },
-                            template: { extraSmall: { row: 'col-12' } }
+                            template: { extraSmall: { row: 12 } }
                         }
                     ],
-                    template: { extraSmall: { row: 'col-12' } }
+                    template: { extraSmall: { row: 12 } }
                 }
             ],
         },
@@ -34130,7 +34184,7 @@ class LoginComponent {
             .enableSubmitOnEnter()
             .disableFlattenResponse()
             .group()
-            .setLayout('EXTRA_SMALL', 'col-12')
+            .setLayout('EXTRA_SMALL', 12)
             .if(authConfig.login.showTenantSelector)
             .dropdown('tenant', config.locale.authorization.tenant.displayName, tenants, defaultTenant)
             .validators().required().input
@@ -34269,7 +34323,7 @@ class SuperuserLoginComponent {
             .enableSubmitOnEnter()
             .disableFlattenResponse()
             .group()
-            .setLayout('EXTRA_SMALL', 'col-12')
+            .setLayout('EXTRA_SMALL', 12)
             .text(nameof('username'), 'Usuário Adminstrativo')
             .validators().required().input
             .group
@@ -35389,7 +35443,7 @@ var FaqsForms;
         const questionInput = {
             propertyName: 'question', name: 'Escreva a pergunta', type: SmzControlType.TEXT,
             defaultValue: question,
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             validatorsPreset: { isRequired: true, minLength: 5 },
             isDisabled: false,
             advancedSettings: {
@@ -35401,7 +35455,7 @@ var FaqsForms;
         const answerInput = {
             propertyName: 'answer', name: 'Resposta...', type: SmzControlType.TEXT_AREA,
             defaultValue: answer,
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             validatorsPreset: { isRequired: true, minLength: 5 },
             isDisabled: false,
             textAreaRows: 10,
@@ -35568,7 +35622,7 @@ class FaqsContentComponent {
         this.manager.delete(data.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FaqsContentComponent, deps: [{ token: FaqsManagerService }, { token: i0.ChangeDetectorRef }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FaqsContentComponent, isStandalone: false, selector: "smz-faqs-content", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"grid\">\n\n  <div class=\"col-12\">\n    <h3>{{ manager.config.placeholders.searchTitle }}</h3>\n\n    <ui-input-group>\n      <ui-input-group-addon>\n        <i class=\"fa-solid fa-magnifying-glass\"></i>\n      </ui-input-group-addon>\n\n      <input\n        type=\"text\"\n        smzInputText\n        [(ngModel)]=\"keywords\"\n        [placeholder]=\"manager.config.placeholders.searchPlaceholder\"\n      />\n\n      <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" [disabled]=\"keywords === ''\" (click)=\"keywords = ''\" styleClass=\"p-button-warn\"></button>\n    </ui-input-group>\n  </div>\n\n  <div class=\"col-12\">\n    @if ((items | searchFaqs : keywords); as filtered) {\n      @if (filtered.length > 0) {\n        <h3>{{ manager.config.placeholders.contentTitle }}</h3>\n        <ui-accordion [multiple]=\"true\">\n          @for (item of filtered; track item.id) {\n            <ui-accordion-panel [value]=\"item.id\">\n              <ui-accordion-header>{{ item.question }}</ui-accordion-header>\n\n              <ui-accordion-content>\n                @if (manager.config.creationClaim | rbkCanAccess) {\n                  <div class=\"faqs__actions\">\n                    <a class=\"clickable hvr-icon-push mr-2\" (click)=\"update(item)\"><i class=\"far fa-edit hvr-icon\"></i></a>\n                    <a class=\"clickable hvr-icon-push\" (click)=\"delete(item)\"><i class=\"far fa-trash-alt hvr-icon\"></i></a>\n                  </div>\n                }\n\n                <div class=\"faqs__answer\" [innerHTML]=\"(item.answer | highlight : keywords) | safeHtml\"></div>\n              </ui-accordion-content>\n            </ui-accordion-panel>\n          }\n        </ui-accordion>\n      } @else {\n        <smz-icon-message\n          [message]=\"manager.config.placeholders.emptyMessage\"\n        [comment]=\"(manager.config.creationClaim | rbkCanAccess) ?\n        manager.config.placeholders.creationMessage :\n            (keywords === '') ?\n            manager.config.placeholders.supportMessage :\n            manager.config.placeholders.noSearchResultsMessage\"\n          >\n        </smz-icon-message>\n      }\n    }\n  </div>\n\n  <div class=\"col-12\">\n    @if ((manager.config.creationClaim | rbkCanAccess) && formConfig != null) {\n      <h3>{{ manager.config.placeholders.creationTitle }}</h3>\n      <smz-form-group #creationComponent [config]=\"formConfig\"></smz-form-group>\n      <button smzButton type=\"button\" label=\"ENVIAR\" [disabled]=\"!creationComponent.isValid\" (click)=\"create(creationComponent)\" styleClass=\"p-button-ghost\"></button>\n    }\n  </div>\n</div>\n", styles: [".faqs__answer{white-space:pre-wrap}.faqs__actions{width:100%;text-align:right;padding:0 0 10px}.p-input-icon-left,.p-input-icon-right{position:relative}.ui-float-icon{position:absolute;top:50%;margin-top:-.5rem;left:.5rem;color:#6c757d}.p-input-icon-left>.ui-inputtext{padding-left:2rem;border-left-width:1px}\n"], dependencies: [{ kind: "component", type: SmzIconMessageComponent, selector: "smz-icon-message", inputs: ["icon", "message", "comment"] }, { kind: "component", type: FormGroupComponent, selector: "smz-form-group", inputs: ["config"], outputs: ["statusChanges", "initialStateChanged", "previousStateChanged", "submit"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i2.SmzAccordionComponent, selector: "ui-accordion", inputs: ["value", "multiple", "transitionOptions"], outputs: ["valueChange", "opened", "closed"] }, { kind: "component", type: i2.SmzAccordionPanelComponent, selector: "ui-accordion-panel", inputs: ["value"] }, { kind: "component", type: i2.SmzAccordionHeaderComponent, selector: "ui-accordion-header" }, { kind: "component", type: i2.SmzAccordionContentComponent, selector: "ui-accordion-content" }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzInputGroupComponent, selector: "ui-input-group" }, { kind: "component", type: i2.SmzInputGroupAddonComponent, selector: "ui-input-group-addon" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: RbkCanAccessPipe, name: "rbkCanAccess" }, { kind: "pipe", type: SearchFaqsPipe, name: "searchFaqs" }, { kind: "pipe", type: HighlightSearch, name: "highlight" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FaqsContentComponent, isStandalone: false, selector: "smz-faqs-content", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\">\r\n    <h3>{{ manager.config.placeholders.searchTitle }}</h3>\r\n\r\n    <ui-input-group>\r\n      <ui-input-group-addon>\r\n        <i class=\"fa-solid fa-magnifying-glass\"></i>\r\n      </ui-input-group-addon>\r\n\r\n      <input\r\n        type=\"text\"\r\n        smzInputText\r\n        [(ngModel)]=\"keywords\"\r\n        [placeholder]=\"manager.config.placeholders.searchPlaceholder\"\r\n      />\r\n\r\n      <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" [disabled]=\"keywords === ''\" (click)=\"keywords = ''\" styleClass=\"p-button-warn\"></button>\r\n    </ui-input-group>\r\n  </div>\r\n\r\n  <div class=\"col-12\">\r\n    @if ((items | searchFaqs : keywords); as filtered) {\r\n      @if (filtered.length > 0) {\r\n        <h3>{{ manager.config.placeholders.contentTitle }}</h3>\r\n        <ui-accordion [multiple]=\"true\">\r\n          @for (item of filtered; track item.id) {\r\n            <ui-accordion-panel [value]=\"item.id\">\r\n              <ui-accordion-header>{{ item.question }}</ui-accordion-header>\r\n\r\n              <ui-accordion-content>\r\n                @if (manager.config.creationClaim | rbkCanAccess) {\r\n                  <div class=\"faqs__actions\">\r\n                    <a class=\"clickable hvr-icon-push mr-2\" (click)=\"update(item)\"><i class=\"far fa-edit hvr-icon\"></i></a>\r\n                    <a class=\"clickable hvr-icon-push\" (click)=\"delete(item)\"><i class=\"far fa-trash-alt hvr-icon\"></i></a>\r\n                  </div>\r\n                }\r\n\r\n                <div class=\"faqs__answer\" [innerHTML]=\"(item.answer | highlight : keywords) | safeHtml\"></div>\r\n              </ui-accordion-content>\r\n            </ui-accordion-panel>\r\n          }\r\n        </ui-accordion>\r\n      } @else {\r\n        <smz-icon-message\r\n          [message]=\"manager.config.placeholders.emptyMessage\"\r\n        [comment]=\"(manager.config.creationClaim | rbkCanAccess) ?\r\n        manager.config.placeholders.creationMessage :\r\n            (keywords === '') ?\r\n            manager.config.placeholders.supportMessage :\r\n            manager.config.placeholders.noSearchResultsMessage\"\r\n          >\r\n        </smz-icon-message>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"col-12\">\r\n    @if ((manager.config.creationClaim | rbkCanAccess) && formConfig != null) {\r\n      <h3>{{ manager.config.placeholders.creationTitle }}</h3>\r\n      <smz-form-group #creationComponent [config]=\"formConfig\"></smz-form-group>\r\n      <button smzButton type=\"button\" label=\"ENVIAR\" [disabled]=\"!creationComponent.isValid\" (click)=\"create(creationComponent)\" styleClass=\"p-button-ghost\"></button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".faqs__answer{white-space:pre-wrap}.faqs__actions{width:100%;text-align:right;padding:0 0 10px}.p-input-icon-left,.p-input-icon-right{position:relative}.ui-float-icon{position:absolute;top:50%;margin-top:-.5rem;left:.5rem;color:#6c757d}.p-input-icon-left>.ui-inputtext{padding-left:2rem;border-left-width:1px}\n"], dependencies: [{ kind: "component", type: SmzIconMessageComponent, selector: "smz-icon-message", inputs: ["icon", "message", "comment"] }, { kind: "component", type: FormGroupComponent, selector: "smz-form-group", inputs: ["config"], outputs: ["statusChanges", "initialStateChanged", "previousStateChanged", "submit"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i2.SmzAccordionComponent, selector: "ui-accordion", inputs: ["value", "multiple", "transitionOptions"], outputs: ["valueChange", "opened", "closed"] }, { kind: "component", type: i2.SmzAccordionPanelComponent, selector: "ui-accordion-panel", inputs: ["value"] }, { kind: "component", type: i2.SmzAccordionHeaderComponent, selector: "ui-accordion-header" }, { kind: "component", type: i2.SmzAccordionContentComponent, selector: "ui-accordion-content" }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzInputGroupComponent, selector: "ui-input-group" }, { kind: "component", type: i2.SmzInputGroupAddonComponent, selector: "ui-input-group-addon" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: RbkCanAccessPipe, name: "rbkCanAccess" }, { kind: "pipe", type: SearchFaqsPipe, name: "searchFaqs" }, { kind: "pipe", type: HighlightSearch, name: "highlight" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
 __decorate([
     Confirmable('Confirma a criação desta pergunta/resposta ?', 'Aviso')
@@ -35578,7 +35632,7 @@ __decorate([
 ], FaqsContentComponent.prototype, "delete", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FaqsContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-faqs-content', standalone: false, template: "<div class=\"grid\">\n\n  <div class=\"col-12\">\n    <h3>{{ manager.config.placeholders.searchTitle }}</h3>\n\n    <ui-input-group>\n      <ui-input-group-addon>\n        <i class=\"fa-solid fa-magnifying-glass\"></i>\n      </ui-input-group-addon>\n\n      <input\n        type=\"text\"\n        smzInputText\n        [(ngModel)]=\"keywords\"\n        [placeholder]=\"manager.config.placeholders.searchPlaceholder\"\n      />\n\n      <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" [disabled]=\"keywords === ''\" (click)=\"keywords = ''\" styleClass=\"p-button-warn\"></button>\n    </ui-input-group>\n  </div>\n\n  <div class=\"col-12\">\n    @if ((items | searchFaqs : keywords); as filtered) {\n      @if (filtered.length > 0) {\n        <h3>{{ manager.config.placeholders.contentTitle }}</h3>\n        <ui-accordion [multiple]=\"true\">\n          @for (item of filtered; track item.id) {\n            <ui-accordion-panel [value]=\"item.id\">\n              <ui-accordion-header>{{ item.question }}</ui-accordion-header>\n\n              <ui-accordion-content>\n                @if (manager.config.creationClaim | rbkCanAccess) {\n                  <div class=\"faqs__actions\">\n                    <a class=\"clickable hvr-icon-push mr-2\" (click)=\"update(item)\"><i class=\"far fa-edit hvr-icon\"></i></a>\n                    <a class=\"clickable hvr-icon-push\" (click)=\"delete(item)\"><i class=\"far fa-trash-alt hvr-icon\"></i></a>\n                  </div>\n                }\n\n                <div class=\"faqs__answer\" [innerHTML]=\"(item.answer | highlight : keywords) | safeHtml\"></div>\n              </ui-accordion-content>\n            </ui-accordion-panel>\n          }\n        </ui-accordion>\n      } @else {\n        <smz-icon-message\n          [message]=\"manager.config.placeholders.emptyMessage\"\n        [comment]=\"(manager.config.creationClaim | rbkCanAccess) ?\n        manager.config.placeholders.creationMessage :\n            (keywords === '') ?\n            manager.config.placeholders.supportMessage :\n            manager.config.placeholders.noSearchResultsMessage\"\n          >\n        </smz-icon-message>\n      }\n    }\n  </div>\n\n  <div class=\"col-12\">\n    @if ((manager.config.creationClaim | rbkCanAccess) && formConfig != null) {\n      <h3>{{ manager.config.placeholders.creationTitle }}</h3>\n      <smz-form-group #creationComponent [config]=\"formConfig\"></smz-form-group>\n      <button smzButton type=\"button\" label=\"ENVIAR\" [disabled]=\"!creationComponent.isValid\" (click)=\"create(creationComponent)\" styleClass=\"p-button-ghost\"></button>\n    }\n  </div>\n</div>\n", styles: [".faqs__answer{white-space:pre-wrap}.faqs__actions{width:100%;text-align:right;padding:0 0 10px}.p-input-icon-left,.p-input-icon-right{position:relative}.ui-float-icon{position:absolute;top:50%;margin-top:-.5rem;left:.5rem;color:#6c757d}.p-input-icon-left>.ui-inputtext{padding-left:2rem;border-left-width:1px}\n"] }]
+            args: [{ selector: 'smz-faqs-content', standalone: false, template: "<div class=\"grid\">\r\n\r\n  <div class=\"col-12\">\r\n    <h3>{{ manager.config.placeholders.searchTitle }}</h3>\r\n\r\n    <ui-input-group>\r\n      <ui-input-group-addon>\r\n        <i class=\"fa-solid fa-magnifying-glass\"></i>\r\n      </ui-input-group-addon>\r\n\r\n      <input\r\n        type=\"text\"\r\n        smzInputText\r\n        [(ngModel)]=\"keywords\"\r\n        [placeholder]=\"manager.config.placeholders.searchPlaceholder\"\r\n      />\r\n\r\n      <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" [disabled]=\"keywords === ''\" (click)=\"keywords = ''\" styleClass=\"p-button-warn\"></button>\r\n    </ui-input-group>\r\n  </div>\r\n\r\n  <div class=\"col-12\">\r\n    @if ((items | searchFaqs : keywords); as filtered) {\r\n      @if (filtered.length > 0) {\r\n        <h3>{{ manager.config.placeholders.contentTitle }}</h3>\r\n        <ui-accordion [multiple]=\"true\">\r\n          @for (item of filtered; track item.id) {\r\n            <ui-accordion-panel [value]=\"item.id\">\r\n              <ui-accordion-header>{{ item.question }}</ui-accordion-header>\r\n\r\n              <ui-accordion-content>\r\n                @if (manager.config.creationClaim | rbkCanAccess) {\r\n                  <div class=\"faqs__actions\">\r\n                    <a class=\"clickable hvr-icon-push mr-2\" (click)=\"update(item)\"><i class=\"far fa-edit hvr-icon\"></i></a>\r\n                    <a class=\"clickable hvr-icon-push\" (click)=\"delete(item)\"><i class=\"far fa-trash-alt hvr-icon\"></i></a>\r\n                  </div>\r\n                }\r\n\r\n                <div class=\"faqs__answer\" [innerHTML]=\"(item.answer | highlight : keywords) | safeHtml\"></div>\r\n              </ui-accordion-content>\r\n            </ui-accordion-panel>\r\n          }\r\n        </ui-accordion>\r\n      } @else {\r\n        <smz-icon-message\r\n          [message]=\"manager.config.placeholders.emptyMessage\"\r\n        [comment]=\"(manager.config.creationClaim | rbkCanAccess) ?\r\n        manager.config.placeholders.creationMessage :\r\n            (keywords === '') ?\r\n            manager.config.placeholders.supportMessage :\r\n            manager.config.placeholders.noSearchResultsMessage\"\r\n          >\r\n        </smz-icon-message>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"col-12\">\r\n    @if ((manager.config.creationClaim | rbkCanAccess) && formConfig != null) {\r\n      <h3>{{ manager.config.placeholders.creationTitle }}</h3>\r\n      <smz-form-group #creationComponent [config]=\"formConfig\"></smz-form-group>\r\n      <button smzButton type=\"button\" label=\"ENVIAR\" [disabled]=\"!creationComponent.isValid\" (click)=\"create(creationComponent)\" styleClass=\"p-button-ghost\"></button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".faqs__answer{white-space:pre-wrap}.faqs__actions{width:100%;text-align:right;padding:0 0 10px}.p-input-icon-left,.p-input-icon-right{position:relative}.ui-float-icon{position:absolute;top:50%;margin-top:-.5rem;left:.5rem;color:#6c757d}.p-input-icon-left>.ui-inputtext{padding-left:2rem;border-left-width:1px}\n"] }]
         }], ctorParameters: () => [{ type: FaqsManagerService }, { type: i0.ChangeDetectorRef }, { type: SmzDialogsService }], propDecorators: { items: [{
                 type: Input
             }], create: [], delete: [] } });
@@ -36466,11 +36520,11 @@ class SmzDockComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDockComponent, isStandalone: false, selector: "smz-ui-dock", ngImport: i0, template: "<div class=\"dock-window fixed bottom-0 left-0 right-0 z-50\" [class.hidden]=\"dockService.dockItems().length === 0\">\n  <div class=\"flex items-end justify-center gap-2 px-4 py-2\" role=\"toolbar\" aria-label=\"Janelas minimizadas\">\n    @for (item of dockService.dockItems(); track item.id) {\n      <div class=\"relative w-16 cursor-pointer transition-transform duration-ui hover:-translate-y-1\" role=\"button\" tabindex=\"0\" (click)=\"execute(item)\" (keydown.enter)=\"execute(item)\">\n        <img [src]=\"item.icon\" width=\"100%\" [alt]=\"item.label ?? ''\">\n        @if (item.label != null) {\n          <div class=\"absolute inset-0 grid grid-nogutter items-center justify-center flex-col\">\n            <div class=\"text-center font-medium my-auto pt-2 select-none text-black text-xs\">{{ item.label }}</div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDockComponent, isStandalone: false, selector: "smz-ui-dock", ngImport: i0, template: "<div class=\"dock-window fixed bottom-0 left-0 right-0 z-50\" [class.hidden]=\"dockService.dockItems().length === 0\">\r\n  <div class=\"flex items-end justify-center gap-2 px-4 py-2\" role=\"toolbar\" aria-label=\"Janelas minimizadas\">\r\n    @for (item of dockService.dockItems(); track item.id) {\r\n      <div class=\"relative w-16 cursor-pointer transition-transform duration-ui hover:-translate-y-1\" role=\"button\" tabindex=\"0\" (click)=\"execute(item)\" (keydown.enter)=\"execute(item)\">\r\n        <img [src]=\"item.icon\" width=\"100%\" [alt]=\"item.label ?? ''\">\r\n        @if (item.label != null) {\r\n          <div class=\"absolute inset-0 grid grid-nogutter items-center justify-center flex-col\">\r\n            <div class=\"text-center font-medium my-auto pt-2 select-none text-black text-xs\">{{ item.label }}</div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-dock', standalone: false, template: "<div class=\"dock-window fixed bottom-0 left-0 right-0 z-50\" [class.hidden]=\"dockService.dockItems().length === 0\">\n  <div class=\"flex items-end justify-center gap-2 px-4 py-2\" role=\"toolbar\" aria-label=\"Janelas minimizadas\">\n    @for (item of dockService.dockItems(); track item.id) {\n      <div class=\"relative w-16 cursor-pointer transition-transform duration-ui hover:-translate-y-1\" role=\"button\" tabindex=\"0\" (click)=\"execute(item)\" (keydown.enter)=\"execute(item)\">\n        <img [src]=\"item.icon\" width=\"100%\" [alt]=\"item.label ?? ''\">\n        @if (item.label != null) {\n          <div class=\"absolute inset-0 grid grid-nogutter items-center justify-center flex-col\">\n            <div class=\"text-center font-medium my-auto pt-2 select-none text-black text-xs\">{{ item.label }}</div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'smz-ui-dock', standalone: false, template: "<div class=\"dock-window fixed bottom-0 left-0 right-0 z-50\" [class.hidden]=\"dockService.dockItems().length === 0\">\r\n  <div class=\"flex items-end justify-center gap-2 px-4 py-2\" role=\"toolbar\" aria-label=\"Janelas minimizadas\">\r\n    @for (item of dockService.dockItems(); track item.id) {\r\n      <div class=\"relative w-16 cursor-pointer transition-transform duration-ui hover:-translate-y-1\" role=\"button\" tabindex=\"0\" (click)=\"execute(item)\" (keydown.enter)=\"execute(item)\">\r\n        <img [src]=\"item.icon\" width=\"100%\" [alt]=\"item.label ?? ''\">\r\n        @if (item.label != null) {\r\n          <div class=\"absolute inset-0 grid grid-nogutter items-center justify-center flex-col\">\r\n            <div class=\"text-center font-medium my-auto pt-2 select-none text-black text-xs\">{{ item.label }}</div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 /* 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 */
@@ -37843,9 +37897,9 @@ class SmzExportDialogService {
         const documentState = this.buildDocumentState(data, plainItems);
         this.dialogs.open(new SmzDialogBuilder()
             .setTitle(data.title)
-            .setLayout('EXTRA_SMALL', 'col-12')
-            .setLayout('LARGE', 'col-10')
-            .setLayout('EXTRA_LARGE', 'col-10')
+            .setLayout('EXTRA_SMALL', 12)
+            .setLayout('LARGE', 10)
+            .setLayout('EXTRA_LARGE', 10)
             .closeOnEscape()
             .allowMaximize()
             .dismissableMask()
@@ -38427,11 +38481,11 @@ function showSwitchTenantDialog() {
         .map(x => ({ id: x.alias, name: x.name }));
     dialogs.open(new SmzDialogBuilder()
         .setTitle(`Alterar ${tenantDisplayName}`)
-        .setLayout('EXTRA_LARGE', 'col-12')
-        .setLayout('LARGE', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 12)
+        .setLayout('LARGE', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('EXTRA_SMALL', 12)
         .form()
         .disableFlattenResponse()
         .group()
@@ -38439,19 +38493,19 @@ function showSwitchTenantDialog() {
         // TENANT ATUAL
         .text('currentTenant', `${tenantDisplayName} atual`, currentTenant.name)
         .disable()
-        .setLayout('EXTRA_LARGE', 'col-12')
-        .setLayout('LARGE', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 12)
+        .setLayout('LARGE', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('EXTRA_SMALL', 12)
         .group
         // SELETOR DE TENANT
         .dropdown('tenant', 'Alterar para', allowedTenants)
-        .setLayout('EXTRA_LARGE', 'col-12')
-        .setLayout('LARGE', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 12)
+        .setLayout('LARGE', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('EXTRA_SMALL', 12)
         .validators().required().input
         .group
         .form
@@ -38695,11 +38749,11 @@ function showSwitchLocalizationDialog() {
         .map(x => ({ id: x.alias, name: x.name }));
     dialogs.open(new SmzDialogBuilder()
         .setTitle(`Alterar ${tenantDisplayName}`)
-        .setLayout('EXTRA_LARGE', 'col-12')
-        .setLayout('LARGE', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 12)
+        .setLayout('LARGE', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('EXTRA_SMALL', 12)
         .form()
         .disableFlattenResponse()
         .group()
@@ -38707,19 +38761,19 @@ function showSwitchLocalizationDialog() {
         // TENANT ATUAL
         .text('currentTenant', `${tenantDisplayName} atual`, currentTenant.name)
         .disable()
-        .setLayout('EXTRA_LARGE', 'col-12')
-        .setLayout('LARGE', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 12)
+        .setLayout('LARGE', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('EXTRA_SMALL', 12)
         .group
         // SELETOR DE TENANT
         .dropdown('tenant', 'Alterar para', allowedTenants)
-        .setLayout('EXTRA_LARGE', 'col-12')
-        .setLayout('LARGE', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 12)
+        .setLayout('LARGE', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('EXTRA_SMALL', 12)
         .validators().required().input
         .group
         .form
@@ -38777,72 +38831,72 @@ class SmzLocalizationSwitchComponent {
         showSwitchLocalizationDialog();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzLocalizationSwitchComponent, deps: [{ token: i1$3.Store }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzLocalizationSwitchComponent, isStandalone: true, selector: "smz-localization-switch", host: { classAttribute: "h-full relative" }, ngImport: i0, template: `
-  @if (showLocalizationSwitch) {
-    <smz-responsive class="col grid grid-nogutter w-full items-center justify-start">
-      <!-- LANDSCAPE -->
-      <ng-template smzTemplate="landscape">
-        <div  class="h-full grid grid-nogutter items-center justify-center">
-          <ui-select appendTo="body" [options]="locales$ | async" styleClass="smz-tenant-switch-small" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (changed)="onSelectorChange($event.value)">
-            <ng-template smzTemplate="selectedItem">
-              @if (selected) {
-                <div class="flex align-items-center gap-2">
-                  <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selected.country.toLowerCase()" style="width: 18px"/>
-                  <div>{{ selected.name }}</div>
-                </div>
-              }
-            </ng-template>
-            <ng-template let-locale smzTemplate="item">
-              <div class="flex align-items-center gap-2">
-                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + locale.country.toLowerCase()" style="width: 18px"/>
-                <div>{{ locale.name }}</div>
-              </div>
-            </ng-template>
-          </ui-select>
-        </div>
-      </ng-template>
-      <!-- PORTRAIT -->
-      <ng-template smzTemplate="portrait">
-        <i class="fa-solid fa-repeat cursor-pointer text-2xl text-text-color switch-tenant" (click)="showSwitchDialog()">
-        </i>
-      </ng-template>
-    </smz-responsive>
-  }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzLocalizationSwitchComponent, isStandalone: true, selector: "smz-localization-switch", host: { classAttribute: "h-full relative" }, ngImport: i0, template: `
+  @if (showLocalizationSwitch) {
+    <smz-responsive class="col grid grid-nogutter w-full items-center justify-start">
+      <!-- LANDSCAPE -->
+      <ng-template smzTemplate="landscape">
+        <div  class="h-full grid grid-nogutter items-center justify-center">
+          <ui-select appendTo="body" [options]="locales$ | async" styleClass="smz-tenant-switch-small" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (changed)="onSelectorChange($event.value)">
+            <ng-template smzTemplate="selectedItem">
+              @if (selected) {
+                <div class="flex align-items-center gap-2">
+                  <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selected.country.toLowerCase()" style="width: 18px"/>
+                  <div>{{ selected.name }}</div>
+                </div>
+              }
+            </ng-template>
+            <ng-template let-locale smzTemplate="item">
+              <div class="flex align-items-center gap-2">
+                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + locale.country.toLowerCase()" style="width: 18px"/>
+                <div>{{ locale.name }}</div>
+              </div>
+            </ng-template>
+          </ui-select>
+        </div>
+      </ng-template>
+      <!-- PORTRAIT -->
+      <ng-template smzTemplate="portrait">
+        <i class="fa-solid fa-repeat cursor-pointer text-2xl text-text-color switch-tenant" (click)="showSwitchDialog()">
+        </i>
+      </ng-template>
+    </smz-responsive>
+  }
   `, isInline: true, styles: [".smz-localization-switch-small .p-inputtext{padding:.5rem .75rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SmzSelectComponent, selector: "ui-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "emptyMessage", "emptyFilterMessage", "styleClass", "inputId", "ariaLabel", "appendTo"], outputs: ["changed", "showed", "hidden"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzLocalizationSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-localization-switch', imports: [CommonModule, SmzSelectComponent, FormsModule, SmzTemplateDirective, SmzResponsiveComponent], host: { class: 'h-full relative' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: `
-  @if (showLocalizationSwitch) {
-    <smz-responsive class="col grid grid-nogutter w-full items-center justify-start">
-      <!-- LANDSCAPE -->
-      <ng-template smzTemplate="landscape">
-        <div  class="h-full grid grid-nogutter items-center justify-center">
-          <ui-select appendTo="body" [options]="locales$ | async" styleClass="smz-tenant-switch-small" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (changed)="onSelectorChange($event.value)">
-            <ng-template smzTemplate="selectedItem">
-              @if (selected) {
-                <div class="flex align-items-center gap-2">
-                  <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selected.country.toLowerCase()" style="width: 18px"/>
-                  <div>{{ selected.name }}</div>
-                </div>
-              }
-            </ng-template>
-            <ng-template let-locale smzTemplate="item">
-              <div class="flex align-items-center gap-2">
-                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + locale.country.toLowerCase()" style="width: 18px"/>
-                <div>{{ locale.name }}</div>
-              </div>
-            </ng-template>
-          </ui-select>
-        </div>
-      </ng-template>
-      <!-- PORTRAIT -->
-      <ng-template smzTemplate="portrait">
-        <i class="fa-solid fa-repeat cursor-pointer text-2xl text-text-color switch-tenant" (click)="showSwitchDialog()">
-        </i>
-      </ng-template>
-    </smz-responsive>
-  }
+            args: [{ selector: 'smz-localization-switch', imports: [CommonModule, SmzSelectComponent, FormsModule, SmzTemplateDirective, SmzResponsiveComponent], host: { class: 'h-full relative' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: `
+  @if (showLocalizationSwitch) {
+    <smz-responsive class="col grid grid-nogutter w-full items-center justify-start">
+      <!-- LANDSCAPE -->
+      <ng-template smzTemplate="landscape">
+        <div  class="h-full grid grid-nogutter items-center justify-center">
+          <ui-select appendTo="body" [options]="locales$ | async" styleClass="smz-tenant-switch-small" optionLabel="alias" dataKey="name" [(ngModel)]="selected" (changed)="onSelectorChange($event.value)">
+            <ng-template smzTemplate="selectedItem">
+              @if (selected) {
+                <div class="flex align-items-center gap-2">
+                  <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selected.country.toLowerCase()" style="width: 18px"/>
+                  <div>{{ selected.name }}</div>
+                </div>
+              }
+            </ng-template>
+            <ng-template let-locale smzTemplate="item">
+              <div class="flex align-items-center gap-2">
+                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + locale.country.toLowerCase()" style="width: 18px"/>
+                <div>{{ locale.name }}</div>
+              </div>
+            </ng-template>
+          </ui-select>
+        </div>
+      </ng-template>
+      <!-- PORTRAIT -->
+      <ng-template smzTemplate="portrait">
+        <i class="fa-solid fa-repeat cursor-pointer text-2xl text-text-color switch-tenant" (click)="showSwitchDialog()">
+        </i>
+      </ng-template>
+    </smz-responsive>
+  }
   `, styles: [".smz-localization-switch-small .p-inputtext{padding:.5rem .75rem!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Store }] });
 
@@ -40534,38 +40588,38 @@ class AthenaNotificationItemsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AthenaNotificationItemsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AthenaNotificationItemsComponent, isStandalone: false, selector: "[smz-ui-athena-notification-items]", inputs: { items: "items" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "collapse($event)" } }, ngImport: i0, template: `
-    @for (item of items; track item; let index = $index) {
-      <li role="menuitem">
-        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
-          @if (item.icon != null) {
-            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
-          }
-          <div class="notification-item">
-            <div class="notification-summary">{{ item.summary }}</div>
-            <div class="notification-detail" [innerHtml]="item.details"></div>
-          </div>
-        </a>
-      </li>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AthenaNotificationItemsComponent, isStandalone: false, selector: "[smz-ui-athena-notification-items]", inputs: { items: "items" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "collapse($event)" } }, ngImport: i0, template: `
+    @for (item of items; track item; let index = $index) {
+      <li role="menuitem">
+        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
+          @if (item.icon != null) {
+            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
+          }
+          <div class="notification-item">
+            <div class="notification-summary">{{ item.summary }}</div>
+            <div class="notification-detail" [innerHtml]="item.details"></div>
+          </div>
+        </a>
+      </li>
+    }
     `, isInline: true, styles: [".notification-summary{font-weight:600}.notification-detail{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AthenaNotificationItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[smz-ui-athena-notification-items]', host: { '(document:click)': 'collapse($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @for (item of items; track item; let index = $index) {
-      <li role="menuitem">
-        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
-          @if (item.icon != null) {
-            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
-          }
-          <div class="notification-item">
-            <div class="notification-summary">{{ item.summary }}</div>
-            <div class="notification-detail" [innerHtml]="item.details"></div>
-          </div>
-        </a>
-      </li>
-    }
+            args: [{ selector: '[smz-ui-athena-notification-items]', host: { '(document:click)': 'collapse($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (item of items; track item; let index = $index) {
+      <li role="menuitem">
+        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
+          @if (item.icon != null) {
+            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
+          }
+          <div class="notification-item">
+            <div class="notification-summary">{{ item.summary }}</div>
+            <div class="notification-detail" [innerHtml]="item.details"></div>
+          </div>
+        </a>
+      </li>
+    }
     `, standalone: false, styles: [".notification-summary{font-weight:600}.notification-detail{font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
                 type: Input
@@ -41226,7 +41280,7 @@ class NotificationsListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotificationsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NotificationsListComponent, isStandalone: false, selector: "smz-notifications-list", ngImport: i0, template: "<ng-container *ngVar=\"hasRuningRequest$ | async as hasRuningRequest\">\n\n  <smz-ui-table #smzTable [items]=\"(notifications$ | async) | filterBy : ['status'] : currentFolder.status\" [state]=\"tableState\" [loading]=\"hasRuningRequest\" (selectionChange)=\"onSelect($event)\">\n\n    <ng-template smzTemplate=\"caption\" let-primeTable>\n      @if (uiConfig.rbkUtils.notifications.showRefreshButton) {\n        <button smzButton smzRipple type=\"button\" icon=\"fa-solid fa-rotate\" smzTooltip=\"Atualizar\" class=\"mr-3\" (click)=\"refresh()\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n      }\n      <ui-select-button appendTo=\"body\" [options]=\"folders\" [(ngModel)]=\"currentFolder\" optionLabel=\"icon\" (changed)=\"currentFolder.rebuild()\">\n        <ng-template #item let-item>\n          <i [ngClass]=\"item.icon\" [smzTooltip]=\"item.tooltip\"></i>\n          <span class=\"ml-1 text-sm\">({{ item.count$ | async }})</span>\n        </ng-template>\n      </ui-select-button>\n    </ng-template>\n\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\n    <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n      @switch (col.field) {\n        @case ('searchData') {\n          <div class=\"grid grid-nogutter items-center justify-between\" (mouseenter)=\"item._showActions = true\" (mouseleave)=\"item._showActions = false\">\n            <div class=\"col\">\n              <smz-notification-item [item]=\"item\" [showDate]=\"true\"></smz-notification-item>\n            </div>\n            @if (item._showActions) {\n              <div class=\"grid grid-nogutter items-center justify-start gap-4 flex-col pl-4 animate__animated animate__fadeIn relative\" clickStopPropagation>\n                @if (item.status !== status.ARCHIVED) {\n                  <i #archiveButton smzTooltip=\"Arquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-box-archive p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"archive([item])\"></i>\n                }\n                @if (item.status === status.ARCHIVED) {\n                  <i #inboxButton smzTooltip=\"Desarquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-inbox p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"moveToInbox([item])\"></i>\n                }\n                @if (item.route != '') {\n                  <i #routeButton smzTooltip=\"Navegar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-share p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"navigate(item)\"></i>\n                }\n                @if (item.link != '') {\n                  <i #linkButton smzTooltip=\"Abrir Link\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-up-right-from-square p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"openLink(item)\"></i>\n                }\n                <i #trashButton smzTooltip=\"Excluir\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-trash p-button-rounded p-button-text p-button-plain relative text-gray-500\" styleClass=\"relative\" (click)=\"remove(item)\"></i>\n              </div>\n            }\n          </div>\n        }\n      }\n\n    </ng-template>\n\n  </smz-ui-table>\n\n</ng-container>", styles: ["smz-notifications-list .database-title{font-size:1.2rem}smz-notifications-list i .p-tooltip .p-tooltip-text{word-break:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: NotificationItemComponent, selector: "smz-notification-item", inputs: ["item", "charactersLimit", "showDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NotificationsListComponent, isStandalone: false, selector: "smz-notifications-list", ngImport: i0, template: "<ng-container *ngVar=\"hasRuningRequest$ | async as hasRuningRequest\">\r\n\r\n  <smz-ui-table #smzTable [items]=\"(notifications$ | async) | filterBy : ['status'] : currentFolder.status\" [state]=\"tableState\" [loading]=\"hasRuningRequest\" (selectionChange)=\"onSelect($event)\">\r\n\r\n    <ng-template smzTemplate=\"caption\" let-primeTable>\r\n      @if (uiConfig.rbkUtils.notifications.showRefreshButton) {\r\n        <button smzButton smzRipple type=\"button\" icon=\"fa-solid fa-rotate\" smzTooltip=\"Atualizar\" class=\"mr-3\" (click)=\"refresh()\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\r\n      }\r\n      <ui-select-button appendTo=\"body\" [options]=\"folders\" [(ngModel)]=\"currentFolder\" optionLabel=\"icon\" (changed)=\"currentFolder.rebuild()\">\r\n        <ng-template #item let-item>\r\n          <i [ngClass]=\"item.icon\" [smzTooltip]=\"item.tooltip\"></i>\r\n          <span class=\"ml-1 text-sm\">({{ item.count$ | async }})</span>\r\n        </ng-template>\r\n      </ui-select-button>\r\n    </ng-template>\r\n\r\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n    <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\r\n\r\n      @switch (col.field) {\r\n        @case ('searchData') {\r\n          <div class=\"grid grid-nogutter items-center justify-between\" (mouseenter)=\"item._showActions = true\" (mouseleave)=\"item._showActions = false\">\r\n            <div class=\"col\">\r\n              <smz-notification-item [item]=\"item\" [showDate]=\"true\"></smz-notification-item>\r\n            </div>\r\n            @if (item._showActions) {\r\n              <div class=\"grid grid-nogutter items-center justify-start gap-4 flex-col pl-4 animate__animated animate__fadeIn relative\" clickStopPropagation>\r\n                @if (item.status !== status.ARCHIVED) {\r\n                  <i #archiveButton smzTooltip=\"Arquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-box-archive p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"archive([item])\"></i>\r\n                }\r\n                @if (item.status === status.ARCHIVED) {\r\n                  <i #inboxButton smzTooltip=\"Desarquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-inbox p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"moveToInbox([item])\"></i>\r\n                }\r\n                @if (item.route != '') {\r\n                  <i #routeButton smzTooltip=\"Navegar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-share p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"navigate(item)\"></i>\r\n                }\r\n                @if (item.link != '') {\r\n                  <i #linkButton smzTooltip=\"Abrir Link\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-up-right-from-square p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"openLink(item)\"></i>\r\n                }\r\n                <i #trashButton smzTooltip=\"Excluir\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-trash p-button-rounded p-button-text p-button-plain relative text-gray-500\" styleClass=\"relative\" (click)=\"remove(item)\"></i>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n\r\n    </ng-template>\r\n\r\n  </smz-ui-table>\r\n\r\n</ng-container>", styles: ["smz-notifications-list .database-title{font-size:1.2rem}smz-notifications-list i .p-tooltip .p-tooltip-text{word-break:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: NotificationItemComponent, selector: "smz-notification-item", inputs: ["item", "charactersLimit", "showDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 __decorate([
     Confirmable('Deseja realmente excluir as notificações selecionadas ?<br>Está operação não poderá ser desfeita.', 'Exclusão', true)
@@ -41236,18 +41290,18 @@ __decorate([
 ], NotificationsListComponent.prototype, "remove", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotificationsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-notifications-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container *ngVar=\"hasRuningRequest$ | async as hasRuningRequest\">\n\n  <smz-ui-table #smzTable [items]=\"(notifications$ | async) | filterBy : ['status'] : currentFolder.status\" [state]=\"tableState\" [loading]=\"hasRuningRequest\" (selectionChange)=\"onSelect($event)\">\n\n    <ng-template smzTemplate=\"caption\" let-primeTable>\n      @if (uiConfig.rbkUtils.notifications.showRefreshButton) {\n        <button smzButton smzRipple type=\"button\" icon=\"fa-solid fa-rotate\" smzTooltip=\"Atualizar\" class=\"mr-3\" (click)=\"refresh()\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n      }\n      <ui-select-button appendTo=\"body\" [options]=\"folders\" [(ngModel)]=\"currentFolder\" optionLabel=\"icon\" (changed)=\"currentFolder.rebuild()\">\n        <ng-template #item let-item>\n          <i [ngClass]=\"item.icon\" [smzTooltip]=\"item.tooltip\"></i>\n          <span class=\"ml-1 text-sm\">({{ item.count$ | async }})</span>\n        </ng-template>\n      </ui-select-button>\n    </ng-template>\n\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\n    <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n      @switch (col.field) {\n        @case ('searchData') {\n          <div class=\"grid grid-nogutter items-center justify-between\" (mouseenter)=\"item._showActions = true\" (mouseleave)=\"item._showActions = false\">\n            <div class=\"col\">\n              <smz-notification-item [item]=\"item\" [showDate]=\"true\"></smz-notification-item>\n            </div>\n            @if (item._showActions) {\n              <div class=\"grid grid-nogutter items-center justify-start gap-4 flex-col pl-4 animate__animated animate__fadeIn relative\" clickStopPropagation>\n                @if (item.status !== status.ARCHIVED) {\n                  <i #archiveButton smzTooltip=\"Arquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-box-archive p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"archive([item])\"></i>\n                }\n                @if (item.status === status.ARCHIVED) {\n                  <i #inboxButton smzTooltip=\"Desarquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-inbox p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"moveToInbox([item])\"></i>\n                }\n                @if (item.route != '') {\n                  <i #routeButton smzTooltip=\"Navegar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-share p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"navigate(item)\"></i>\n                }\n                @if (item.link != '') {\n                  <i #linkButton smzTooltip=\"Abrir Link\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-up-right-from-square p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"openLink(item)\"></i>\n                }\n                <i #trashButton smzTooltip=\"Excluir\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-trash p-button-rounded p-button-text p-button-plain relative text-gray-500\" styleClass=\"relative\" (click)=\"remove(item)\"></i>\n              </div>\n            }\n          </div>\n        }\n      }\n\n    </ng-template>\n\n  </smz-ui-table>\n\n</ng-container>", styles: ["smz-notifications-list .database-title{font-size:1.2rem}smz-notifications-list i .p-tooltip .p-tooltip-text{word-break:normal}\n"] }]
+            args: [{ selector: 'smz-notifications-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container *ngVar=\"hasRuningRequest$ | async as hasRuningRequest\">\r\n\r\n  <smz-ui-table #smzTable [items]=\"(notifications$ | async) | filterBy : ['status'] : currentFolder.status\" [state]=\"tableState\" [loading]=\"hasRuningRequest\" (selectionChange)=\"onSelect($event)\">\r\n\r\n    <ng-template smzTemplate=\"caption\" let-primeTable>\r\n      @if (uiConfig.rbkUtils.notifications.showRefreshButton) {\r\n        <button smzButton smzRipple type=\"button\" icon=\"fa-solid fa-rotate\" smzTooltip=\"Atualizar\" class=\"mr-3\" (click)=\"refresh()\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\r\n      }\r\n      <ui-select-button appendTo=\"body\" [options]=\"folders\" [(ngModel)]=\"currentFolder\" optionLabel=\"icon\" (changed)=\"currentFolder.rebuild()\">\r\n        <ng-template #item let-item>\r\n          <i [ngClass]=\"item.icon\" [smzTooltip]=\"item.tooltip\"></i>\r\n          <span class=\"ml-1 text-sm\">({{ item.count$ | async }})</span>\r\n        </ng-template>\r\n      </ui-select-button>\r\n    </ng-template>\r\n\r\n    <!-- CONTE\u00DADOS COM OVERRIDE -->\r\n    <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\r\n\r\n      @switch (col.field) {\r\n        @case ('searchData') {\r\n          <div class=\"grid grid-nogutter items-center justify-between\" (mouseenter)=\"item._showActions = true\" (mouseleave)=\"item._showActions = false\">\r\n            <div class=\"col\">\r\n              <smz-notification-item [item]=\"item\" [showDate]=\"true\"></smz-notification-item>\r\n            </div>\r\n            @if (item._showActions) {\r\n              <div class=\"grid grid-nogutter items-center justify-start gap-4 flex-col pl-4 animate__animated animate__fadeIn relative\" clickStopPropagation>\r\n                @if (item.status !== status.ARCHIVED) {\r\n                  <i #archiveButton smzTooltip=\"Arquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-box-archive p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"archive([item])\"></i>\r\n                }\r\n                @if (item.status === status.ARCHIVED) {\r\n                  <i #inboxButton smzTooltip=\"Desarquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-inbox p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"moveToInbox([item])\"></i>\r\n                }\r\n                @if (item.route != '') {\r\n                  <i #routeButton smzTooltip=\"Navegar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-share p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"navigate(item)\"></i>\r\n                }\r\n                @if (item.link != '') {\r\n                  <i #linkButton smzTooltip=\"Abrir Link\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-up-right-from-square p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"openLink(item)\"></i>\r\n                }\r\n                <i #trashButton smzTooltip=\"Excluir\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-trash p-button-rounded p-button-text p-button-plain relative text-gray-500\" styleClass=\"relative\" (click)=\"remove(item)\"></i>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n\r\n    </ng-template>\r\n\r\n  </smz-ui-table>\r\n\r\n</ng-container>", styles: ["smz-notifications-list .database-title{font-size:1.2rem}smz-notifications-list i .p-tooltip .p-tooltip-text{word-break:normal}\n"] }]
         }], ctorParameters: () => [], propDecorators: { batchRemove: [], remove: [] } });
 
 function showNotificationsDialog() {
     const dialogs = GlobalInjector.instance.get(SmzDialogsService);
     dialogs.open(new SmzDialogBuilder()
         .setTitle('Notificações')
-        .setLayout('EXTRA_LARGE', 'col-12')
-        .setLayout('LARGE', 'col-12')
-        .setLayout('MEDIUM', 'col-12')
-        .setLayout('SMALL', 'col-12')
-        .setLayout('EXTRA_SMALL', 'col-12')
+        .setLayout('EXTRA_LARGE', 12)
+        .setLayout('LARGE', 12)
+        .setLayout('MEDIUM', 12)
+        .setLayout('SMALL', 12)
+        .setLayout('EXTRA_SMALL', 12)
         .hideFooter()
         .openMaximized()
         .setMinHeight(80)
@@ -41269,11 +41323,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) {\n  <smz-responsive class=\"col grid grid-nogutter w-full items-center justify-start\">\n    <!-- LANDSCAPE -->\n    <ng-template smzTemplate=\"landscape\">\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [value]=\"(newCount$ | async).toString()\">\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"op.toggle($event)\"></div>\n      </i>\n      <ui-popover #op [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [styleClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\n        <smz-notifications-list></smz-notifications-list>\n      </ui-popover>\n    </ng-template>\n    <!-- PORTRAIT -->\n    <ng-template smzTemplate=\"portrait\">\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [value]=\"(newCount$ | async).toString()\">\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"showDialog()\"></div>\n      </i>\n    </ng-template>\n  </smz-responsive>\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: i2.SmzBadgeDirective, selector: "[smzBadge]", inputs: ["value", "severity"] }, { kind: "component", type: i2.SmzPopoverComponent, selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }, { kind: "component", type: NotificationsListComponent, selector: "smz-notifications-list" }, { kind: "pipe", type: i1.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 smzTemplate=\"landscape\">\r\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [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      <ui-popover #op [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [styleClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\r\n        <smz-notifications-list></smz-notifications-list>\r\n      </ui-popover>\r\n    </ng-template>\r\n    <!-- PORTRAIT -->\r\n    <ng-template smzTemplate=\"portrait\">\r\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [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: i2.SmzBadgeDirective, selector: "[smzBadge]", inputs: ["value", "severity"] }, { kind: "component", type: i2.SmzPopoverComponent, selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }, { kind: "component", type: NotificationsListComponent, selector: "smz-notifications-list" }, { kind: "pipe", type: i1.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) {\n  <smz-responsive class=\"col grid grid-nogutter w-full items-center justify-start\">\n    <!-- LANDSCAPE -->\n    <ng-template smzTemplate=\"landscape\">\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [value]=\"(newCount$ | async).toString()\">\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"op.toggle($event)\"></div>\n      </i>\n      <ui-popover #op [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [styleClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\n        <smz-notifications-list></smz-notifications-list>\n      </ui-popover>\n    </ng-template>\n    <!-- PORTRAIT -->\n    <ng-template smzTemplate=\"portrait\">\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [value]=\"(newCount$ | async).toString()\">\n        <div class=\"absolute inset-0 notification-container cursor-pointer\" (click)=\"showDialog()\"></div>\n      </i>\n    </ng-template>\n  </smz-responsive>\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 smzTemplate=\"landscape\">\r\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [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      <ui-popover #op [style]=\"{ 'width': uiConfig.rbkUtils.notifications.width, 'z-index': uiConfig.rbkUtils.notifications.zIndex }\" [styleClass]=\"uiConfig.rbkUtils.notifications.styleClass\" appendTo=\"body\" [autoZIndex]=\"false\">\r\n        <smz-notifications-list></smz-notifications-list>\r\n      </ui-popover>\r\n    </ng-template>\r\n    <!-- PORTRAIT -->\r\n    <ng-template smzTemplate=\"portrait\">\r\n      <i class=\"fa-solid fa-bell badge-color regular-badge\" smzBadge [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 */
@@ -42655,38 +42709,38 @@ class NewAthenaNotificationItemsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NewAthenaNotificationItemsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NewAthenaNotificationItemsComponent, isStandalone: false, selector: "[smz-ui-new-athena-notification-items]", inputs: { items: "items" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "collapse($event)" } }, ngImport: i0, template: `
-    @for (item of items; track item; let index = $index) {
-      <li role="menuitem">
-        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
-          @if (item.icon != null) {
-            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
-          }
-          <div class="notification-item">
-            <div class="notification-summary">{{ item.summary }}</div>
-            <div class="notification-detail" [innerHtml]="item.details"></div>
-          </div>
-        </a>
-      </li>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NewAthenaNotificationItemsComponent, isStandalone: false, selector: "[smz-ui-new-athena-notification-items]", inputs: { items: "items" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "collapse($event)" } }, ngImport: i0, template: `
+    @for (item of items; track item; let index = $index) {
+      <li role="menuitem">
+        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
+          @if (item.icon != null) {
+            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
+          }
+          <div class="notification-item">
+            <div class="notification-summary">{{ item.summary }}</div>
+            <div class="notification-detail" [innerHtml]="item.details"></div>
+          </div>
+        </a>
+      </li>
+    }
     `, isInline: true, styles: [".notification-summary{font-weight:600}.notification-detail{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NewAthenaNotificationItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[smz-ui-new-athena-notification-items]', host: { '(document:click)': 'collapse($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @for (item of items; track item; let index = $index) {
-      <li role="menuitem">
-        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
-          @if (item.icon != null) {
-            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
-          }
-          <div class="notification-item">
-            <div class="notification-summary">{{ item.summary }}</div>
-            <div class="notification-detail" [innerHtml]="item.details"></div>
-          </div>
-        </a>
-      </li>
-    }
+            args: [{ selector: '[smz-ui-new-athena-notification-items]', host: { '(document:click)': 'collapse($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (item of items; track item; let index = $index) {
+      <li role="menuitem">
+        <a menuItemAction class="grid grid-nogutter items-center justify-start" style="display: flex;" [item]="item" [parent]="null" [breadcrumbs]="false" [tabindex]="index">
+          @if (item.icon != null) {
+            <i class="fa-solid mr-3" [ngClass]="item.icon"></i>
+          }
+          <div class="notification-item">
+            <div class="notification-summary">{{ item.summary }}</div>
+            <div class="notification-detail" [innerHtml]="item.details"></div>
+          </div>
+        </a>
+      </li>
+    }
     `, standalone: false, styles: [".notification-summary{font-weight:600}.notification-detail{font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
                 type: Input
@@ -42760,148 +42814,148 @@ class AthenaTopbarActionsComponent {
     showLocalizationSwitch = GlobalInjector.config.rbkUtils.uiLocalization.allowLocalizationSwitching;
     showTenantSwitch = GlobalInjector.config.rbkUtils.authentication.allowTenantSwitching;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AthenaTopbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AthenaTopbarActionsComponent, isStandalone: false, selector: "[smz-ui-new-athena-topbar-actions]", inputs: { profile: "profile", notifications: "notifications", headerExtrasTemplate: "headerExtrasTemplate" }, ngImport: i0, template: `
-      <ng-content></ng-content>
-
-      <div id="smz-ui-topbar"></div>
-
-      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start gap-5">
-
-        <!-- LANDSCAPE -->
-        <ng-template smzTemplate="landscape">
-
-          <span class="col extras-container justify-end extras-container">
-            @if (headerExtrasTemplate != null) {
-              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
-            }
-          </span>
-
-          @if (uiConfig.rbkUtils.notifications.url != null) {
-            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
-          } @else {
-            @if (notifications != null) {
-              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
-            }
-          }
-
-
-          @if (showLocalizationSwitch) {
-            <smz-localization-switch></smz-localization-switch>
-          }
-
-          @if (showTenantSwitch) {
-            <smz-tenant-switch></smz-tenant-switch>
-          }
-
-          @if (profile != null) {
-            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
-          }
-
-        </ng-template>
-
-        <!-- PORTRAIT -->
-        <ng-template smzTemplate="portrait">
-
-          <span class="col extras-container justify-end extras-container">
-            @if (headerExtrasTemplate != null) {
-              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
-            }
-          </span>
-
-          @if (uiConfig.rbkUtils.notifications.url != null) {
-            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
-          } @else {
-            @if (notifications != null) {
-              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
-            }
-          }
-
-
-          @if (showTenantSwitch) {
-            <smz-tenant-switch></smz-tenant-switch>
-          }
-
-          @if (profile != null) {
-            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
-          }
-
-        </ng-template>
-
-      </smz-responsive>
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AthenaTopbarActionsComponent, isStandalone: false, selector: "[smz-ui-new-athena-topbar-actions]", inputs: { profile: "profile", notifications: "notifications", headerExtrasTemplate: "headerExtrasTemplate" }, ngImport: i0, template: `
+      <ng-content></ng-content>
+
+      <div id="smz-ui-topbar"></div>
+
+      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start gap-5">
+
+        <!-- LANDSCAPE -->
+        <ng-template smzTemplate="landscape">
+
+          <span class="col extras-container justify-end extras-container">
+            @if (headerExtrasTemplate != null) {
+              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
+            }
+          </span>
+
+          @if (uiConfig.rbkUtils.notifications.url != null) {
+            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
+          } @else {
+            @if (notifications != null) {
+              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
+            }
+          }
+
+
+          @if (showLocalizationSwitch) {
+            <smz-localization-switch></smz-localization-switch>
+          }
+
+          @if (showTenantSwitch) {
+            <smz-tenant-switch></smz-tenant-switch>
+          }
+
+          @if (profile != null) {
+            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
+          }
+
+        </ng-template>
+
+        <!-- PORTRAIT -->
+        <ng-template smzTemplate="portrait">
+
+          <span class="col extras-container justify-end extras-container">
+            @if (headerExtrasTemplate != null) {
+              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
+            }
+          </span>
+
+          @if (uiConfig.rbkUtils.notifications.url != null) {
+            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
+          } @else {
+            @if (notifications != null) {
+              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
+            }
+          }
+
+
+          @if (showTenantSwitch) {
+            <smz-tenant-switch></smz-tenant-switch>
+          }
+
+          @if (profile != null) {
+            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
+          }
+
+        </ng-template>
+
+      </smz-responsive>
+
       `, isInline: true, styles: [".notification-container{position:relative;font-weight:700;margin-top:0;margin-right:30px;color:var(--text-color-secondary)}.extras-container{position:relative;height:100%;display:flex;align-items:center;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: NewAthenaProfileMenuComponent, selector: "[smz-ui-new-athena-profile-menu]", inputs: ["profile"] }, { kind: "component", type: NewAthenaNotificationsComponent, selector: "[smz-ui-new-athena-notifications]", inputs: ["items"] }, { kind: "component", type: SmzNotificationsComponent, selector: "smz-ui-notifications" }, { kind: "component", type: SmzTenantSwitchComponent, selector: "smz-tenant-switch" }, { kind: "component", type: SmzLocalizationSwitchComponent, selector: "smz-localization-switch" }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AthenaTopbarActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[smz-ui-new-athena-topbar-actions]', changeDetection: ChangeDetectionStrategy.Default, template: `
-      <ng-content></ng-content>
-
-      <div id="smz-ui-topbar"></div>
-
-      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start gap-5">
-
-        <!-- LANDSCAPE -->
-        <ng-template smzTemplate="landscape">
-
-          <span class="col extras-container justify-end extras-container">
-            @if (headerExtrasTemplate != null) {
-              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
-            }
-          </span>
-
-          @if (uiConfig.rbkUtils.notifications.url != null) {
-            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
-          } @else {
-            @if (notifications != null) {
-              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
-            }
-          }
-
-
-          @if (showLocalizationSwitch) {
-            <smz-localization-switch></smz-localization-switch>
-          }
-
-          @if (showTenantSwitch) {
-            <smz-tenant-switch></smz-tenant-switch>
-          }
-
-          @if (profile != null) {
-            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
-          }
-
-        </ng-template>
-
-        <!-- PORTRAIT -->
-        <ng-template smzTemplate="portrait">
-
-          <span class="col extras-container justify-end extras-container">
-            @if (headerExtrasTemplate != null) {
-              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
-            }
-          </span>
-
-          @if (uiConfig.rbkUtils.notifications.url != null) {
-            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
-          } @else {
-            @if (notifications != null) {
-              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
-            }
-          }
-
-
-          @if (showTenantSwitch) {
-            <smz-tenant-switch></smz-tenant-switch>
-          }
-
-          @if (profile != null) {
-            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
-          }
-
-        </ng-template>
-
-      </smz-responsive>
-
+            args: [{ selector: '[smz-ui-new-athena-topbar-actions]', changeDetection: ChangeDetectionStrategy.Default, template: `
+      <ng-content></ng-content>
+
+      <div id="smz-ui-topbar"></div>
+
+      <smz-responsive class="col grid grid-nogutter w-full items-center justify-start gap-5">
+
+        <!-- LANDSCAPE -->
+        <ng-template smzTemplate="landscape">
+
+          <span class="col extras-container justify-end extras-container">
+            @if (headerExtrasTemplate != null) {
+              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
+            }
+          </span>
+
+          @if (uiConfig.rbkUtils.notifications.url != null) {
+            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
+          } @else {
+            @if (notifications != null) {
+              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
+            }
+          }
+
+
+          @if (showLocalizationSwitch) {
+            <smz-localization-switch></smz-localization-switch>
+          }
+
+          @if (showTenantSwitch) {
+            <smz-tenant-switch></smz-tenant-switch>
+          }
+
+          @if (profile != null) {
+            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
+          }
+
+        </ng-template>
+
+        <!-- PORTRAIT -->
+        <ng-template smzTemplate="portrait">
+
+          <span class="col extras-container justify-end extras-container">
+            @if (headerExtrasTemplate != null) {
+              <ng-container *ngTemplateOutlet="headerExtrasTemplate"></ng-container>
+            }
+          </span>
+
+          @if (uiConfig.rbkUtils.notifications.url != null) {
+            <smz-ui-notifications id="smz-ui-notifications" class="mt-2"></smz-ui-notifications>
+          } @else {
+            @if (notifications != null) {
+              <span class="notification-container" smz-ui-new-athena-notifications [items]="notifications"></span>
+            }
+          }
+
+
+          @if (showTenantSwitch) {
+            <smz-tenant-switch></smz-tenant-switch>
+          }
+
+          @if (profile != null) {
+            <span id="smz-ui-profile-menu" smz-ui-new-athena-profile-menu [profile]="profile"></span>
+          }
+
+        </ng-template>
+
+      </smz-responsive>
+
       `, standalone: false, styles: [".notification-container{position:relative;font-weight:700;margin-top:0;margin-right:30px;color:var(--text-color-secondary)}.extras-container{position:relative;height:100%;display:flex;align-items:center;color:var(--text-color-secondary)}\n"] }]
         }], propDecorators: { profile: [{
                 type: Input
@@ -42949,11 +43003,11 @@ class NewAthenaTopbarComponent {
         this.store.dispatch(new UiAthenaActions.ToggleSidebar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NewAthenaTopbarComponent, deps: [{ token: i1$3.Store }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NewAthenaTopbarComponent, isStandalone: false, selector: "smz-ui-new-athena-topbar", inputs: { notifications: "notifications", profile: "profile" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: "@if (layout$ | async; as layout) {\n  <smz-responsive class=\"grid grid-nogutter w-full items-center justify-start\">\n    <!-- LANDSCAPE -->\n    <ng-template smzTemplate=\"landscape\">\n      <div class=\"topbar clearfix\">\n        <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerLandscapeTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\n          <a class=\"topbar-logo\">\n            @if ((appLogo$ | async); as appLogo) {\n              <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\n                [ngClass]=\"{ 'logo': !layout.enlargeTopbarLogo, 'enlarged-logo': layout.enlargeTopbarLogo }\"\n                class=\"cursor-pointer outline-none\" tabindex=\"0\"\n                >\n              }\n            </a>\n            @if (!layout.hideResponsiveMenuButton) {\n              <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\n                <i class=\"fa-solid fa-align-left\"></i>\n              </a>\n            }\n          </div>\n        </div>\n      </ng-template>\n      <!-- PORTRAIT -->\n      <ng-template smzTemplate=\"portrait\">\n        <div class=\"topbar clearfix\">\n          <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerPortraitTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\n            <a class=\"topbar-logo max-w-[100px]\">\n              @if ((appLogo$ | async); as appLogo) {\n                <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\n                  class=\"w-full h-full cursor-pointer outline-none\" tabindex=\"0\"\n                  >\n                }\n              </a>\n              @if (!layout.hideResponsiveMenuButton) {\n                <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\n                  <i class=\"fa-solid fa-align-left\"></i>\n                </a>\n              }\n            </div>\n          </div>\n        </ng-template>\n      </smz-responsive>\n    }", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AthenaTopbarActionsComponent, selector: "[smz-ui-new-athena-topbar-actions]", inputs: ["profile", "notifications", "headerExtrasTemplate"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NewAthenaTopbarComponent, isStandalone: false, selector: "smz-ui-new-athena-topbar", inputs: { notifications: "notifications", profile: "profile" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: "@if (layout$ | async; as layout) {\r\n  <smz-responsive class=\"grid grid-nogutter w-full items-center justify-start\">\r\n    <!-- LANDSCAPE -->\r\n    <ng-template smzTemplate=\"landscape\">\r\n      <div class=\"topbar clearfix\">\r\n        <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerLandscapeTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\r\n          <a class=\"topbar-logo\">\r\n            @if ((appLogo$ | async); as appLogo) {\r\n              <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\r\n                [ngClass]=\"{ 'logo': !layout.enlargeTopbarLogo, 'enlarged-logo': layout.enlargeTopbarLogo }\"\r\n                class=\"cursor-pointer outline-none\" tabindex=\"0\"\r\n                >\r\n              }\r\n            </a>\r\n            @if (!layout.hideResponsiveMenuButton) {\r\n              <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\r\n                <i class=\"fa-solid fa-align-left\"></i>\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <!-- PORTRAIT -->\r\n      <ng-template smzTemplate=\"portrait\">\r\n        <div class=\"topbar clearfix\">\r\n          <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerPortraitTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\r\n            <a class=\"topbar-logo max-w-[100px]\">\r\n              @if ((appLogo$ | async); as appLogo) {\r\n                <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\r\n                  class=\"w-full h-full cursor-pointer outline-none\" tabindex=\"0\"\r\n                  >\r\n                }\r\n              </a>\r\n              @if (!layout.hideResponsiveMenuButton) {\r\n                <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\r\n                  <i class=\"fa-solid fa-align-left\"></i>\r\n                </a>\r\n              }\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </smz-responsive>\r\n    }", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AthenaTopbarActionsComponent, selector: "[smz-ui-new-athena-topbar-actions]", inputs: ["profile", "notifications", "headerExtrasTemplate"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzResponsiveComponent, selector: "smz-responsive" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NewAthenaTopbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-new-athena-topbar', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "@if (layout$ | async; as layout) {\n  <smz-responsive class=\"grid grid-nogutter w-full items-center justify-start\">\n    <!-- LANDSCAPE -->\n    <ng-template smzTemplate=\"landscape\">\n      <div class=\"topbar clearfix\">\n        <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerLandscapeTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\n          <a class=\"topbar-logo\">\n            @if ((appLogo$ | async); as appLogo) {\n              <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\n                [ngClass]=\"{ 'logo': !layout.enlargeTopbarLogo, 'enlarged-logo': layout.enlargeTopbarLogo }\"\n                class=\"cursor-pointer outline-none\" tabindex=\"0\"\n                >\n              }\n            </a>\n            @if (!layout.hideResponsiveMenuButton) {\n              <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\n                <i class=\"fa-solid fa-align-left\"></i>\n              </a>\n            }\n          </div>\n        </div>\n      </ng-template>\n      <!-- PORTRAIT -->\n      <ng-template smzTemplate=\"portrait\">\n        <div class=\"topbar clearfix\">\n          <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerPortraitTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\n            <a class=\"topbar-logo max-w-[100px]\">\n              @if ((appLogo$ | async); as appLogo) {\n                <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\n                  class=\"w-full h-full cursor-pointer outline-none\" tabindex=\"0\"\n                  >\n                }\n              </a>\n              @if (!layout.hideResponsiveMenuButton) {\n                <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\n                  <i class=\"fa-solid fa-align-left\"></i>\n                </a>\n              }\n            </div>\n          </div>\n        </ng-template>\n      </smz-responsive>\n    }" }]
+            args: [{ selector: 'smz-ui-new-athena-topbar', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "@if (layout$ | async; as layout) {\r\n  <smz-responsive class=\"grid grid-nogutter w-full items-center justify-start\">\r\n    <!-- LANDSCAPE -->\r\n    <ng-template smzTemplate=\"landscape\">\r\n      <div class=\"topbar clearfix\">\r\n        <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerLandscapeTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\r\n          <a class=\"topbar-logo\">\r\n            @if ((appLogo$ | async); as appLogo) {\r\n              <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\r\n                [ngClass]=\"{ 'logo': !layout.enlargeTopbarLogo, 'enlarged-logo': layout.enlargeTopbarLogo }\"\r\n                class=\"cursor-pointer outline-none\" tabindex=\"0\"\r\n                >\r\n              }\r\n            </a>\r\n            @if (!layout.hideResponsiveMenuButton) {\r\n              <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\r\n                <i class=\"fa-solid fa-align-left\"></i>\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <!-- PORTRAIT -->\r\n      <ng-template smzTemplate=\"portrait\">\r\n        <div class=\"topbar clearfix\">\r\n          <div class=\"w-full h-full grid grid-nogutter items-center justify-start flex-nowrap\" smz-ui-new-athena-topbar-actions [headerExtrasTemplate]=\"headerPortraitTemplate\" [profile]=\"profile\" [notifications]=\"notifications\">\r\n            <a class=\"topbar-logo max-w-[100px]\">\r\n              @if ((appLogo$ | async); as appLogo) {\r\n                <img routerlink=\"/\" [src]=\"appLogo.horizontal\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\"\r\n                  class=\"w-full h-full cursor-pointer outline-none\" tabindex=\"0\"\r\n                  >\r\n                }\r\n              </a>\r\n              @if (!layout.hideResponsiveMenuButton) {\r\n                <a id=\"menu-button\" class=\"clickable\" (click)=\"toggle()\">\r\n                  <i class=\"fa-solid fa-align-left\"></i>\r\n                </a>\r\n              }\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </smz-responsive>\r\n    }" }]
         }], ctorParameters: () => [{ type: i1$3.Store }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [SmzTemplateDirective]
@@ -44682,11 +44736,11 @@ 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" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "dt", first: true, predicate: SmzUiTreeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (state) {\n  @if ((state.emptyFeedback?.isFeatured) && (treeItems != null && treeItems.length === 0)) {\n    <smz-data-info\n      [image]=\"state.emptyFeedback.image\"\n      [message]=\"state.emptyFeedback.message\"\n      [callbackInfo]=\"state.emptyFeedback.extraInfo\"\n      [callbackLabel]=\"state.emptyFeedback.actionButton?.label\"\n      (clicked)=\"state.emptyFeedback.actionButton?.callback($event)\">\n      <ng-template smzTemplate=\"actions\">\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\n      </ng-template>\n    </smz-data-info>\n  } @else {\n    @if (treeItems != null) {\n      <ui-menu #cm [model]=\"menuItems\" [popup]=\"true\" [styleClass]=\"menuItems == null || menuItems?.length === 0 ? 'invisible-important' : ''\"></ui-menu>\n      <ui-menu #rowMenu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\"></ui-menu>\n      <ui-tree #dt [value]=\"treeItems\" scrollHeight=\"flex\" [contextMenu]=\"state.menu.behavior === 'context-menu' ? cm : null\" [selectionMode]=\"state.selection.mode\" [(selection)]=\"primeSelection\" layout=\"vertical\" [style]=\"inlineStyle\" [styleClass]=\"styleClass\" [propagateSelectionUp]=\"state.selection.propagateUp\" [propagateSelectionDown]=\"state.selection.propagateDown\" [loading]=\"state.loading.isLoading\" [loadingIcon]=\"state.loading.icon\" [filter]=\"false\" [filterMode]=\"state.filter.mode\" [filterPlaceholder]=\"state.filter.textPlaceholder\" [draggableNodes]=\"state.dragAndDrop.draggable\" [droppableNodes]=\"state.dragAndDrop.droppable\" [validateDrop]=\"state.dragAndDrop.validateDrop\" (nodeContextMenuSelect)=\"onContextMenuOpen($event)\" (nodeSelect)=\"onSelected($event)\" (nodeUnselect)=\"onUnselected($event)\" (nodeExpand)=\"onExpanded($event)\" (nodeCollapse)=\"onCollapsed($event)\" (nodeDrop)=\"onDropped($event)\" (filtered)=\"onFiltered($event)\">\n        @if (state.header.isVisible) {\n          <ng-template smzTemplate=\"header\">\n            @if (state.header.toolbar; as toolbar) {\n              @if (headerTemplate != null) {\n                <div class=\"grid grid-nogutter items-center w-full justify-start\">\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: dt }\"></ng-container>\n                </div>\n              }\n              <div class=\"grid grid-nogutter justify-start items-center mb-2 gap-2\">\n                @if (state.header.title != null) {\n                  <h3 class=\"m-2 col\">{{state.header.title}}</h3>\n                }\n                <div class=\"grid grid-nogutter justify-start items-center gap-2\">\n                  @for (button of state.header.toolbar.items; track button; let i = $index) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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' }\" [label]=\"button.label\" [icon]=\"button.icon\" (click)=\"onToolbarButtonClick($event, button, treeItems)\" [smzTooltip]=\"button.tooltip\">\n                    </button>\n                  }\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.expandLabel\" icon=\"fa-solid fa-angle-down\" (click)=\"expandNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.expandTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\n                    </button>\n                  }\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angle-up\" (click)=\"collapseNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.collapseTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\n                    </button>\n                  }\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.expandLabel\" icon=\"fa-solid fa-angles-down\" (click)=\"expandAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.expandLabel != null && toolbar.treeExpandButtons.expandLabel !== '' \n                        ? toolbar.treeExpandButtons.expandLabel \n                        : 'Expandir \u00E1rvore'\">\n                    </button>\n                  }\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angles-up\" (click)=\"collapseAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.collapseLabel != null && toolbar.treeExpandButtons.collapseLabel !== '' \n                        ? toolbar.treeExpandButtons.collapseLabel \n                        : 'Colapsar \u00E1rvore'\">\n                    </button>\n                  }\n                  @if (toolbar.treeSelectionButtons?.isVisible === true) {\n\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.selectAllLabel\" icon=\"fa-solid fa-check-double\" (click)=\"selectAll()\" [disabled]=\"state.selection?.mode === 'single'\" [smzTooltip]=\"state.selection?.mode === 'single' \n                        ? 'Dispon\u00EDvel apenas em sele\u00E7\u00E3o m\u00FAltipla' \n                        : (toolbar.treeSelectionButtons.selectAllLabel != null && toolbar.treeSelectionButtons.selectAllLabel !== '' ? toolbar.treeSelectionButtons.selectAllLabel : 'Selecionar tudo')\">\n                    </button>\n\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.clearSelectionLabel\" icon=\"fa-solid fa-eraser\" (click)=\"clearSelection()\" [disabled]=\"!hasSelection\" [smzTooltip]=\"toolbar.treeSelectionButtons.clearSelectionLabel != null && toolbar.treeSelectionButtons.clearSelectionLabel !== '' \n                        ? toolbar.treeSelectionButtons.clearSelectionLabel \n                        : 'Limpar sele\u00E7\u00E3o'\">\n                    </button>\n                  }\n\n                  @if (actionsTemplate != null) {\n                    <div class=\"grid grid-nogutter items-center justify-start\">\n                      <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: dt }\"></ng-container>\n                    </div>\n                  }\n                </div>\n                @if (state.filter.show) {\n                  <ui-icon-field class=\"col-12\" [ngClass]=\"state.filter.styleClass\">\n                    <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\n                    <input #inputGlobal smzInputText type=\"text\" (input)=\"dt._filter(inputGlobal.value)\" [placeholder]=\"state.filter.textPlaceholder\" />\n                  </ui-icon-field>\n                }\n              </div>\n              @if (toolbarTemplate != null) {\n                <div class=\"grid grid-nogutter items-center mt-2\"\n                  [ngClass]=\"'justify-' + state.header.toolbar.alignment\">\n                  <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\n                </div>\n              }\n            }\n          </ng-template>\n        }\n        @if (state.footer.isVisible) {\n          <ng-template smzTemplate=\"footer\">\n            <div class=\"grid grid-nogutter justify-start items-center\">\n              <span class=\"col mr-2\">FOOTER</span>\n            </div>\n          </ng-template>\n        }\n        @for (content of contentTemplates; track content) {\n          <ng-template let-node [smzTemplate]=\"content.type\">\n            <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n              @if (content.template != null) {\n                <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\n              } @else {\n                <div>{{ node.label }}</div>\n              }\n              @if (state.menu.behavior === 'row-menu') {\n                <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\n              }\n            </div>\n          </ng-template>\n        }\n        <ng-template let-node smzTemplate=\"Check\">\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n            <div>{{ node.label }}</div>\n            @if (state.menu.behavior === 'row-menu') {\n              <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\n            }\n          </div>\n        </ng-template>\n        <ng-template smzTemplate=\"empty\">\n          @if (!state.emptyFeedback.isFeatured) {\n            <div>{{ state.emptyFeedback.message }}</div>\n          }\n        </ng-template>\n      </ui-tree>\n    }\n  }\n} @else {\n  @if (emptyStateTemplate != null) {\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\n  }\n}\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzMenuListComponent, selector: "ui-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "appendTo", "baseZIndex"], outputs: ["shown", "hidden"] }, { kind: "component", type: i2.SmzUiTreeComponent, selector: "ui-tree", inputs: ["value", "selectionMode", "selection", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "filter", "filterMode", "filterPlaceholder", "filterBy", "emptyMessage", "draggableNodes", "droppableNodes", "validateDrop", "scrollHeight", "style", "styleClass", "contextMenu", "templateOverride", "layout", "virtualScroll"], outputs: ["selectionChange", "nodeSelect", "nodeUnselect", "nodeExpand", "nodeCollapse", "nodeContextMenuSelect", "nodeDblClick", "nodeDrop", "filtered"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzIconFieldComponent, selector: "ui-icon-field" }, { kind: "component", type: i2.SmzInputIconComponent, selector: "ui-input-icon", inputs: ["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" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "dt", first: true, predicate: SmzUiTreeComponent, 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 smzTemplate=\"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      <ui-menu #cm [model]=\"menuItems\" [popup]=\"true\" [styleClass]=\"menuItems == null || menuItems?.length === 0 ? 'invisible-important' : ''\"></ui-menu>\r\n      <ui-menu #rowMenu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\"></ui-menu>\r\n      <ui-tree #dt [value]=\"treeItems\" scrollHeight=\"flex\" [contextMenu]=\"state.menu.behavior === 'context-menu' ? cm : null\" [selectionMode]=\"state.selection.mode\" [(selection)]=\"primeSelection\" layout=\"vertical\" [style]=\"inlineStyle\" [styleClass]=\"styleClass\" [propagateSelectionUp]=\"state.selection.propagateUp\" [propagateSelectionDown]=\"state.selection.propagateDown\" [loading]=\"state.loading.isLoading\" [loadingIcon]=\"state.loading.icon\" [filter]=\"false\" [filterMode]=\"state.filter.mode\" [filterPlaceholder]=\"state.filter.textPlaceholder\" [draggableNodes]=\"state.dragAndDrop.draggable\" [droppableNodes]=\"state.dragAndDrop.droppable\" [validateDrop]=\"state.dragAndDrop.validateDrop\" (nodeContextMenuSelect)=\"onContextMenuOpen($event)\" (nodeSelect)=\"onSelected($event)\" (nodeUnselect)=\"onUnselected($event)\" (nodeExpand)=\"onExpanded($event)\" (nodeCollapse)=\"onCollapsed($event)\" (nodeDrop)=\"onDropped($event)\" (filtered)=\"onFiltered($event)\">\r\n        @if (state.header.isVisible) {\r\n          <ng-template smzTemplate=\"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 smzButton smzRipple type=\"button\" [styleClass]=\"{ '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' }\" [label]=\"button.label\" [icon]=\"button.icon\" (click)=\"onToolbarButtonClick($event, button, treeItems)\" [smzTooltip]=\"button.tooltip\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.expandLabel\" icon=\"fa-solid fa-angle-down\" (click)=\"expandNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.expandTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angle-up\" (click)=\"collapseNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.collapseTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.expandLabel\" icon=\"fa-solid fa-angles-down\" (click)=\"expandAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.expandLabel != null && toolbar.treeExpandButtons.expandLabel !== '' \r\n                        ? toolbar.treeExpandButtons.expandLabel \r\n                        : 'Expandir \u00E1rvore'\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angles-up\" (click)=\"collapseAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.collapseLabel != null && toolbar.treeExpandButtons.collapseLabel !== '' \r\n                        ? toolbar.treeExpandButtons.collapseLabel \r\n                        : 'Colapsar \u00E1rvore'\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeSelectionButtons?.isVisible === true) {\r\n\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.selectAllLabel\" icon=\"fa-solid fa-check-double\" (click)=\"selectAll()\" [disabled]=\"state.selection?.mode === 'single'\" [smzTooltip]=\"state.selection?.mode === 'single' \r\n                        ? 'Dispon\u00EDvel apenas em sele\u00E7\u00E3o m\u00FAltipla' \r\n                        : (toolbar.treeSelectionButtons.selectAllLabel != null && toolbar.treeSelectionButtons.selectAllLabel !== '' ? toolbar.treeSelectionButtons.selectAllLabel : 'Selecionar tudo')\">\r\n                    </button>\r\n\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.clearSelectionLabel\" icon=\"fa-solid fa-eraser\" (click)=\"clearSelection()\" [disabled]=\"!hasSelection\" [smzTooltip]=\"toolbar.treeSelectionButtons.clearSelectionLabel != null && toolbar.treeSelectionButtons.clearSelectionLabel !== '' \r\n                        ? toolbar.treeSelectionButtons.clearSelectionLabel \r\n                        : 'Limpar sele\u00E7\u00E3o'\">\r\n                    </button>\r\n                  }\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                  <ui-icon-field class=\"col-12\" [ngClass]=\"state.filter.styleClass\">\r\n                    <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\r\n                    <input #inputGlobal smzInputText type=\"text\" (input)=\"dt._filter(inputGlobal.value)\" [placeholder]=\"state.filter.textPlaceholder\" />\r\n                  </ui-icon-field>\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 smzTemplate=\"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 [smzTemplate]=\"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                <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-template let-node smzTemplate=\"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              <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n        <ng-template smzTemplate=\"empty\">\r\n          @if (!state.emptyFeedback.isFeatured) {\r\n            <div>{{ state.emptyFeedback.message }}</div>\r\n          }\r\n        </ng-template>\r\n      </ui-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzMenuListComponent, selector: "ui-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "appendTo", "baseZIndex"], outputs: ["shown", "hidden"] }, { kind: "component", type: i2.SmzUiTreeComponent, selector: "ui-tree", inputs: ["value", "selectionMode", "selection", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "filter", "filterMode", "filterPlaceholder", "filterBy", "emptyMessage", "draggableNodes", "droppableNodes", "validateDrop", "scrollHeight", "style", "styleClass", "contextMenu", "templateOverride", "layout", "virtualScroll"], outputs: ["selectionChange", "nodeSelect", "nodeUnselect", "nodeExpand", "nodeCollapse", "nodeContextMenuSelect", "nodeDblClick", "nodeDrop", "filtered"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzIconFieldComponent, selector: "ui-icon-field" }, { kind: "component", type: i2.SmzInputIconComponent, selector: "ui-input-icon", inputs: ["styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-tree', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "@if (state) {\n  @if ((state.emptyFeedback?.isFeatured) && (treeItems != null && treeItems.length === 0)) {\n    <smz-data-info\n      [image]=\"state.emptyFeedback.image\"\n      [message]=\"state.emptyFeedback.message\"\n      [callbackInfo]=\"state.emptyFeedback.extraInfo\"\n      [callbackLabel]=\"state.emptyFeedback.actionButton?.label\"\n      (clicked)=\"state.emptyFeedback.actionButton?.callback($event)\">\n      <ng-template smzTemplate=\"actions\">\n        <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\n      </ng-template>\n    </smz-data-info>\n  } @else {\n    @if (treeItems != null) {\n      <ui-menu #cm [model]=\"menuItems\" [popup]=\"true\" [styleClass]=\"menuItems == null || menuItems?.length === 0 ? 'invisible-important' : ''\"></ui-menu>\n      <ui-menu #rowMenu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\"></ui-menu>\n      <ui-tree #dt [value]=\"treeItems\" scrollHeight=\"flex\" [contextMenu]=\"state.menu.behavior === 'context-menu' ? cm : null\" [selectionMode]=\"state.selection.mode\" [(selection)]=\"primeSelection\" layout=\"vertical\" [style]=\"inlineStyle\" [styleClass]=\"styleClass\" [propagateSelectionUp]=\"state.selection.propagateUp\" [propagateSelectionDown]=\"state.selection.propagateDown\" [loading]=\"state.loading.isLoading\" [loadingIcon]=\"state.loading.icon\" [filter]=\"false\" [filterMode]=\"state.filter.mode\" [filterPlaceholder]=\"state.filter.textPlaceholder\" [draggableNodes]=\"state.dragAndDrop.draggable\" [droppableNodes]=\"state.dragAndDrop.droppable\" [validateDrop]=\"state.dragAndDrop.validateDrop\" (nodeContextMenuSelect)=\"onContextMenuOpen($event)\" (nodeSelect)=\"onSelected($event)\" (nodeUnselect)=\"onUnselected($event)\" (nodeExpand)=\"onExpanded($event)\" (nodeCollapse)=\"onCollapsed($event)\" (nodeDrop)=\"onDropped($event)\" (filtered)=\"onFiltered($event)\">\n        @if (state.header.isVisible) {\n          <ng-template smzTemplate=\"header\">\n            @if (state.header.toolbar; as toolbar) {\n              @if (headerTemplate != null) {\n                <div class=\"grid grid-nogutter items-center w-full justify-start\">\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: dt }\"></ng-container>\n                </div>\n              }\n              <div class=\"grid grid-nogutter justify-start items-center mb-2 gap-2\">\n                @if (state.header.title != null) {\n                  <h3 class=\"m-2 col\">{{state.header.title}}</h3>\n                }\n                <div class=\"grid grid-nogutter justify-start items-center gap-2\">\n                  @for (button of state.header.toolbar.items; track button; let i = $index) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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' }\" [label]=\"button.label\" [icon]=\"button.icon\" (click)=\"onToolbarButtonClick($event, button, treeItems)\" [smzTooltip]=\"button.tooltip\">\n                    </button>\n                  }\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.expandLabel\" icon=\"fa-solid fa-angle-down\" (click)=\"expandNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.expandTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\n                    </button>\n                  }\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angle-up\" (click)=\"collapseNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.collapseTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\n                    </button>\n                  }\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.expandLabel\" icon=\"fa-solid fa-angles-down\" (click)=\"expandAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.expandLabel != null && toolbar.treeExpandButtons.expandLabel !== '' \n                        ? toolbar.treeExpandButtons.expandLabel \n                        : 'Expandir \u00E1rvore'\">\n                    </button>\n                  }\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angles-up\" (click)=\"collapseAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.collapseLabel != null && toolbar.treeExpandButtons.collapseLabel !== '' \n                        ? toolbar.treeExpandButtons.collapseLabel \n                        : 'Colapsar \u00E1rvore'\">\n                    </button>\n                  }\n                  @if (toolbar.treeSelectionButtons?.isVisible === true) {\n\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.selectAllLabel\" icon=\"fa-solid fa-check-double\" (click)=\"selectAll()\" [disabled]=\"state.selection?.mode === 'single'\" [smzTooltip]=\"state.selection?.mode === 'single' \n                        ? 'Dispon\u00EDvel apenas em sele\u00E7\u00E3o m\u00FAltipla' \n                        : (toolbar.treeSelectionButtons.selectAllLabel != null && toolbar.treeSelectionButtons.selectAllLabel !== '' ? toolbar.treeSelectionButtons.selectAllLabel : 'Selecionar tudo')\">\n                    </button>\n\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.clearSelectionLabel\" icon=\"fa-solid fa-eraser\" (click)=\"clearSelection()\" [disabled]=\"!hasSelection\" [smzTooltip]=\"toolbar.treeSelectionButtons.clearSelectionLabel != null && toolbar.treeSelectionButtons.clearSelectionLabel !== '' \n                        ? toolbar.treeSelectionButtons.clearSelectionLabel \n                        : 'Limpar sele\u00E7\u00E3o'\">\n                    </button>\n                  }\n\n                  @if (actionsTemplate != null) {\n                    <div class=\"grid grid-nogutter items-center justify-start\">\n                      <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: dt }\"></ng-container>\n                    </div>\n                  }\n                </div>\n                @if (state.filter.show) {\n                  <ui-icon-field class=\"col-12\" [ngClass]=\"state.filter.styleClass\">\n                    <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\n                    <input #inputGlobal smzInputText type=\"text\" (input)=\"dt._filter(inputGlobal.value)\" [placeholder]=\"state.filter.textPlaceholder\" />\n                  </ui-icon-field>\n                }\n              </div>\n              @if (toolbarTemplate != null) {\n                <div class=\"grid grid-nogutter items-center mt-2\"\n                  [ngClass]=\"'justify-' + state.header.toolbar.alignment\">\n                  <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\n                </div>\n              }\n            }\n          </ng-template>\n        }\n        @if (state.footer.isVisible) {\n          <ng-template smzTemplate=\"footer\">\n            <div class=\"grid grid-nogutter justify-start items-center\">\n              <span class=\"col mr-2\">FOOTER</span>\n            </div>\n          </ng-template>\n        }\n        @for (content of contentTemplates; track content) {\n          <ng-template let-node [smzTemplate]=\"content.type\">\n            <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n              @if (content.template != null) {\n                <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\n              } @else {\n                <div>{{ node.label }}</div>\n              }\n              @if (state.menu.behavior === 'row-menu') {\n                <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\n              }\n            </div>\n          </ng-template>\n        }\n        <ng-template let-node smzTemplate=\"Check\">\n          <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n            <div>{{ node.label }}</div>\n            @if (state.menu.behavior === 'row-menu') {\n              <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\n            }\n          </div>\n        </ng-template>\n        <ng-template smzTemplate=\"empty\">\n          @if (!state.emptyFeedback.isFeatured) {\n            <div>{{ state.emptyFeedback.message }}</div>\n          }\n        </ng-template>\n      </ui-tree>\n    }\n  }\n} @else {\n  @if (emptyStateTemplate != null) {\n    <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\n  }\n}\n\n" }]
+            args: [{ selector: 'smz-ui-tree', changeDetection: ChangeDetectionStrategy.Default, standalone: false, 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 smzTemplate=\"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      <ui-menu #cm [model]=\"menuItems\" [popup]=\"true\" [styleClass]=\"menuItems == null || menuItems?.length === 0 ? 'invisible-important' : ''\"></ui-menu>\r\n      <ui-menu #rowMenu [model]=\"menuItems\" [popup]=\"true\" appendTo=\"body\"></ui-menu>\r\n      <ui-tree #dt [value]=\"treeItems\" scrollHeight=\"flex\" [contextMenu]=\"state.menu.behavior === 'context-menu' ? cm : null\" [selectionMode]=\"state.selection.mode\" [(selection)]=\"primeSelection\" layout=\"vertical\" [style]=\"inlineStyle\" [styleClass]=\"styleClass\" [propagateSelectionUp]=\"state.selection.propagateUp\" [propagateSelectionDown]=\"state.selection.propagateDown\" [loading]=\"state.loading.isLoading\" [loadingIcon]=\"state.loading.icon\" [filter]=\"false\" [filterMode]=\"state.filter.mode\" [filterPlaceholder]=\"state.filter.textPlaceholder\" [draggableNodes]=\"state.dragAndDrop.draggable\" [droppableNodes]=\"state.dragAndDrop.droppable\" [validateDrop]=\"state.dragAndDrop.validateDrop\" (nodeContextMenuSelect)=\"onContextMenuOpen($event)\" (nodeSelect)=\"onSelected($event)\" (nodeUnselect)=\"onUnselected($event)\" (nodeExpand)=\"onExpanded($event)\" (nodeCollapse)=\"onCollapsed($event)\" (nodeDrop)=\"onDropped($event)\" (filtered)=\"onFiltered($event)\">\r\n        @if (state.header.isVisible) {\r\n          <ng-template smzTemplate=\"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 smzButton smzRipple type=\"button\" [styleClass]=\"{ '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' }\" [label]=\"button.label\" [icon]=\"button.icon\" (click)=\"onToolbarButtonClick($event, button, treeItems)\" [smzTooltip]=\"button.tooltip\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.expandLabel\" icon=\"fa-solid fa-angle-down\" (click)=\"expandNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.expandTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.nodeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.nodeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angle-up\" (click)=\"collapseNode()\" [smzTooltip]=\"selection != null ? toolbar.nodeExpandButtons.collapseTooltip : toolbar.nodeExpandButtons.disabledTooltip\" [disabled]=\"selection == null\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.expandLabel\" icon=\"fa-solid fa-angles-down\" (click)=\"expandAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.expandLabel != null && toolbar.treeExpandButtons.expandLabel !== '' \r\n                        ? toolbar.treeExpandButtons.expandLabel \r\n                        : 'Expandir \u00E1rvore'\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeExpandButtons.isVisible === true) {\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeExpandButtons.collapseLabel\" icon=\"fa-solid fa-angles-up\" (click)=\"collapseAll()\" [smzTooltip]=\"toolbar.treeExpandButtons.collapseLabel != null && toolbar.treeExpandButtons.collapseLabel !== '' \r\n                        ? toolbar.treeExpandButtons.collapseLabel \r\n                        : 'Colapsar \u00E1rvore'\">\r\n                    </button>\r\n                  }\r\n                  @if (toolbar.treeSelectionButtons?.isVisible === true) {\r\n\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.selectAllLabel\" icon=\"fa-solid fa-check-double\" (click)=\"selectAll()\" [disabled]=\"state.selection?.mode === 'single'\" [smzTooltip]=\"state.selection?.mode === 'single' \r\n                        ? 'Dispon\u00EDvel apenas em sele\u00E7\u00E3o m\u00FAltipla' \r\n                        : (toolbar.treeSelectionButtons.selectAllLabel != null && toolbar.treeSelectionButtons.selectAllLabel !== '' ? toolbar.treeSelectionButtons.selectAllLabel : 'Selecionar tudo')\">\r\n                    </button>\r\n\r\n                    <button smzButton smzRipple type=\"button\" [styleClass]=\"{ '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 }\" [label]=\"toolbar.treeSelectionButtons.clearSelectionLabel\" icon=\"fa-solid fa-eraser\" (click)=\"clearSelection()\" [disabled]=\"!hasSelection\" [smzTooltip]=\"toolbar.treeSelectionButtons.clearSelectionLabel != null && toolbar.treeSelectionButtons.clearSelectionLabel !== '' \r\n                        ? toolbar.treeSelectionButtons.clearSelectionLabel \r\n                        : 'Limpar sele\u00E7\u00E3o'\">\r\n                    </button>\r\n                  }\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                  <ui-icon-field class=\"col-12\" [ngClass]=\"state.filter.styleClass\">\r\n                    <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\r\n                    <input #inputGlobal smzInputText type=\"text\" (input)=\"dt._filter(inputGlobal.value)\" [placeholder]=\"state.filter.textPlaceholder\" />\r\n                  </ui-icon-field>\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 smzTemplate=\"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 [smzTemplate]=\"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                <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-template let-node smzTemplate=\"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              <button smzButton clickStopPropagation (click)=\"onRowMenuOpen(node, rowMenu, $event)\" [icon]=\"state.menu.rowMenuIcon\" [rounded]=\"true\" [text]=\"true\" [severity]=\"state.menu.rowMenuIconSeverity\"></button>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n        <ng-template smzTemplate=\"empty\">\r\n          @if (!state.emptyFeedback.isFeatured) {\r\n            <div>{{ state.emptyFeedback.message }}</div>\r\n          }\r\n        </ng-template>\r\n      </ui-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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TreeHelperService }], propDecorators: { dt: [{
                 type: ViewChild,
                 args: [SmzUiTreeComponent]
@@ -44978,11 +45032,11 @@ class SmzTreeWithDetailsComponent {
         this.selectionChange.emit(node);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeWithDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeWithDetailsComponent, isStandalone: false, selector: "smz-ui-tree-with-details", inputs: { state: "state" }, outputs: { selectionChange: "selectionChange", detailsChange: "detailsChange" }, host: { classAttribute: "absolute inset-0" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "treeComponent", first: true, predicate: SmzTreeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (state != null) {\n  <div class=\"grid grid-nogutter items-start justify-start h-full\" [ngClass]=\"state?.styleClass?.content\">\n    <ng-container *ngClone=\"state.items$ | async as items\">\n      <!-- TREE -->\n      <div class=\"h-full col p-0\">\n        <div smzUiBlock #treeContainer [component]=\"treeContainer\" class=\"h-full w-full rounded p-2 bg-surface-a text-text-color border border-solid border-surface-d\">\n          <div class=\"h-full\">\n            <ng-container *ngVar=\"items | treeItems : state as treeItems\">\n              <smz-ui-tree #treeComponent [items]=\"treeItems\" [state]=\"state.tree.state\" (selectionChange)=\"selectionChanged($event)\" [styleClass]=\"state.tree.styleClass\">\n                @if (headerTemplate != null) {\n                  <ng-template smzTemplate=\"header\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\n                  </ng-template>\n                }\n                @if (toolbarTemplate != null) {\n                  <ng-template smzTemplate=\"toolbar\">\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\n                  </ng-template>\n                }\n                @for (content of contentTemplates; track content) {\n                  <ng-template let-node [smzTemplate]=\"'type:' + content.type\">\n                    <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\n                  </ng-template>\n                }\n              </smz-ui-tree>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <!-- DETAILS -->\n      <div class=\"h-full col-12\" [ngClass]=\"state.layout.detailsStyleClass\">\n        <div class=\"h-full items-stretch flex-col grid justify-start grid-nogutter rounded w-full overflow-y-auto bg-surface-a text-text-color border border-solid border-surface-d\">\n          <!-- CONTE\u00DADO -->\n          @if (state.context.selectedNode != null) {\n            @if (detailsTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\n            }\n          } @else {\n            @if (items != null) {\n              @if (emptySelectionTemplate != null) {\n                <ng-container *ngTemplateOutlet=\"emptySelectionTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\n              } @else {\n                <div class=\"grid grid-nogutter items-center justify-center p-4 flex-col flex-grow mt-10\">\n                  <i class=\"fas fa-info-circle text-5xl text-yellow-500 mb-4\"></i>\n                  <div class=\"text-lg\">Nenhum item selecionado.</div>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n    </ng-container>\n  </div>\n}", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzTreeComponent, selector: "smz-ui-tree", inputs: ["state", "items", "loading", "styleClass", "inlineStyle", "appendTo", "selection", "selectionKey"], outputs: ["selectedNodes", "selectionChange", "parentChange", "reorder", "blockedDrop", "nodeExpanded", "nodeCollapsed", "treeExpanded", "nodeDropped"] }, { kind: "directive", type: NgCloneDirective, selector: "[ngClone]", inputs: ["ngClone"] }, { kind: "directive", type: SmzUiBlockDirective, selector: "[smzUiBlock]", inputs: ["component"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TreeItemsPipe, name: "treeItems" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeWithDetailsComponent, isStandalone: false, selector: "smz-ui-tree-with-details", inputs: { state: "state" }, outputs: { selectionChange: "selectionChange", detailsChange: "detailsChange" }, host: { classAttribute: "absolute inset-0" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "treeComponent", first: true, predicate: SmzTreeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (state != null) {\r\n  <div class=\"grid grid-nogutter items-start justify-start h-full\" [ngClass]=\"state?.styleClass?.content\">\r\n    <ng-container *ngClone=\"state.items$ | async as items\">\r\n      <!-- TREE -->\r\n      <div class=\"h-full col p-0\">\r\n        <div smzUiBlock #treeContainer [component]=\"treeContainer\" class=\"h-full w-full rounded p-2 bg-surface-a text-text-color border border-solid border-surface-d\">\r\n          <div class=\"h-full\">\r\n            <ng-container *ngVar=\"items | treeItems : state as treeItems\">\r\n              <smz-ui-tree #treeComponent [items]=\"treeItems\" [state]=\"state.tree.state\" (selectionChange)=\"selectionChanged($event)\" [styleClass]=\"state.tree.styleClass\">\r\n                @if (headerTemplate != null) {\r\n                  <ng-template smzTemplate=\"header\">\r\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                  </ng-template>\r\n                }\r\n                @if (toolbarTemplate != null) {\r\n                  <ng-template smzTemplate=\"toolbar\">\r\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                  </ng-template>\r\n                }\r\n                @for (content of contentTemplates; track content) {\r\n                  <ng-template let-node [smzTemplate]=\"'type:' + content.type\">\r\n                    <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\r\n                  </ng-template>\r\n                }\r\n              </smz-ui-tree>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- DETAILS -->\r\n      <div class=\"h-full col-12\" [ngClass]=\"state.layout.detailsStyleClass\">\r\n        <div class=\"h-full items-stretch flex-col grid justify-start grid-nogutter rounded w-full overflow-y-auto bg-surface-a text-text-color border border-solid border-surface-d\">\r\n          <!-- CONTE\u00DADO -->\r\n          @if (state.context.selectedNode != null) {\r\n            @if (detailsTemplate != null) {\r\n              <ng-container *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n            }\r\n          } @else {\r\n            @if (items != null) {\r\n              @if (emptySelectionTemplate != null) {\r\n                <ng-container *ngTemplateOutlet=\"emptySelectionTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n              } @else {\r\n                <div class=\"grid grid-nogutter items-center justify-center p-4 flex-col flex-grow mt-10\">\r\n                  <i class=\"fas fa-info-circle text-5xl text-yellow-500 mb-4\"></i>\r\n                  <div class=\"text-lg\">Nenhum item selecionado.</div>\r\n                </div>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n}", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzTreeComponent, selector: "smz-ui-tree", inputs: ["state", "items", "loading", "styleClass", "inlineStyle", "appendTo", "selection", "selectionKey"], outputs: ["selectedNodes", "selectionChange", "parentChange", "reorder", "blockedDrop", "nodeExpanded", "nodeCollapsed", "treeExpanded", "nodeDropped"] }, { kind: "directive", type: NgCloneDirective, selector: "[ngClone]", inputs: ["ngClone"] }, { kind: "directive", type: SmzUiBlockDirective, selector: "[smzUiBlock]", inputs: ["component"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TreeItemsPipe, name: "treeItems" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeWithDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-tree-with-details', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'absolute inset-0' }, standalone: false, template: "@if (state != null) {\n  <div class=\"grid grid-nogutter items-start justify-start h-full\" [ngClass]=\"state?.styleClass?.content\">\n    <ng-container *ngClone=\"state.items$ | async as items\">\n      <!-- TREE -->\n      <div class=\"h-full col p-0\">\n        <div smzUiBlock #treeContainer [component]=\"treeContainer\" class=\"h-full w-full rounded p-2 bg-surface-a text-text-color border border-solid border-surface-d\">\n          <div class=\"h-full\">\n            <ng-container *ngVar=\"items | treeItems : state as treeItems\">\n              <smz-ui-tree #treeComponent [items]=\"treeItems\" [state]=\"state.tree.state\" (selectionChange)=\"selectionChanged($event)\" [styleClass]=\"state.tree.styleClass\">\n                @if (headerTemplate != null) {\n                  <ng-template smzTemplate=\"header\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\n                  </ng-template>\n                }\n                @if (toolbarTemplate != null) {\n                  <ng-template smzTemplate=\"toolbar\">\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\n                  </ng-template>\n                }\n                @for (content of contentTemplates; track content) {\n                  <ng-template let-node [smzTemplate]=\"'type:' + content.type\">\n                    <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\n                  </ng-template>\n                }\n              </smz-ui-tree>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <!-- DETAILS -->\n      <div class=\"h-full col-12\" [ngClass]=\"state.layout.detailsStyleClass\">\n        <div class=\"h-full items-stretch flex-col grid justify-start grid-nogutter rounded w-full overflow-y-auto bg-surface-a text-text-color border border-solid border-surface-d\">\n          <!-- CONTE\u00DADO -->\n          @if (state.context.selectedNode != null) {\n            @if (detailsTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\n            }\n          } @else {\n            @if (items != null) {\n              @if (emptySelectionTemplate != null) {\n                <ng-container *ngTemplateOutlet=\"emptySelectionTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\n              } @else {\n                <div class=\"grid grid-nogutter items-center justify-center p-4 flex-col flex-grow mt-10\">\n                  <i class=\"fas fa-info-circle text-5xl text-yellow-500 mb-4\"></i>\n                  <div class=\"text-lg\">Nenhum item selecionado.</div>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n    </ng-container>\n  </div>\n}" }]
+            args: [{ selector: 'smz-ui-tree-with-details', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'absolute inset-0' }, standalone: false, template: "@if (state != null) {\r\n  <div class=\"grid grid-nogutter items-start justify-start h-full\" [ngClass]=\"state?.styleClass?.content\">\r\n    <ng-container *ngClone=\"state.items$ | async as items\">\r\n      <!-- TREE -->\r\n      <div class=\"h-full col p-0\">\r\n        <div smzUiBlock #treeContainer [component]=\"treeContainer\" class=\"h-full w-full rounded p-2 bg-surface-a text-text-color border border-solid border-surface-d\">\r\n          <div class=\"h-full\">\r\n            <ng-container *ngVar=\"items | treeItems : state as treeItems\">\r\n              <smz-ui-tree #treeComponent [items]=\"treeItems\" [state]=\"state.tree.state\" (selectionChange)=\"selectionChanged($event)\" [styleClass]=\"state.tree.styleClass\">\r\n                @if (headerTemplate != null) {\r\n                  <ng-template smzTemplate=\"header\">\r\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                  </ng-template>\r\n                }\r\n                @if (toolbarTemplate != null) {\r\n                  <ng-template smzTemplate=\"toolbar\">\r\n                    <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                  </ng-template>\r\n                }\r\n                @for (content of contentTemplates; track content) {\r\n                  <ng-template let-node [smzTemplate]=\"'type:' + content.type\">\r\n                    <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\r\n                  </ng-template>\r\n                }\r\n              </smz-ui-tree>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- DETAILS -->\r\n      <div class=\"h-full col-12\" [ngClass]=\"state.layout.detailsStyleClass\">\r\n        <div class=\"h-full items-stretch flex-col grid justify-start grid-nogutter rounded w-full overflow-y-auto bg-surface-a text-text-color border border-solid border-surface-d\">\r\n          <!-- CONTE\u00DADO -->\r\n          @if (state.context.selectedNode != null) {\r\n            @if (detailsTemplate != null) {\r\n              <ng-container *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n            }\r\n          } @else {\r\n            @if (items != null) {\r\n              @if (emptySelectionTemplate != null) {\r\n                <ng-container *ngTemplateOutlet=\"emptySelectionTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n              } @else {\r\n                <div class=\"grid grid-nogutter items-center justify-center p-4 flex-col flex-grow mt-10\">\r\n                  <i class=\"fas fa-info-circle text-5xl text-yellow-500 mb-4\"></i>\r\n                  <div class=\"text-lg\">Nenhum item selecionado.</div>\r\n                </div>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n}" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { treeComponent: [{
                 type: ViewChild,
                 args: [SmzTreeComponent]
@@ -45997,7 +46051,7 @@ var CommentsForms;
         const commentInput = {
             propertyName: 'comment', name: 'Escreva seu comentário', type: SmzControlType.TEXT_AREA,
             defaultValue: label,
-            template: { large: { row: 'col-12' } },
+            template: { large: { row: 12 } },
             validatorsPreset: { isRequired: true, minLength: 2 },
             isDisabled: false, textAreaRows: 7,
             advancedSettings: {
@@ -46073,74 +46127,74 @@ class SmzCommentsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCommentsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SmzDialogsService }, { token: i1$3.Store }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCommentsComponent, isStandalone: false, selector: "smz-comments", inputs: { state: "state", data: "data" }, ngImport: i0, template: `
-  <!-- <mentionable-textarea [users]="users" class="w-full"></mentionable-textarea> -->
-  @if (data.length > 0) {
-    <ui-tree [value]="data">
-      <ng-template let-node smzTemplate="default">
-        <!-- CONTAINER -->
-        <div class="grid grid-nogutter items-start justify-start flex-nowrap gap-3 mb-3 py-1">
-          <!-- AVATAR -->
-          <img class="w-20" [src]="node.data.avatar | safeUrl"/>
-          <!-- CONTENT -->
-          <div class="col grid grid-nogutter flex-col items-start justify-start gap-2">
-            <!-- NAME AND DATE -->
-            <div class="grid grid-nogutter items-center justify-start gap-2">
-              <!-- DISPLAY NAME -->
-              <div class="font-bold leading-4">{{ node.data.displayName }}</div>
-              <!-- DATE: lastUpdated → timestamp → date -->
-              <div class="text-xs pt-px">{{ resolveCommentDate(node.data) | simpleCalendar : 'fromNow' }}</div>
-            </div>
-            <!-- MESSAGE -->
-            <div [innerHTML]="node.label | safeHtml"></div>
-            <!-- ACTIONS -->
-            @if (state.response.enabled) {
-              <a class="cursor-pointer text-sm" (click)="showCreateDialog(node)">{{ state.locale.answser }}</a>
-            }
-          </div>
-        </div>
-      </ng-template>
-    </ui-tree>
-  } @else {
-    <smz-icon-message [icon]="'far fa-comment'" [message]="state.locale.emptyMessage" [comment]="state.locale.firstMessage"></smz-icon-message>
-  }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCommentsComponent, isStandalone: false, selector: "smz-comments", inputs: { state: "state", data: "data" }, ngImport: i0, template: `
+  <!-- <mentionable-textarea [users]="users" class="w-full"></mentionable-textarea> -->
+  @if (data.length > 0) {
+    <ui-tree [value]="data">
+      <ng-template let-node smzTemplate="default">
+        <!-- CONTAINER -->
+        <div class="grid grid-nogutter items-start justify-start flex-nowrap gap-3 mb-3 py-1">
+          <!-- AVATAR -->
+          <img class="w-20" [src]="node.data.avatar | safeUrl"/>
+          <!-- CONTENT -->
+          <div class="col grid grid-nogutter flex-col items-start justify-start gap-2">
+            <!-- NAME AND DATE -->
+            <div class="grid grid-nogutter items-center justify-start gap-2">
+              <!-- DISPLAY NAME -->
+              <div class="font-bold leading-4">{{ node.data.displayName }}</div>
+              <!-- DATE: lastUpdated → timestamp → date -->
+              <div class="text-xs pt-px">{{ resolveCommentDate(node.data) | simpleCalendar : 'fromNow' }}</div>
+            </div>
+            <!-- MESSAGE -->
+            <div [innerHTML]="node.label | safeHtml"></div>
+            <!-- ACTIONS -->
+            @if (state.response.enabled) {
+              <a class="cursor-pointer text-sm" (click)="showCreateDialog(node)">{{ state.locale.answser }}</a>
+            }
+          </div>
+        </div>
+      </ng-template>
+    </ui-tree>
+  } @else {
+    <smz-icon-message [icon]="'far fa-comment'" [message]="state.locale.emptyMessage" [comment]="state.locale.firstMessage"></smz-icon-message>
+  }
+
   `, isInline: true, styles: ["smz-comments .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{box-shadow:unset!important}\n"], dependencies: [{ kind: "component", type: i2.SmzUiTreeComponent, selector: "ui-tree", inputs: ["value", "selectionMode", "selection", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "filter", "filterMode", "filterPlaceholder", "filterBy", "emptyMessage", "draggableNodes", "droppableNodes", "validateDrop", "scrollHeight", "style", "styleClass", "contextMenu", "templateOverride", "layout", "virtualScroll"], outputs: ["selectionChange", "nodeSelect", "nodeUnselect", "nodeExpand", "nodeCollapse", "nodeContextMenuSelect", "nodeDblClick", "nodeDrop", "filtered"] }, { kind: "component", type: SmzIconMessageComponent, selector: "smz-icon-message", inputs: ["icon", "message", "comment"] }, { kind: "pipe", type: SafeHtmlPipe$2, name: "safeHtml" }, { kind: "pipe", type: SafeUrlPipe$1, name: "safeUrl" }, { kind: "pipe", type: SimpleCalendarPipe, name: "simpleCalendar" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCommentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-comments', template: `
-  <!-- <mentionable-textarea [users]="users" class="w-full"></mentionable-textarea> -->
-  @if (data.length > 0) {
-    <ui-tree [value]="data">
-      <ng-template let-node smzTemplate="default">
-        <!-- CONTAINER -->
-        <div class="grid grid-nogutter items-start justify-start flex-nowrap gap-3 mb-3 py-1">
-          <!-- AVATAR -->
-          <img class="w-20" [src]="node.data.avatar | safeUrl"/>
-          <!-- CONTENT -->
-          <div class="col grid grid-nogutter flex-col items-start justify-start gap-2">
-            <!-- NAME AND DATE -->
-            <div class="grid grid-nogutter items-center justify-start gap-2">
-              <!-- DISPLAY NAME -->
-              <div class="font-bold leading-4">{{ node.data.displayName }}</div>
-              <!-- DATE: lastUpdated → timestamp → date -->
-              <div class="text-xs pt-px">{{ resolveCommentDate(node.data) | simpleCalendar : 'fromNow' }}</div>
-            </div>
-            <!-- MESSAGE -->
-            <div [innerHTML]="node.label | safeHtml"></div>
-            <!-- ACTIONS -->
-            @if (state.response.enabled) {
-              <a class="cursor-pointer text-sm" (click)="showCreateDialog(node)">{{ state.locale.answser }}</a>
-            }
-          </div>
-        </div>
-      </ng-template>
-    </ui-tree>
-  } @else {
-    <smz-icon-message [icon]="'far fa-comment'" [message]="state.locale.emptyMessage" [comment]="state.locale.firstMessage"></smz-icon-message>
-  }
-
+            args: [{ selector: 'smz-comments', template: `
+  <!-- <mentionable-textarea [users]="users" class="w-full"></mentionable-textarea> -->
+  @if (data.length > 0) {
+    <ui-tree [value]="data">
+      <ng-template let-node smzTemplate="default">
+        <!-- CONTAINER -->
+        <div class="grid grid-nogutter items-start justify-start flex-nowrap gap-3 mb-3 py-1">
+          <!-- AVATAR -->
+          <img class="w-20" [src]="node.data.avatar | safeUrl"/>
+          <!-- CONTENT -->
+          <div class="col grid grid-nogutter flex-col items-start justify-start gap-2">
+            <!-- NAME AND DATE -->
+            <div class="grid grid-nogutter items-center justify-start gap-2">
+              <!-- DISPLAY NAME -->
+              <div class="font-bold leading-4">{{ node.data.displayName }}</div>
+              <!-- DATE: lastUpdated → timestamp → date -->
+              <div class="text-xs pt-px">{{ resolveCommentDate(node.data) | simpleCalendar : 'fromNow' }}</div>
+            </div>
+            <!-- MESSAGE -->
+            <div [innerHTML]="node.label | safeHtml"></div>
+            <!-- ACTIONS -->
+            @if (state.response.enabled) {
+              <a class="cursor-pointer text-sm" (click)="showCreateDialog(node)">{{ state.locale.answser }}</a>
+            }
+          </div>
+        </div>
+      </ng-template>
+    </ui-tree>
+  } @else {
+    <smz-icon-message [icon]="'far fa-comment'" [message]="state.locale.emptyMessage" [comment]="state.locale.firstMessage"></smz-icon-message>
+  }
+
   `, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, standalone: false, styles: ["smz-comments .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{box-shadow:unset!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SmzDialogsService }, { type: i1$3.Store }], propDecorators: { state: [{
                 type: Input
@@ -46921,9 +46975,9 @@ class ServerImageDirective {
             .if(this.openMaximized)
             .openMaximized()
             .endIf
-            .setLayout('EXTRA_LARGE', 'col-8')
-            .setLayout('LARGE', 'col-10')
-            .setLayout('MEDIUM', 'col-12')
+            .setLayout('EXTRA_LARGE', 8)
+            .setLayout('LARGE', 10)
+            .setLayout('MEDIUM', 12)
             .html([`<img src="${this.currentSrc}" class="w-full">`])
             .hideFooter()
             .build());
@@ -47916,7 +47970,7 @@ class SmzTimelineComponent {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTimelineComponent, isStandalone: true, selector: "smz-ui-timeline", inputs: { state: "state" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: "@if (state != null) {\n  @if (state.items$ | async; as items) {\n    @if (state.title.isVisible || headerTemplate != null || state.sources.length > 0) {\n      <div class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2 mb-3\">\n        <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n          @if (state.title.isVisible) {\n            <div class=\"text-lg\" [innerHtml]=\"state.title.getText() | safeHtml\"></div>\n          }\n        </div>\n        <div class=\"grid grid-nogutter items-center justify-end gap-3\">\n          @if (headerTemplate != null) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state }\"></ng-container>\n          }\n          @if (state.sources.length > 0) {\n            <ui-select appendTo=\"body\" [options]=\"state.sources\" dataKey=\"key\" [(ngModel)]=\"state.selectedSource\" optionLabel=\"label\" (changed)=\"updateMainSource($event)\"></ui-select>\n          }\n        </div>\n      </div>\n    }\n    @if (items?.length > 0) {\n      <ui-timeline [value]=\"items\" [align]=\"state.view.align\" [styleClass]=\"state.view.styleClass.timeline\">\n        <ng-template smzTemplate=\"marker\" let-event>\n          <span [ngClass]=\"state.marker.styleClass\">\n            <i [ngClass]=\"state.marker.icon\"></i>\n          </span>\n        </ng-template>\n        <ng-template smzTemplate=\"content\" let-event>\n          @if (state.template != null) {\n            <smz-grid-item [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"event\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.view.styleClass.event\"></smz-grid-item>\n          }\n        </ng-template>\n      </ui-timeline>\n    } @else {\n      <div>{{ state.locale.emptyMessage }}</div>\n    }\n  }\n}", styles: ["@media screen and (max-width:960px){smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n){flex-direction:row!important}smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:left!important}smz-ui-timeline .mobile-timeline .p-timeline-event-opposite{flex:0}}smz-ui-timeline .p-timeline-left .p-timeline-event-opposite{display:none}smz-ui-timeline .p-timeline-right .p-timeline-event-opposite{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzSelectComponent, selector: "ui-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "emptyMessage", "emptyFilterMessage", "styleClass", "inputId", "ariaLabel", "appendTo"], outputs: ["changed", "showed", "hidden"] }, { kind: "component", type: SmzUiTimelineComponent, selector: "ui-timeline", inputs: ["value", "align", "layout", "styleClass"] }, { kind: "ngmodule", type: SafeContentPipeModule }, { kind: "ngmodule", type: NgxSmzCardsModule }, { kind: "component", type: SmzGridItemComponent, selector: "smz-grid-item", inputs: ["isDebug", "template", "buttons", "menu", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$1, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTimelineComponent, isStandalone: true, selector: "smz-ui-timeline", inputs: { state: "state" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: "@if (state != null) {\r\n  @if (state.items$ | async; as items) {\r\n    @if (state.title.isVisible || headerTemplate != null || state.sources.length > 0) {\r\n      <div class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2 mb-3\">\r\n        <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n          @if (state.title.isVisible) {\r\n            <div class=\"text-lg\" [innerHtml]=\"state.title.getText() | safeHtml\"></div>\r\n          }\r\n        </div>\r\n        <div class=\"grid grid-nogutter items-center justify-end gap-3\">\r\n          @if (headerTemplate != null) {\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state }\"></ng-container>\r\n          }\r\n          @if (state.sources.length > 0) {\r\n            <ui-select appendTo=\"body\" [options]=\"state.sources\" dataKey=\"key\" [(ngModel)]=\"state.selectedSource\" optionLabel=\"label\" (changed)=\"updateMainSource($event)\"></ui-select>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @if (items?.length > 0) {\r\n      <ui-timeline [value]=\"items\" [align]=\"state.view.align\" [styleClass]=\"state.view.styleClass.timeline\">\r\n        <ng-template smzTemplate=\"marker\" let-event>\r\n          <span [ngClass]=\"state.marker.styleClass\">\r\n            <i [ngClass]=\"state.marker.icon\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template smzTemplate=\"content\" let-event>\r\n          @if (state.template != null) {\r\n            <smz-grid-item [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"event\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.view.styleClass.event\"></smz-grid-item>\r\n          }\r\n        </ng-template>\r\n      </ui-timeline>\r\n    } @else {\r\n      <div>{{ state.locale.emptyMessage }}</div>\r\n    }\r\n  }\r\n}", styles: ["@media screen and (max-width:960px){smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n){flex-direction:row!important}smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:left!important}smz-ui-timeline .mobile-timeline .p-timeline-event-opposite{flex:0}}smz-ui-timeline .p-timeline-left .p-timeline-event-opposite{display:none}smz-ui-timeline .p-timeline-right .p-timeline-event-opposite{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: SmzSelectComponent, selector: "ui-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "emptyMessage", "emptyFilterMessage", "styleClass", "inputId", "ariaLabel", "appendTo"], outputs: ["changed", "showed", "hidden"] }, { kind: "component", type: SmzUiTimelineComponent, selector: "ui-timeline", inputs: ["value", "align", "layout", "styleClass"] }, { kind: "ngmodule", type: SafeContentPipeModule }, { kind: "ngmodule", type: NgxSmzCardsModule }, { kind: "component", type: SmzGridItemComponent, selector: "smz-grid-item", inputs: ["isDebug", "template", "buttons", "menu", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$1, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTimelineComponent, decorators: [{
             type: Component,
@@ -47928,7 +47982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         SmzUiTimelineComponent,
                         SafeContentPipeModule,
                         NgxSmzCardsModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (state != null) {\n  @if (state.items$ | async; as items) {\n    @if (state.title.isVisible || headerTemplate != null || state.sources.length > 0) {\n      <div class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2 mb-3\">\n        <div class=\"grid grid-nogutter items-center justify-start gap-2\">\n          @if (state.title.isVisible) {\n            <div class=\"text-lg\" [innerHtml]=\"state.title.getText() | safeHtml\"></div>\n          }\n        </div>\n        <div class=\"grid grid-nogutter items-center justify-end gap-3\">\n          @if (headerTemplate != null) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state }\"></ng-container>\n          }\n          @if (state.sources.length > 0) {\n            <ui-select appendTo=\"body\" [options]=\"state.sources\" dataKey=\"key\" [(ngModel)]=\"state.selectedSource\" optionLabel=\"label\" (changed)=\"updateMainSource($event)\"></ui-select>\n          }\n        </div>\n      </div>\n    }\n    @if (items?.length > 0) {\n      <ui-timeline [value]=\"items\" [align]=\"state.view.align\" [styleClass]=\"state.view.styleClass.timeline\">\n        <ng-template smzTemplate=\"marker\" let-event>\n          <span [ngClass]=\"state.marker.styleClass\">\n            <i [ngClass]=\"state.marker.icon\"></i>\n          </span>\n        </ng-template>\n        <ng-template smzTemplate=\"content\" let-event>\n          @if (state.template != null) {\n            <smz-grid-item [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"event\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.view.styleClass.event\"></smz-grid-item>\n          }\n        </ng-template>\n      </ui-timeline>\n    } @else {\n      <div>{{ state.locale.emptyMessage }}</div>\n    }\n  }\n}", styles: ["@media screen and (max-width:960px){smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n){flex-direction:row!important}smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:left!important}smz-ui-timeline .mobile-timeline .p-timeline-event-opposite{flex:0}}smz-ui-timeline .p-timeline-left .p-timeline-event-opposite{display:none}smz-ui-timeline .p-timeline-right .p-timeline-event-opposite{display:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (state != null) {\r\n  @if (state.items$ | async; as items) {\r\n    @if (state.title.isVisible || headerTemplate != null || state.sources.length > 0) {\r\n      <div class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2 mb-3\">\r\n        <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n          @if (state.title.isVisible) {\r\n            <div class=\"text-lg\" [innerHtml]=\"state.title.getText() | safeHtml\"></div>\r\n          }\r\n        </div>\r\n        <div class=\"grid grid-nogutter items-center justify-end gap-3\">\r\n          @if (headerTemplate != null) {\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state }\"></ng-container>\r\n          }\r\n          @if (state.sources.length > 0) {\r\n            <ui-select appendTo=\"body\" [options]=\"state.sources\" dataKey=\"key\" [(ngModel)]=\"state.selectedSource\" optionLabel=\"label\" (changed)=\"updateMainSource($event)\"></ui-select>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @if (items?.length > 0) {\r\n      <ui-timeline [value]=\"items\" [align]=\"state.view.align\" [styleClass]=\"state.view.styleClass.timeline\">\r\n        <ng-template smzTemplate=\"marker\" let-event>\r\n          <span [ngClass]=\"state.marker.styleClass\">\r\n            <i [ngClass]=\"state.marker.icon\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template smzTemplate=\"content\" let-event>\r\n          @if (state.template != null) {\r\n            <smz-grid-item [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"event\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.view.styleClass.event\"></smz-grid-item>\r\n          }\r\n        </ng-template>\r\n      </ui-timeline>\r\n    } @else {\r\n      <div>{{ state.locale.emptyMessage }}</div>\r\n    }\r\n  }\r\n}", styles: ["@media screen and (max-width:960px){smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n){flex-direction:row!important}smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:left!important}smz-ui-timeline .mobile-timeline .p-timeline-event-opposite{flex:0}}smz-ui-timeline .p-timeline-left .p-timeline-event-opposite{display:none}smz-ui-timeline .p-timeline-right .p-timeline-event-opposite{display:none}\n"] }]
         }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [SmzTemplateDirective]
@@ -47982,7 +48036,7 @@ class SmzMultiTablesComponent {
     </ui-tab-panels>
   </ui-tabs>
 }
-`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SmzTabsComponent, selector: "ui-tabs", inputs: ["value", "lazy", "scrollable"], outputs: ["valueChange"] }, { kind: "component", type: i2.SmzTabListComponent, selector: "ui-tab-list" }, { kind: "component", type: i2.SmzTabComponent, selector: "ui-tab", inputs: ["value", "disabled"] }, { kind: "component", type: i2.SmzTabPanelsComponent, selector: "ui-tab-panels" }, { kind: "component", type: i2.SmzTabPanelComponent, selector: "ui-tab-panel", inputs: ["value"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$1, name: "safeHtml" }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SmzTabsComponent, selector: "ui-tabs", inputs: ["value", "lazy", "scrollable"], outputs: ["valueChange"] }, { kind: "component", type: i2.SmzTabListComponent, selector: "ui-tab-list" }, { kind: "component", type: i2.SmzTabComponent, selector: "ui-tab", inputs: ["value", "disabled"] }, { kind: "component", type: i2.SmzTabPanelsComponent, selector: "ui-tab-panels" }, { kind: "component", type: i2.SmzTabPanelComponent, selector: "ui-tab-panel", inputs: ["value"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$1, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzMultiTablesComponent, decorators: [{
             type: Component,
@@ -48923,9 +48977,9 @@ class SmzClipboardService {
                 title: 'Area de transferência',
                 features: [{ type: 'message', data: 'Mensagem copiada com sucesso.' }],
                 dialogTemplate: {
-                    extraSmall: { row: 'col-10' },
-                    large: { row: 'col-4' },
-                    extraLarge: { row: 'col-3' },
+                    extraSmall: { row: 10 },
+                    large: { row: 4 },
+                    extraLarge: { row: 3 },
                 }
             });
         }
@@ -49143,9 +49197,9 @@ class ServerImageToBase64Directive {
             .if(this.openMaximized)
             .openMaximized()
             .endIf
-            .setLayout('EXTRA_LARGE', 'col-8')
-            .setLayout('LARGE', 'col-10')
-            .setLayout('MEDIUM', 'col-12')
+            .setLayout('EXTRA_LARGE', 8)
+            .setLayout('LARGE', 10)
+            .setLayout('MEDIUM', 12)
             .html([`<img src="${this.currentSrc}" class="w-full">`])
             .hideFooter()
             .build());
@@ -51094,11 +51148,11 @@ const defaultDialogsModuleConfig = {
             saveDependsOnValidation: true
         },
         featureTemplate: {
-            extraSmall: { row: 'col-12' }
+            extraSmall: { row: 12 }
         },
         dialogTemplate: {
-            extraSmall: { row: 'col-12' },
-            large: { row: 'col-6' },
+            extraSmall: { row: 12 },
+            large: { row: 6 },
         }
     },
     forms: defaultFormsModuleConfig,