@ngx-smz/core 21.9.0-next.1 → 21.9.0-next.10

package/fesm2022/ngx-smz-core.mjs

@@ -8,7 +8,7 @@ import { take, takeWhile as takeWhile$1, tap as tap$1, debounceTime as debounceT
 import * as i1$4 from '@angular/common/http';
 import { HttpClient, provideHttpClient, withInterceptorsFromDi, HttpErrorResponse, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i2 from '@ngx-smz/ui-kit';
-import { SmzObjectUtils, SmzTooltipDirective, SmzPopoverComponent, SmzButtonComponent, SmzAutoCompleteComponent, SmzTemplateDirective, SmzTextareaDirective, SmzListboxComponent, SmzSelectComponent, SmzDatePickerComponent, SmzCheckboxComponent, SmzColorPickerComponent, SmzInputMaskComponent, SmzInputNumberComponent, SmzToggleSwitchComponent, SmzInputTextDirective, SmzMultiSelectComponent, SmzPasswordComponent, SmzRadioButtonComponent, SmzMessageComponent, SmzAutoFocusDirective, SmzTreeSelectComponent, SmzDialogService, SmzDomHandler, SmzZIndex, smzUniqueId, SmzFilterService, SmzFilterOperator, SmzFilterMatchMode, SmzPaginatorComponent, SmzTranslationKeys, SmzConnectedOverlayScrollHandler, SmzSelectButtonComponent, SmzMenuListComponent, SmzSkeletonComponent, SmzIconFieldComponent, SmzInputIconComponent, SmzBadgeDirective, SmzToolbarComponent, SmzProgressBarComponent, SmzMessageService, SmzPickListComponent, SmzAccordionComponent, SmzAccordionPanelComponent, SmzAccordionHeaderComponent, SmzAccordionContentComponent, SmzInputGroupComponent, SmzInputGroupAddonComponent, SmzLocaleService, SmzBlockUiComponent, SmzToastContainerComponent, SmzDrawerComponent, SmzUiTreeComponent, SmzDataViewComponent, SmzUiTimelineComponent, SmzTabsComponent, SmzTabListComponent, SmzTabComponent, SmzTabPanelsComponent, SmzTabPanelComponent } from '@ngx-smz/ui-kit';
+import { SmzObjectUtils, SmzTooltipDirective, SmzPopoverComponent, SmzButtonComponent, SmzAutoCompleteComponent, SmzTemplateDirective, SmzTextareaDirective, SmzListboxComponent, SmzSelectComponent, SmzDatePickerComponent, SmzCheckboxComponent, SmzColorPickerComponent, SmzInputMaskComponent, SmzInputNumberComponent, SmzToggleSwitchComponent, SmzInputTextDirective, SmzMultiSelectComponent, SmzPasswordComponent, SmzRadioButtonComponent, SmzMessageComponent, SmzAutoFocusDirective, SmzTreeSelectComponent, SmzDialogService, SmzDomHandler, SmzZIndex, smzUniqueId, SmzFilterService, SmzFilterOperator, SmzFilterMatchMode, SmzPaginatorComponent, SmzTranslationKeys, SmzConnectedOverlayScrollHandler, SmzSelectButtonComponent, SmzMenuListComponent, SmzSkeletonComponent, SmzIconFieldComponent, SmzInputIconComponent, SmzBadgeDirective, SmzToolbarComponent, SmzProgressBarComponent, SmzMessageService, SmzPickListComponent, SmzAccordionComponent, SmzAccordionPanelComponent, SmzAccordionHeaderComponent, SmzAccordionContentComponent, SmzInputGroupComponent, SmzInputGroupAddonComponent, SmzLocaleService, SmzBlockUiComponent, SmzToastContainerComponent, SmzDrawerComponent, SmzRippleDirective, SmzUiTreeComponent, SmzDataViewComponent, SmzUiTimelineComponent, SmzTabsComponent, SmzTabListComponent, SmzTabComponent, SmzTabPanelsComponent, SmzTabPanelComponent } from '@ngx-smz/ui-kit';
 import { cloneDeep, uniqBy, flatten as flatten$1, sortBy, isBoolean as isBoolean$1, isEmpty as isEmpty$2, isEqual } from 'lodash-es';
 import { Subscription, BehaviorSubject, merge, firstValueFrom, debounceTime, tap, of, take as take$1, Subject, throwError, map as map$1, throttleTime, switchMap, Observable, takeUntil as takeUntil$2, filter as filter$1 } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -2932,7 +2932,7 @@ class CheckBoxComponent {
         this.dialogVisibility.setValue(input, formId, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckBoxComponent, deps: [{ token: SmzFormsVisibilityService }, { token: SmzDialogsVisibilityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: CheckBoxComponent, isStandalone: false, selector: "smz-checkbox", inputs: { input: "input", formId: "formId", control: "control", behaviors: "behaviors" }, host: { classAttribute: "grid grid-nogutter" }, ngImport: i0, template: "<div class=\"grid col-12 grid-nogutter input_inner__wrapper flex-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.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=\"col-12 flex justify-start items-center gap-1 flex-gap-1\">\r\n        <ui-checkbox class=\"smz__input_value\" [name]=\"input.propertyName\" [id]=\"input.propertyName\" [formControl]=\"control\" (changed)=\"emitChange(input, formId, $event)\" [binary]=\"true\">\r\n        </ui-checkbox>\r\n        <label [for]=\"input.propertyName\" class=\"text-sm\">{{input.name}}</label>\r\n    </div>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "component", type: i2.SmzCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "value", "binary", "name"], outputs: ["changed"] }, { 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: CheckBoxComponent, isStandalone: false, selector: "smz-checkbox", inputs: { input: "input", formId: "formId", control: "control", behaviors: "behaviors" }, host: { classAttribute: "grid grid-nogutter" }, ngImport: i0, template: "<div class=\"grid col-12 grid-nogutter input_inner__wrapper flex-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.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=\"col-12 flex justify-start items-center gap-1 flex-gap-1\">\r\n        <ui-checkbox class=\"smz__input_value\" [name]=\"input.propertyName\" [id]=\"input.propertyName\" [formControl]=\"control\" (changed)=\"emitChange(input, formId, $event)\" [binary]=\"true\">\r\n        </ui-checkbox>\r\n        <label [for]=\"input.propertyName\" class=\"text-sm\">{{input.name}}</label>\r\n    </div>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "component", type: i2.SmzCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "inputId", "value", "binary", "name"], outputs: ["changed"] }, { 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: CheckBoxComponent, decorators: [{
             type: Component,
@@ -2952,7 +2952,7 @@ class CheckBoxGroupComponent {
     control;
     behaviors;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckBoxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CheckBoxGroupComponent, isStandalone: false, selector: "smz-checkbox-group", inputs: { input: "input", control: "control", behaviors: "behaviors" }, host: { classAttribute: "grid grid-nogutter" }, ngImport: i0, template: "<div class=\"grid col-12 grid-nogutter input_inner__wrapper flex-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  <div class=\"col-12 flex justify-start items-center gap-1 flex-gap-1\">\r\n    @for (option of input.options; track option) {\r\n      <ui-checkbox class=\"smz__input_value\" [name]=\"input.propertyName\" [id]=\"input.propertyName\" [value]=\"option.id\" [formControl]=\"control\">\r\n      </ui-checkbox>\r\n      <label [for]=\"input.propertyName\" class=\"text-sm\">{{option.name}}</label>\r\n    }\r\n  </div>\r\n  <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "component", type: i2.SmzCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "value", "binary", "name"], outputs: ["changed"] }, { 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: "17.0.0", version: "21.2.1", type: CheckBoxGroupComponent, isStandalone: false, selector: "smz-checkbox-group", inputs: { input: "input", control: "control", behaviors: "behaviors" }, host: { classAttribute: "grid grid-nogutter" }, ngImport: i0, template: "<div class=\"grid col-12 grid-nogutter input_inner__wrapper flex-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  <div class=\"col-12 flex justify-start items-center gap-1 flex-gap-1\">\r\n    @for (option of input.options; track option) {\r\n      <ui-checkbox class=\"smz__input_value\" [name]=\"input.propertyName\" [id]=\"input.propertyName\" [value]=\"option.id\" [formControl]=\"control\">\r\n      </ui-checkbox>\r\n      <label [for]=\"input.propertyName\" class=\"text-sm\">{{option.name}}</label>\r\n    }\r\n  </div>\r\n  <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "component", type: i2.SmzCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "inputId", "value", "binary", "name"], outputs: ["changed"] }, { 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: CheckBoxGroupComponent, decorators: [{
             type: Component,
@@ -2989,7 +2989,7 @@ class ColorPickerComponent {
         this.control.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ColorPickerComponent, isStandalone: false, selector: "smz-color-picker", 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<div class=\"input_inner__wrapper grid grid-nogutter items-center justify-start flex-nowrap mt-1\">\r\n    <ui-color-picker [id]=\"input.propertyName\" class=\"smz__input_value\" appendTo=\"body\" [formControl]=\"control\">\r\n    </ui-color-picker>\r\n    <div class=\"flex-grow\">\r\n        <input\r\n        #colorinput\r\n        class=\"smz__input_value colorpicker-hexa-input ml-2\"\r\n        smzInputText\r\n        [disabled]=\"input.isDisabled\"\r\n        [(ngModel)]=\"color\"\r\n        (keyup)=\"onInputChange(colorinput.value)\"\r\n        (blur)=\"markAsTouched()\"/>\r\n    </div>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "component", type: i2.SmzColorPickerComponent, selector: "ui-color-picker", inputs: ["inputId", "appendTo"] }, { 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: "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: "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: ColorPickerComponent, isStandalone: false, selector: "smz-color-picker", 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<div class=\"input_inner__wrapper grid grid-nogutter items-center justify-start flex-nowrap mt-1\">\r\n    <ui-color-picker [id]=\"input.propertyName\" class=\"smz__input_value\" appendTo=\"body\" [formControl]=\"control\">\r\n    </ui-color-picker>\r\n    <div class=\"flex-grow\">\r\n        <input\r\n        #colorinput\r\n        class=\"smz__input_value colorpicker-hexa-input ml-2\"\r\n        smzInputText\r\n        [disabled]=\"input.isDisabled\"\r\n        [(ngModel)]=\"color\"\r\n        (keyup)=\"onInputChange(colorinput.value)\"\r\n        (blur)=\"markAsTouched()\"/>\r\n    </div>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "component", type: i2.SmzColorPickerComponent, selector: "ui-color-picker", inputs: ["inputId", "appendTo"], outputs: ["changed"] }, { 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: "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: "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: ColorPickerComponent, decorators: [{
             type: Component,
@@ -4115,7 +4115,7 @@ 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"], 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\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
@@ -4151,7 +4151,7 @@ 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"], 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])\" [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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
@@ -4208,7 +4208,7 @@ class InputTextAreaComponent {
     control;
     behaviors;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: InputTextAreaComponent, isStandalone: false, selector: "smz-input-text-area", 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    <textarea\r\n        smzTextarea\r\n        [rows]=\"input.textAreaRows != null ? input.textAreaRows : 5\"\r\n        class=\"col-12 smz__input_value flex-1\"\r\n        [id]=\"input.propertyName\"\r\n        [formControl]=\"control\">\r\n    </textarea>\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.SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid"] }, { 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: InputTextAreaComponent, isStandalone: false, selector: "smz-input-text-area", 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    <textarea\r\n        smzTextarea\r\n        [rows]=\"input.textAreaRows != null ? input.textAreaRows : 5\"\r\n        class=\"col-12 smz__input_value flex-1\"\r\n        [id]=\"input.propertyName\"\r\n        [formControl]=\"control\">\r\n    </textarea>\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.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: 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: InputTextAreaComponent, decorators: [{
             type: Component,
@@ -4655,7 +4655,7 @@ class SmzInputAutocompleteTagArea {
         }
       </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"] }, { 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 });
+    `, 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,
@@ -5255,7 +5255,7 @@ class SmzInputTagArea {
     <ui-listbox #listbox (clicked)="hide($event)" (keyup.enter)="hide($event)" styleClass="tag-dropdown" [options]="currentTag.data" [(ngModel)]="currentTagSelection" optionLabel="key"></ui-listbox>
   }
 </ui-popover>
-`, isInline: true, styles: [".p-overlaypanel.tag-overlay .p-overlaypanel-content{padding:0}\n", ".tag-dropdown.p-dropdown{width:100%}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => 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: 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: "directive", type: i0.forwardRef(() => i1$1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => SmzTextareaDirective), selector: "textarea[smzTextarea]", inputs: ["invalid"] }, { kind: "directive", type: i0.forwardRef(() => SmzSmartTag), selector: "[smzSmartTag]", inputs: ["options"], outputs: ["tagTyped"] }, { kind: "component", type: i0.forwardRef(() => 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: "component", type: i0.forwardRef(() => SmzPopoverComponent), selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+`, isInline: true, styles: [".p-overlaypanel.tag-overlay .p-overlaypanel-content{padding:0}\n", ".tag-dropdown.p-dropdown{width:100%}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => 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: 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: "directive", type: i0.forwardRef(() => i1$1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => SmzTextareaDirective), selector: "textarea[smzTextarea]", inputs: ["invalid", "autoResize"] }, { kind: "directive", type: i0.forwardRef(() => SmzSmartTag), selector: "[smzSmartTag]", inputs: ["options"], outputs: ["tagTyped"] }, { kind: "component", type: i0.forwardRef(() => 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: "component", type: i0.forwardRef(() => SmzPopoverComponent), selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputTagArea, decorators: [{
             type: Component,
@@ -8496,7 +8496,7 @@ class DynamicDialogComponent {
     </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}\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: [
+`, 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: [
             trigger('animation', [
                 transition('void => visible', [
                     useAnimation(showAnimation)
@@ -8582,7 +8582,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}\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}\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]
@@ -12184,6 +12184,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }], ctorParameters: () => [{ type: i1$3.Store }, { type: i1$3.Actions }, { type: ExcelsService }] });
 
 /* 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, @angular-eslint/component-class-suffix, @angular-eslint/no-output-on-prefix, @angular-eslint/directive-selector, @angular-eslint/directive-class-suffix, @angular-eslint/no-input-rename, @typescript-eslint/no-unsafe-function-type, brace-style, @typescript-eslint/no-unused-expressions, no-var, no-cond-assign */
+/**
+ * Clique dentro de um painel do CDK Overlay (listas de `ui-select`, `ui-multi-select`, `ui-date-picker`...).
+ * Esses paineis ficam fora do DOM do filtro, mas fazem parte dele: clicar neles nao deve fechar o painel do filtro.
+ * Usa `composedPath` porque a opcao clicada pode ja ter sido removida do DOM quando o listener roda.
+ */
+function isInsideCdkOverlay(event) {
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+    return path.some((node) => node instanceof Element && node.classList.contains('cdk-overlay-container'));
+}
 /** Notificacao de cliques em overlays (para que paineis de filtro nao fechem ao interagir com outros overlays). */
 class TableOverlayService {
     clickSource = new Subject();
@@ -13702,12 +13711,12 @@ class Table {
         widths.forEach((width, index) => {
             const colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
             const style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important;`;
-            innerHTML += `
-                #${this.id}-table > .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                #${this.id}-table > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                #${this.id}-table > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
-                    ${style}
-                }
+            innerHTML += `
+                #${this.id}-table > .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                #${this.id}-table > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                #${this.id}-table > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                    ${style}
+                }
             `;
         });
         this.styleElement.innerHTML = innerHTML;
@@ -13981,12 +13990,12 @@ class Table {
                 let innerHTML = '';
                 widths.forEach((width, index) => {
                     const style = `width: ${width}px !important; max-width: ${width}px !important`;
-                    innerHTML += `
-                        #${this.id}-table > .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                        #${this.id}-table > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                        #${this.id}-table > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
-                            ${style}
-                        }
+                    innerHTML += `
+                        #${this.id}-table > .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                        #${this.id}-table > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                        #${this.id}-table > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                            ${style}
+                        }
                     `;
                 });
                 this.styleElement.innerHTML = innerHTML;
@@ -14047,33 +14056,33 @@ class Table {
             this.responsiveStyleElement = document.createElement('style');
             this.responsiveStyleElement.type = 'text/css';
             document.head.appendChild(this.responsiveStyleElement);
-            const innerHTML = `
-@media screen and (max-width: ${this.breakpoint}) {
-    #${this.id}-table > .p-datatable-thead > tr > th,
-    #${this.id}-table > .p-datatable-tfoot > tr > td {
-        display: none !important;
-    }
-
-    #${this.id}-table > .p-datatable-tbody > tr > td {
-        width: 100% !important;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    #${this.id}-table > .p-datatable-tbody > tr > td:not(:last-child) {
-        border: 0 none;
-    }
-
-    #${this.id}.p-datatable-gridlines > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tbody > tr > td:last-child {
-        border-top: 0;
-        border-right: 0;
-        border-left: 0;
-    }
-
-    #${this.id}-table > .p-datatable-tbody > tr > td > .p-column-title {
-        display: block;
-    }
-}
+            const innerHTML = `
+@media screen and (max-width: ${this.breakpoint}) {
+    #${this.id}-table > .p-datatable-thead > tr > th,
+    #${this.id}-table > .p-datatable-tfoot > tr > td {
+        display: none !important;
+    }
+
+    #${this.id}-table > .p-datatable-tbody > tr > td {
+        width: 100% !important;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    #${this.id}-table > .p-datatable-tbody > tr > td:not(:last-child) {
+        border: 0 none;
+    }
+
+    #${this.id}.p-datatable-gridlines > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tbody > tr > td:last-child {
+        border-top: 0;
+        border-right: 0;
+        border-left: 0;
+    }
+
+    #${this.id}-table > .p-datatable-tbody > tr > td > .p-column-title {
+        display: block;
+    }
+}
 `;
             this.responsiveStyleElement.innerHTML = innerHTML;
         }
@@ -14098,243 +14107,243 @@ class Table {
         this.destroyResponsiveStyle();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Table, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: TableOverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: Table, isStandalone: false, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: "paginator", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: "alwaysShowPaginator", paginatorPosition: "paginatorPosition", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showJumpToPageInput: "showJumpToPageInput", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", defaultSortOrder: "defaultSortOrder", sortMode: "sortMode", resetPageOnSort: "resetPageOnSort", selectionMode: "selectionMode", selectionPageOnly: "selectionPageOnly", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: "metaKeySelection", rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: "filterDelay", filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: "scrollable", scrollDirection: "scrollDirection", rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: "virtualScrollDelay", frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", reorderableColumns: "reorderableColumns", loading: "loading", loadingIcon: "loadingIcon", showLoader: "showLoader", rowHover: "rowHover", stripedRows: "stripedRows", size: "size", customSort: "customSort", showInitialSortBadge: "showInitialSortBadge", autoLayout: "autoLayout", exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", groupRowsByOrder: "groupRowsByOrder", responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", virtualRowHeight: "virtualRowHeight", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", selectAll: "selectAll" }, outputs: { selectAllChange: "selectAllChange", selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, host: { classAttribute: "p-element" }, providers: [TableService], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div
-          #container
-          [ngStyle]="style"
-          [class]="styleClass"
-          [ngClass]="{ 'p-datatable p-component': true, 'p-datatable-hoverable-rows': rowHover || selectionMode, 'p-datatable-scrollable': scrollable, 'p-datatable-flex-scrollable': scrollable && scrollHeight === 'flex', 'p-datatable-striped': stripedRows, 'p-datatable-sm': size === 'small', 'p-datatable-lg': size === 'large' }"
-          [attr.id]="id"
-          >
-          @if (loading && showLoader) {
-            <div class="p-datatable-loading-overlay p-component-overlay">
-              <i [class]="'p-datatable-loading-icon fa-spin ' + loadingIcon"></i>
-            </div>
-          }
-          @if (captionTemplate) {
-            <div class="p-datatable-header">
-              <ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
-            </div>
-          }
-          @if (paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')) {
-            <ui-paginator
-              [rows]="rows"
-              [first]="first"
-              [totalRecords]="totalRecords"
-              [pageLinkSize]="pageLinks"
-              styleClass="smz-paginator-top"
-              [alwaysShow]="alwaysShowPaginator"
-              (pageChanged)="onPageChange($event)"
-              [rowsPerPageOptions]="rowsPerPageOptions"
-              [currentPageReportTemplate]="currentPageReportTemplate"
-              [showFirstLastIcon]="showFirstLastIcon"
-              [showCurrentPageReport]="showCurrentPageReport"
-              [showPageLinks]="showPageLinks"
-            ></ui-paginator>
-          }
-
-          <div #wrapper class="p-datatable-wrapper" [ngStyle]="{ maxHeight: virtualScroll ? '' : scrollHeight }">
-            <ng-container *ngTemplateOutlet="buildInTable; context: { $implicit: processedData, options: { columns } }"></ng-container>
-
-            <ng-template #buildInTable let-items let-scrollerOptions="options">
-              <table
-                #table
-                role="table"
-                [ngClass]="{ 'p-datatable-table': true, 'p-datatable-scrollable-table': scrollable, 'p-datatable-resizable-table': resizableColumns, 'p-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }"
-                [class]="tableStyleClass"
-                [style]="tableStyle"
-                [attr.id]="id + '-table'"
-                >
-                <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                <thead #thead class="p-datatable-thead">
-                  <ng-container *ngTemplateOutlet="headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                </thead>
-                @if (frozenValue || frozenBodyTemplate) {
-                  <tbody
-                    class="p-datatable-tbody p-datatable-frozen-tbody"
-                    [value]="frozenValue"
-                    [frozenRows]="true"
-                    [pTableBody]="scrollerOptions.columns"
-                    [pTableBodyTemplate]="frozenBodyTemplate"
-                    [frozen]="true"
-                  ></tbody>
-                }
-                <tbody
-                  class="p-datatable-tbody"
-                  [ngClass]="scrollerOptions.contentStyleClass"
-                  [style]="scrollerOptions.contentStyle"
-                  [value]="dataToRender(scrollerOptions.rows)"
-                  [pTableBody]="scrollerOptions.columns"
-                  [pTableBodyTemplate]="bodyTemplate"
-                  [scrollerOptions]="scrollerOptions"
-                ></tbody>
-                @if (scrollerOptions.spacerStyle) {
-                  <tbody [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'" class="p-datatable-scroller-spacer"></tbody>
-                }
-                @if (footerGroupedTemplate || footerTemplate) {
-                  <tfoot #tfoot class="p-datatable-tfoot">
-                    <ng-container *ngTemplateOutlet="footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                  </tfoot>
-                }
-              </table>
-            </ng-template>
-          </div>
-
-          @if (paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')) {
-            <ui-paginator
-              [rows]="rows"
-              [first]="first"
-              [totalRecords]="totalRecords"
-              [pageLinkSize]="pageLinks"
-              styleClass="smz-paginator-bottom"
-              [alwaysShow]="alwaysShowPaginator"
-              (pageChanged)="onPageChange($event)"
-              [rowsPerPageOptions]="rowsPerPageOptions"
-              [currentPageReportTemplate]="currentPageReportTemplate"
-              [showFirstLastIcon]="showFirstLastIcon"
-              [showCurrentPageReport]="showCurrentPageReport"
-              [showPageLinks]="showPageLinks"
-            ></ui-paginator>
-          }
-
-          @if (summaryTemplate) {
-            <div class="p-datatable-footer">
-              <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
-            </div>
-          }
-
-          @if (resizableColumns) {
-            <div #resizeHelper class="p-column-resizer-helper" style="display:none"></div>
-          }
-          @if (reorderableColumns) {
-            <span #reorderIndicatorUp class="fa-solid fa-arrow-down p-datatable-reorder-indicator-up" style="display: none;"></span>
-          }
-          @if (reorderableColumns) {
-            <span #reorderIndicatorDown class="fa-solid fa-arrow-up p-datatable-reorder-indicator-down" style="display: none;"></span>
-          }
-        </div>
-        `, isInline: true, styles: [".p-datatable{position:relative}.p-datatable>.p-datatable-wrapper{overflow:auto}.p-datatable-table{border-spacing:0px;width:100%}.p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-icon,.p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable>.p-datatable-wrapper{position:relative}.p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}.p-datatable-scrollable-table>.p-datatable-frozen-tbody{position:sticky;z-index:1}.p-datatable-scrollable-table>.p-datatable-tfoot{position:sticky;bottom:0;z-index:1}.p-datatable-scrollable .p-frozen-column{position:sticky;background:inherit}.p-datatable-scrollable th.p-frozen-column{z-index:1}.p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-scrollable-table>.p-datatable-tbody>.p-rowgroup-header{position:sticky;z-index:1}.p-datatable-resizable-table>.p-datatable-thead>tr>th,.p-datatable-resizable-table>.p-datatable-tfoot>tr>td,.p-datatable-resizable-table>.p-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.p-datatable-resizable-table>.p-datatable-thead>tr>th.p-resizable-column:not(.p-frozen-column){background-clip:padding-box;position:relative}.p-datatable-resizable-table-fit>.p-datatable-thead>tr>th.p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-editor-cancel,.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-up,.p-datatable-reorder-indicator-down{position:absolute}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-menu-button,.p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute;top:0;left:0}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable-tbody>tr>td>.p-column-title{display:none}.p-datatable-scroller-spacer{display:flex}.p-datatable .p-scroller .p-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}.p-datatable{color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md)}.p-datatable-table{border-collapse:separate;background:rgb(var(--smz-color-surface-1))}.p-datatable-thead>tr>th,.p-datatable-tfoot>tr>td{padding:.75rem 1rem;text-align:left;font-weight:600;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-tfoot>tr>td{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable-tbody>tr{background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));transition:background-color var(--smz-duration)}.p-datatable-tbody>tr>td{padding:.75rem 1rem;border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-datatable-row-selected):hover{background:rgb(var(--smz-color-surface-3))}.p-datatable-tbody>tr.p-datatable-row-selected,.p-datatable-tbody>tr.p-highlight{background:rgb(var(--smz-color-primary) / .12);color:rgb(var(--smz-color-fg))}.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:rgb(var(--smz-color-surface-0))}.p-datatable-gridlines .p-datatable-thead>tr>th,.p-datatable-gridlines .p-datatable-tbody>tr>td,.p-datatable-gridlines .p-datatable-tfoot>tr>td{border:1px solid rgb(var(--smz-color-line));border-width:0 0 1px 1px}.p-datatable-gridlines .p-datatable-thead>tr>th:last-child,.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child,.p-datatable-gridlines .p-datatable-tfoot>tr>td:last-child{border-right-width:1px}.p-datatable-sm .p-datatable-thead>tr>th,.p-datatable-sm .p-datatable-tbody>tr>td,.p-datatable-sm .p-datatable-tfoot>tr>td{padding:.375rem .75rem}.p-datatable-lg .p-datatable-thead>tr>th,.p-datatable-lg .p-datatable-tbody>tr>td,.p-datatable-lg .p-datatable-tfoot>tr>td{padding:1.1rem 1.25rem}.p-datatable-header,.p-datatable-footer{padding:.75rem 1rem;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-footer{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable .p-sortable-column:hover{background:rgb(var(--smz-color-surface-3))}.p-datatable .p-sortable-column:focus-visible{outline:2px solid rgb(var(--smz-color-focus));outline-offset:-2px}.p-datatable .p-datatable-loading-overlay{background:rgb(var(--smz-color-surface-1) / .6);color:rgb(var(--smz-color-primary))}.p-datatable .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.p-datatable .p-checkbox,.p-datatable .p-radiobutton{position:relative;display:inline-flex;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-checkbox-box,.p-datatable .p-radiobutton-box{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:1px solid rgb(var(--smz-color-line-strong));background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-on-primary));transition:background-color var(--smz-duration),border-color var(--smz-duration),box-shadow var(--smz-duration)}.p-datatable .p-checkbox-box{border-radius:.3rem}.p-datatable .p-radiobutton-box{border-radius:9999px}.p-datatable .p-checkbox-box.p-highlight,.p-datatable .p-radiobutton-box.p-highlight{background:rgb(var(--smz-color-primary));border-color:rgb(var(--smz-color-primary))}.p-datatable .p-checkbox-box.p-focus,.p-datatable .p-radiobutton-box.p-focus{box-shadow:0 0 0 2px rgb(var(--smz-color-focus) / .45)}.p-datatable .p-checkbox-box.p-disabled,.p-datatable .p-radiobutton-box.p-disabled{opacity:.5;cursor:not-allowed}.p-datatable .p-checkbox-icon{font-size:.7rem;line-height:1}.p-datatable .p-radiobutton-icon{width:.5rem;height:.5rem;border-radius:9999px;background:rgb(var(--smz-color-on-primary));opacity:0}.p-datatable .p-radiobutton-box.p-highlight .p-radiobutton-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => SmzPaginatorComponent), selector: "ui-paginator", inputs: ["first", "rows", "totalRecords", "pageLinkSize", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "alwaysShow", "showPageLinks", "styleClass", "dropdownAppendTo", "showFirstLastIcon"], outputs: ["firstChange", "rowsChange", "pageChanged"] }, { kind: "component", type: i0.forwardRef(() => TableBody), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: Table, isStandalone: false, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: "paginator", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: "alwaysShowPaginator", paginatorPosition: "paginatorPosition", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showJumpToPageInput: "showJumpToPageInput", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", defaultSortOrder: "defaultSortOrder", sortMode: "sortMode", resetPageOnSort: "resetPageOnSort", selectionMode: "selectionMode", selectionPageOnly: "selectionPageOnly", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: "metaKeySelection", rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: "filterDelay", filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: "scrollable", scrollDirection: "scrollDirection", rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: "virtualScrollDelay", frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", reorderableColumns: "reorderableColumns", loading: "loading", loadingIcon: "loadingIcon", showLoader: "showLoader", rowHover: "rowHover", stripedRows: "stripedRows", size: "size", customSort: "customSort", showInitialSortBadge: "showInitialSortBadge", autoLayout: "autoLayout", exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", groupRowsByOrder: "groupRowsByOrder", responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", virtualRowHeight: "virtualRowHeight", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", selectAll: "selectAll" }, outputs: { selectAllChange: "selectAllChange", selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, host: { classAttribute: "p-element" }, providers: [TableService], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div
+          #container
+          [ngStyle]="style"
+          [class]="styleClass"
+          [ngClass]="{ 'p-datatable p-component': true, 'p-datatable-hoverable-rows': rowHover || selectionMode, 'p-datatable-scrollable': scrollable, 'p-datatable-flex-scrollable': scrollable && scrollHeight === 'flex', 'p-datatable-striped': stripedRows, 'p-datatable-sm': size === 'small', 'p-datatable-lg': size === 'large' }"
+          [attr.id]="id"
+          >
+          @if (loading && showLoader) {
+            <div class="p-datatable-loading-overlay p-component-overlay">
+              <i [class]="'p-datatable-loading-icon fa-spin ' + loadingIcon"></i>
+            </div>
+          }
+          @if (captionTemplate) {
+            <div class="p-datatable-header">
+              <ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
+            </div>
+          }
+          @if (paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')) {
+            <ui-paginator
+              [rows]="rows"
+              [first]="first"
+              [totalRecords]="totalRecords"
+              [pageLinkSize]="pageLinks"
+              styleClass="smz-paginator-top"
+              [alwaysShow]="alwaysShowPaginator"
+              (pageChanged)="onPageChange($event)"
+              [rowsPerPageOptions]="rowsPerPageOptions"
+              [currentPageReportTemplate]="currentPageReportTemplate"
+              [showFirstLastIcon]="showFirstLastIcon"
+              [showCurrentPageReport]="showCurrentPageReport"
+              [showPageLinks]="showPageLinks"
+            ></ui-paginator>
+          }
+
+          <div #wrapper class="p-datatable-wrapper" [ngStyle]="{ maxHeight: virtualScroll ? '' : scrollHeight }">
+            <ng-container *ngTemplateOutlet="buildInTable; context: { $implicit: processedData, options: { columns } }"></ng-container>
+
+            <ng-template #buildInTable let-items let-scrollerOptions="options">
+              <table
+                #table
+                role="table"
+                [ngClass]="{ 'p-datatable-table': true, 'p-datatable-scrollable-table': scrollable, 'p-datatable-resizable-table': resizableColumns, 'p-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }"
+                [class]="tableStyleClass"
+                [style]="tableStyle"
+                [attr.id]="id + '-table'"
+                >
+                <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                <thead #thead class="p-datatable-thead">
+                  <ng-container *ngTemplateOutlet="headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                </thead>
+                @if (frozenValue || frozenBodyTemplate) {
+                  <tbody
+                    class="p-datatable-tbody p-datatable-frozen-tbody"
+                    [value]="frozenValue"
+                    [frozenRows]="true"
+                    [pTableBody]="scrollerOptions.columns"
+                    [pTableBodyTemplate]="frozenBodyTemplate"
+                    [frozen]="true"
+                  ></tbody>
+                }
+                <tbody
+                  class="p-datatable-tbody"
+                  [ngClass]="scrollerOptions.contentStyleClass"
+                  [style]="scrollerOptions.contentStyle"
+                  [value]="dataToRender(scrollerOptions.rows)"
+                  [pTableBody]="scrollerOptions.columns"
+                  [pTableBodyTemplate]="bodyTemplate"
+                  [scrollerOptions]="scrollerOptions"
+                ></tbody>
+                @if (scrollerOptions.spacerStyle) {
+                  <tbody [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'" class="p-datatable-scroller-spacer"></tbody>
+                }
+                @if (footerGroupedTemplate || footerTemplate) {
+                  <tfoot #tfoot class="p-datatable-tfoot">
+                    <ng-container *ngTemplateOutlet="footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                  </tfoot>
+                }
+              </table>
+            </ng-template>
+          </div>
+
+          @if (paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')) {
+            <ui-paginator
+              [rows]="rows"
+              [first]="first"
+              [totalRecords]="totalRecords"
+              [pageLinkSize]="pageLinks"
+              styleClass="smz-paginator-bottom"
+              [alwaysShow]="alwaysShowPaginator"
+              (pageChanged)="onPageChange($event)"
+              [rowsPerPageOptions]="rowsPerPageOptions"
+              [currentPageReportTemplate]="currentPageReportTemplate"
+              [showFirstLastIcon]="showFirstLastIcon"
+              [showCurrentPageReport]="showCurrentPageReport"
+              [showPageLinks]="showPageLinks"
+            ></ui-paginator>
+          }
+
+          @if (summaryTemplate) {
+            <div class="p-datatable-footer">
+              <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
+            </div>
+          }
+
+          @if (resizableColumns) {
+            <div #resizeHelper class="p-column-resizer-helper" style="display:none"></div>
+          }
+          @if (reorderableColumns) {
+            <span #reorderIndicatorUp class="fa-solid fa-arrow-down p-datatable-reorder-indicator-up" style="display: none;"></span>
+          }
+          @if (reorderableColumns) {
+            <span #reorderIndicatorDown class="fa-solid fa-arrow-up p-datatable-reorder-indicator-down" style="display: none;"></span>
+          }
+        </div>
+        `, isInline: true, styles: [".p-datatable{position:relative}.p-datatable>.p-datatable-wrapper{overflow:auto}.p-datatable-table{border-spacing:0px;width:100%}.p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-icon,.p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable>.p-datatable-wrapper{position:relative}.p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}.p-datatable-scrollable-table>.p-datatable-frozen-tbody{position:sticky;z-index:1}.p-datatable-scrollable-table>.p-datatable-tfoot{position:sticky;bottom:0;z-index:1}.p-datatable-scrollable .p-frozen-column{position:sticky;background:inherit}.p-datatable-scrollable th.p-frozen-column{z-index:1}.p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-scrollable-table>.p-datatable-tbody>.p-rowgroup-header{position:sticky;z-index:1}.p-datatable-resizable-table>.p-datatable-thead>tr>th,.p-datatable-resizable-table>.p-datatable-tfoot>tr>td,.p-datatable-resizable-table>.p-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.p-datatable-resizable-table>.p-datatable-thead>tr>th.p-resizable-column:not(.p-frozen-column){background-clip:padding-box;position:relative}.p-datatable-resizable-table-fit>.p-datatable-thead>tr>th.p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-editor-cancel,.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-up,.p-datatable-reorder-indicator-down{position:absolute}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-menu-button,.p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute;top:0;left:0}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable-tbody>tr>td>.p-column-title{display:none}.p-datatable-scroller-spacer{display:flex}.p-datatable .p-scroller .p-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}.p-datatable{color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md)}.p-datatable-table{border-collapse:separate;background:rgb(var(--smz-color-surface-1))}.p-datatable-thead>tr>th,.p-datatable-tfoot>tr>td{padding:.75rem 1rem;text-align:left;font-weight:600;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-tfoot>tr>td{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable-tbody>tr{background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));transition:background-color var(--smz-duration)}.p-datatable-tbody>tr>td{padding:.75rem 1rem;border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-datatable-row-selected):hover{background:rgb(var(--smz-color-surface-3))}.p-datatable-tbody>tr.p-datatable-row-selected,.p-datatable-tbody>tr.p-highlight{background:rgb(var(--smz-color-primary) / .12);color:rgb(var(--smz-color-fg))}.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:rgb(var(--smz-color-surface-0))}.p-datatable-gridlines .p-datatable-thead>tr>th,.p-datatable-gridlines .p-datatable-tbody>tr>td,.p-datatable-gridlines .p-datatable-tfoot>tr>td{border:1px solid rgb(var(--smz-color-line));border-width:0 0 1px 1px}.p-datatable-gridlines .p-datatable-thead>tr>th:last-child,.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child,.p-datatable-gridlines .p-datatable-tfoot>tr>td:last-child{border-right-width:1px}.p-datatable-sm .p-datatable-thead>tr>th,.p-datatable-sm .p-datatable-tbody>tr>td,.p-datatable-sm .p-datatable-tfoot>tr>td{padding:.375rem .75rem}.p-datatable-lg .p-datatable-thead>tr>th,.p-datatable-lg .p-datatable-tbody>tr>td,.p-datatable-lg .p-datatable-tfoot>tr>td{padding:1.1rem 1.25rem}.p-datatable-header,.p-datatable-footer{padding:.75rem 1rem;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-footer{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable .p-sortable-column:hover{background:rgb(var(--smz-color-surface-3))}.p-datatable .p-sortable-column:focus-visible{outline:2px solid rgb(var(--smz-color-focus));outline-offset:-2px}.p-datatable .p-datatable-loading-overlay{background:rgb(var(--smz-color-surface-1) / .6);color:rgb(var(--smz-color-primary))}.p-datatable .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.p-datatable .p-checkbox,.p-datatable .p-radiobutton{position:relative;display:inline-flex;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-checkbox-box,.p-datatable .p-radiobutton-box{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:1px solid rgb(var(--smz-color-line-strong));background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-on-primary));transition:background-color var(--smz-duration),border-color var(--smz-duration),box-shadow var(--smz-duration)}.p-datatable .p-checkbox-box{border-radius:.3rem}.p-datatable .p-radiobutton-box{border-radius:9999px}.p-datatable .p-checkbox-box.p-highlight,.p-datatable .p-radiobutton-box.p-highlight{background:rgb(var(--smz-color-primary));border-color:rgb(var(--smz-color-primary))}.p-datatable .p-checkbox-box.p-focus,.p-datatable .p-radiobutton-box.p-focus{box-shadow:0 0 0 2px rgb(var(--smz-color-focus) / .45)}.p-datatable .p-checkbox-box.p-disabled,.p-datatable .p-radiobutton-box.p-disabled{opacity:.5;cursor:not-allowed}.p-datatable .p-checkbox-icon{font-size:.7rem;line-height:1}.p-datatable .p-radiobutton-icon{width:.5rem;height:.5rem;border-radius:9999px;background:rgb(var(--smz-color-on-primary));opacity:0}.p-datatable .p-radiobutton-box.p-highlight .p-radiobutton-icon{opacity:1}.p-datatable-thead>tr>th.p-highlight{background:rgb(var(--smz-color-primary) / .1);color:rgb(var(--smz-color-primary))}.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:rgb(var(--smz-color-surface-3) / .5)}.p-datatable-sm .p-datatable-thead>tr>th,.p-datatable-sm .p-datatable-tbody>tr>td,.p-datatable-sm .p-datatable-tfoot>tr>td{padding:.5rem}.p-column-filter-menu-button,.p-column-filter-clear-button{width:2rem;height:2rem;border-radius:9999px;color:rgb(var(--smz-color-fg-muted));background:transparent;border:0;cursor:pointer;transition:background-color var(--smz-duration)}.p-column-filter-menu-button:hover,.p-column-filter-clear-button:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-column-filter-overlay{min-width:14rem;padding:.5rem;background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay);font-family:var(--smz-font-sans);font-size:var(--smz-text-md)}.p-column-filter-overlay .p-column-filter-row-items,.p-column-filter-overlay .p-column-filter-constraint{padding:.25rem 0}.p-column-filter-overlay .p-column-filter-row-item{padding:.5rem .75rem;border-radius:var(--smz-radius-control);cursor:pointer}.p-column-filter-overlay .p-column-filter-row-item:hover,.p-column-filter-overlay .p-column-filter-row-item.p-highlight{background:rgb(var(--smz-color-surface-3))}.p-column-filter-overlay .p-column-filter-buttonbar{padding:.5rem 0 0;border-top:1px solid rgb(var(--smz-color-line))}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => SmzPaginatorComponent), selector: "ui-paginator", inputs: ["first", "rows", "totalRecords", "pageLinkSize", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "alwaysShow", "showPageLinks", "styleClass", "dropdownAppendTo", "showFirstLastIcon"], outputs: ["firstChange", "rowsChange", "pageChanged"] }, { kind: "component", type: i0.forwardRef(() => TableBody), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'p-table', template: `
-        <div
-          #container
-          [ngStyle]="style"
-          [class]="styleClass"
-          [ngClass]="{ 'p-datatable p-component': true, 'p-datatable-hoverable-rows': rowHover || selectionMode, 'p-datatable-scrollable': scrollable, 'p-datatable-flex-scrollable': scrollable && scrollHeight === 'flex', 'p-datatable-striped': stripedRows, 'p-datatable-sm': size === 'small', 'p-datatable-lg': size === 'large' }"
-          [attr.id]="id"
-          >
-          @if (loading && showLoader) {
-            <div class="p-datatable-loading-overlay p-component-overlay">
-              <i [class]="'p-datatable-loading-icon fa-spin ' + loadingIcon"></i>
-            </div>
-          }
-          @if (captionTemplate) {
-            <div class="p-datatable-header">
-              <ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
-            </div>
-          }
-          @if (paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')) {
-            <ui-paginator
-              [rows]="rows"
-              [first]="first"
-              [totalRecords]="totalRecords"
-              [pageLinkSize]="pageLinks"
-              styleClass="smz-paginator-top"
-              [alwaysShow]="alwaysShowPaginator"
-              (pageChanged)="onPageChange($event)"
-              [rowsPerPageOptions]="rowsPerPageOptions"
-              [currentPageReportTemplate]="currentPageReportTemplate"
-              [showFirstLastIcon]="showFirstLastIcon"
-              [showCurrentPageReport]="showCurrentPageReport"
-              [showPageLinks]="showPageLinks"
-            ></ui-paginator>
-          }
-
-          <div #wrapper class="p-datatable-wrapper" [ngStyle]="{ maxHeight: virtualScroll ? '' : scrollHeight }">
-            <ng-container *ngTemplateOutlet="buildInTable; context: { $implicit: processedData, options: { columns } }"></ng-container>
-
-            <ng-template #buildInTable let-items let-scrollerOptions="options">
-              <table
-                #table
-                role="table"
-                [ngClass]="{ 'p-datatable-table': true, 'p-datatable-scrollable-table': scrollable, 'p-datatable-resizable-table': resizableColumns, 'p-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }"
-                [class]="tableStyleClass"
-                [style]="tableStyle"
-                [attr.id]="id + '-table'"
-                >
-                <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                <thead #thead class="p-datatable-thead">
-                  <ng-container *ngTemplateOutlet="headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                </thead>
-                @if (frozenValue || frozenBodyTemplate) {
-                  <tbody
-                    class="p-datatable-tbody p-datatable-frozen-tbody"
-                    [value]="frozenValue"
-                    [frozenRows]="true"
-                    [pTableBody]="scrollerOptions.columns"
-                    [pTableBodyTemplate]="frozenBodyTemplate"
-                    [frozen]="true"
-                  ></tbody>
-                }
-                <tbody
-                  class="p-datatable-tbody"
-                  [ngClass]="scrollerOptions.contentStyleClass"
-                  [style]="scrollerOptions.contentStyle"
-                  [value]="dataToRender(scrollerOptions.rows)"
-                  [pTableBody]="scrollerOptions.columns"
-                  [pTableBodyTemplate]="bodyTemplate"
-                  [scrollerOptions]="scrollerOptions"
-                ></tbody>
-                @if (scrollerOptions.spacerStyle) {
-                  <tbody [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'" class="p-datatable-scroller-spacer"></tbody>
-                }
-                @if (footerGroupedTemplate || footerTemplate) {
-                  <tfoot #tfoot class="p-datatable-tfoot">
-                    <ng-container *ngTemplateOutlet="footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                  </tfoot>
-                }
-              </table>
-            </ng-template>
-          </div>
-
-          @if (paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')) {
-            <ui-paginator
-              [rows]="rows"
-              [first]="first"
-              [totalRecords]="totalRecords"
-              [pageLinkSize]="pageLinks"
-              styleClass="smz-paginator-bottom"
-              [alwaysShow]="alwaysShowPaginator"
-              (pageChanged)="onPageChange($event)"
-              [rowsPerPageOptions]="rowsPerPageOptions"
-              [currentPageReportTemplate]="currentPageReportTemplate"
-              [showFirstLastIcon]="showFirstLastIcon"
-              [showCurrentPageReport]="showCurrentPageReport"
-              [showPageLinks]="showPageLinks"
-            ></ui-paginator>
-          }
-
-          @if (summaryTemplate) {
-            <div class="p-datatable-footer">
-              <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
-            </div>
-          }
-
-          @if (resizableColumns) {
-            <div #resizeHelper class="p-column-resizer-helper" style="display:none"></div>
-          }
-          @if (reorderableColumns) {
-            <span #reorderIndicatorUp class="fa-solid fa-arrow-down p-datatable-reorder-indicator-up" style="display: none;"></span>
-          }
-          @if (reorderableColumns) {
-            <span #reorderIndicatorDown class="fa-solid fa-arrow-up p-datatable-reorder-indicator-down" style="display: none;"></span>
-          }
-        </div>
+            args: [{ selector: 'p-table', template: `
+        <div
+          #container
+          [ngStyle]="style"
+          [class]="styleClass"
+          [ngClass]="{ 'p-datatable p-component': true, 'p-datatable-hoverable-rows': rowHover || selectionMode, 'p-datatable-scrollable': scrollable, 'p-datatable-flex-scrollable': scrollable && scrollHeight === 'flex', 'p-datatable-striped': stripedRows, 'p-datatable-sm': size === 'small', 'p-datatable-lg': size === 'large' }"
+          [attr.id]="id"
+          >
+          @if (loading && showLoader) {
+            <div class="p-datatable-loading-overlay p-component-overlay">
+              <i [class]="'p-datatable-loading-icon fa-spin ' + loadingIcon"></i>
+            </div>
+          }
+          @if (captionTemplate) {
+            <div class="p-datatable-header">
+              <ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
+            </div>
+          }
+          @if (paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')) {
+            <ui-paginator
+              [rows]="rows"
+              [first]="first"
+              [totalRecords]="totalRecords"
+              [pageLinkSize]="pageLinks"
+              styleClass="smz-paginator-top"
+              [alwaysShow]="alwaysShowPaginator"
+              (pageChanged)="onPageChange($event)"
+              [rowsPerPageOptions]="rowsPerPageOptions"
+              [currentPageReportTemplate]="currentPageReportTemplate"
+              [showFirstLastIcon]="showFirstLastIcon"
+              [showCurrentPageReport]="showCurrentPageReport"
+              [showPageLinks]="showPageLinks"
+            ></ui-paginator>
+          }
+
+          <div #wrapper class="p-datatable-wrapper" [ngStyle]="{ maxHeight: virtualScroll ? '' : scrollHeight }">
+            <ng-container *ngTemplateOutlet="buildInTable; context: { $implicit: processedData, options: { columns } }"></ng-container>
+
+            <ng-template #buildInTable let-items let-scrollerOptions="options">
+              <table
+                #table
+                role="table"
+                [ngClass]="{ 'p-datatable-table': true, 'p-datatable-scrollable-table': scrollable, 'p-datatable-resizable-table': resizableColumns, 'p-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }"
+                [class]="tableStyleClass"
+                [style]="tableStyle"
+                [attr.id]="id + '-table'"
+                >
+                <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                <thead #thead class="p-datatable-thead">
+                  <ng-container *ngTemplateOutlet="headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                </thead>
+                @if (frozenValue || frozenBodyTemplate) {
+                  <tbody
+                    class="p-datatable-tbody p-datatable-frozen-tbody"
+                    [value]="frozenValue"
+                    [frozenRows]="true"
+                    [pTableBody]="scrollerOptions.columns"
+                    [pTableBodyTemplate]="frozenBodyTemplate"
+                    [frozen]="true"
+                  ></tbody>
+                }
+                <tbody
+                  class="p-datatable-tbody"
+                  [ngClass]="scrollerOptions.contentStyleClass"
+                  [style]="scrollerOptions.contentStyle"
+                  [value]="dataToRender(scrollerOptions.rows)"
+                  [pTableBody]="scrollerOptions.columns"
+                  [pTableBodyTemplate]="bodyTemplate"
+                  [scrollerOptions]="scrollerOptions"
+                ></tbody>
+                @if (scrollerOptions.spacerStyle) {
+                  <tbody [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'" class="p-datatable-scroller-spacer"></tbody>
+                }
+                @if (footerGroupedTemplate || footerTemplate) {
+                  <tfoot #tfoot class="p-datatable-tfoot">
+                    <ng-container *ngTemplateOutlet="footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                  </tfoot>
+                }
+              </table>
+            </ng-template>
+          </div>
+
+          @if (paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')) {
+            <ui-paginator
+              [rows]="rows"
+              [first]="first"
+              [totalRecords]="totalRecords"
+              [pageLinkSize]="pageLinks"
+              styleClass="smz-paginator-bottom"
+              [alwaysShow]="alwaysShowPaginator"
+              (pageChanged)="onPageChange($event)"
+              [rowsPerPageOptions]="rowsPerPageOptions"
+              [currentPageReportTemplate]="currentPageReportTemplate"
+              [showFirstLastIcon]="showFirstLastIcon"
+              [showCurrentPageReport]="showCurrentPageReport"
+              [showPageLinks]="showPageLinks"
+            ></ui-paginator>
+          }
+
+          @if (summaryTemplate) {
+            <div class="p-datatable-footer">
+              <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
+            </div>
+          }
+
+          @if (resizableColumns) {
+            <div #resizeHelper class="p-column-resizer-helper" style="display:none"></div>
+          }
+          @if (reorderableColumns) {
+            <span #reorderIndicatorUp class="fa-solid fa-arrow-down p-datatable-reorder-indicator-up" style="display: none;"></span>
+          }
+          @if (reorderableColumns) {
+            <span #reorderIndicatorDown class="fa-solid fa-arrow-up p-datatable-reorder-indicator-down" style="display: none;"></span>
+          }
+        </div>
         `, providers: [TableService], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
                         class: 'p-element'
-                    }, standalone: false, styles: [".p-datatable{position:relative}.p-datatable>.p-datatable-wrapper{overflow:auto}.p-datatable-table{border-spacing:0px;width:100%}.p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-icon,.p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable>.p-datatable-wrapper{position:relative}.p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}.p-datatable-scrollable-table>.p-datatable-frozen-tbody{position:sticky;z-index:1}.p-datatable-scrollable-table>.p-datatable-tfoot{position:sticky;bottom:0;z-index:1}.p-datatable-scrollable .p-frozen-column{position:sticky;background:inherit}.p-datatable-scrollable th.p-frozen-column{z-index:1}.p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-scrollable-table>.p-datatable-tbody>.p-rowgroup-header{position:sticky;z-index:1}.p-datatable-resizable-table>.p-datatable-thead>tr>th,.p-datatable-resizable-table>.p-datatable-tfoot>tr>td,.p-datatable-resizable-table>.p-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.p-datatable-resizable-table>.p-datatable-thead>tr>th.p-resizable-column:not(.p-frozen-column){background-clip:padding-box;position:relative}.p-datatable-resizable-table-fit>.p-datatable-thead>tr>th.p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-editor-cancel,.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-up,.p-datatable-reorder-indicator-down{position:absolute}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-menu-button,.p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute;top:0;left:0}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable-tbody>tr>td>.p-column-title{display:none}.p-datatable-scroller-spacer{display:flex}.p-datatable .p-scroller .p-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}.p-datatable{color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md)}.p-datatable-table{border-collapse:separate;background:rgb(var(--smz-color-surface-1))}.p-datatable-thead>tr>th,.p-datatable-tfoot>tr>td{padding:.75rem 1rem;text-align:left;font-weight:600;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-tfoot>tr>td{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable-tbody>tr{background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));transition:background-color var(--smz-duration)}.p-datatable-tbody>tr>td{padding:.75rem 1rem;border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-datatable-row-selected):hover{background:rgb(var(--smz-color-surface-3))}.p-datatable-tbody>tr.p-datatable-row-selected,.p-datatable-tbody>tr.p-highlight{background:rgb(var(--smz-color-primary) / .12);color:rgb(var(--smz-color-fg))}.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:rgb(var(--smz-color-surface-0))}.p-datatable-gridlines .p-datatable-thead>tr>th,.p-datatable-gridlines .p-datatable-tbody>tr>td,.p-datatable-gridlines .p-datatable-tfoot>tr>td{border:1px solid rgb(var(--smz-color-line));border-width:0 0 1px 1px}.p-datatable-gridlines .p-datatable-thead>tr>th:last-child,.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child,.p-datatable-gridlines .p-datatable-tfoot>tr>td:last-child{border-right-width:1px}.p-datatable-sm .p-datatable-thead>tr>th,.p-datatable-sm .p-datatable-tbody>tr>td,.p-datatable-sm .p-datatable-tfoot>tr>td{padding:.375rem .75rem}.p-datatable-lg .p-datatable-thead>tr>th,.p-datatable-lg .p-datatable-tbody>tr>td,.p-datatable-lg .p-datatable-tfoot>tr>td{padding:1.1rem 1.25rem}.p-datatable-header,.p-datatable-footer{padding:.75rem 1rem;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-footer{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable .p-sortable-column:hover{background:rgb(var(--smz-color-surface-3))}.p-datatable .p-sortable-column:focus-visible{outline:2px solid rgb(var(--smz-color-focus));outline-offset:-2px}.p-datatable .p-datatable-loading-overlay{background:rgb(var(--smz-color-surface-1) / .6);color:rgb(var(--smz-color-primary))}.p-datatable .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.p-datatable .p-checkbox,.p-datatable .p-radiobutton{position:relative;display:inline-flex;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-checkbox-box,.p-datatable .p-radiobutton-box{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:1px solid rgb(var(--smz-color-line-strong));background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-on-primary));transition:background-color var(--smz-duration),border-color var(--smz-duration),box-shadow var(--smz-duration)}.p-datatable .p-checkbox-box{border-radius:.3rem}.p-datatable .p-radiobutton-box{border-radius:9999px}.p-datatable .p-checkbox-box.p-highlight,.p-datatable .p-radiobutton-box.p-highlight{background:rgb(var(--smz-color-primary));border-color:rgb(var(--smz-color-primary))}.p-datatable .p-checkbox-box.p-focus,.p-datatable .p-radiobutton-box.p-focus{box-shadow:0 0 0 2px rgb(var(--smz-color-focus) / .45)}.p-datatable .p-checkbox-box.p-disabled,.p-datatable .p-radiobutton-box.p-disabled{opacity:.5;cursor:not-allowed}.p-datatable .p-checkbox-icon{font-size:.7rem;line-height:1}.p-datatable .p-radiobutton-icon{width:.5rem;height:.5rem;border-radius:9999px;background:rgb(var(--smz-color-on-primary));opacity:0}.p-datatable .p-radiobutton-box.p-highlight .p-radiobutton-icon{opacity:1}\n"] }]
+                    }, standalone: false, styles: [".p-datatable{position:relative}.p-datatable>.p-datatable-wrapper{overflow:auto}.p-datatable-table{border-spacing:0px;width:100%}.p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-icon,.p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable>.p-datatable-wrapper{position:relative}.p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}.p-datatable-scrollable-table>.p-datatable-frozen-tbody{position:sticky;z-index:1}.p-datatable-scrollable-table>.p-datatable-tfoot{position:sticky;bottom:0;z-index:1}.p-datatable-scrollable .p-frozen-column{position:sticky;background:inherit}.p-datatable-scrollable th.p-frozen-column{z-index:1}.p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-scrollable-table>.p-datatable-tbody>.p-rowgroup-header{position:sticky;z-index:1}.p-datatable-resizable-table>.p-datatable-thead>tr>th,.p-datatable-resizable-table>.p-datatable-tfoot>tr>td,.p-datatable-resizable-table>.p-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.p-datatable-resizable-table>.p-datatable-thead>tr>th.p-resizable-column:not(.p-frozen-column){background-clip:padding-box;position:relative}.p-datatable-resizable-table-fit>.p-datatable-thead>tr>th.p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-editor-cancel,.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-up,.p-datatable-reorder-indicator-down{position:absolute}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-menu-button,.p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute;top:0;left:0}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable-tbody>tr>td>.p-column-title{display:none}.p-datatable-scroller-spacer{display:flex}.p-datatable .p-scroller .p-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}.p-datatable{color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md)}.p-datatable-table{border-collapse:separate;background:rgb(var(--smz-color-surface-1))}.p-datatable-thead>tr>th,.p-datatable-tfoot>tr>td{padding:.75rem 1rem;text-align:left;font-weight:600;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-tfoot>tr>td{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable-tbody>tr{background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));transition:background-color var(--smz-duration)}.p-datatable-tbody>tr>td{padding:.75rem 1rem;border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-datatable-row-selected):hover{background:rgb(var(--smz-color-surface-3))}.p-datatable-tbody>tr.p-datatable-row-selected,.p-datatable-tbody>tr.p-highlight{background:rgb(var(--smz-color-primary) / .12);color:rgb(var(--smz-color-fg))}.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:rgb(var(--smz-color-surface-0))}.p-datatable-gridlines .p-datatable-thead>tr>th,.p-datatable-gridlines .p-datatable-tbody>tr>td,.p-datatable-gridlines .p-datatable-tfoot>tr>td{border:1px solid rgb(var(--smz-color-line));border-width:0 0 1px 1px}.p-datatable-gridlines .p-datatable-thead>tr>th:last-child,.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child,.p-datatable-gridlines .p-datatable-tfoot>tr>td:last-child{border-right-width:1px}.p-datatable-sm .p-datatable-thead>tr>th,.p-datatable-sm .p-datatable-tbody>tr>td,.p-datatable-sm .p-datatable-tfoot>tr>td{padding:.375rem .75rem}.p-datatable-lg .p-datatable-thead>tr>th,.p-datatable-lg .p-datatable-tbody>tr>td,.p-datatable-lg .p-datatable-tfoot>tr>td{padding:1.1rem 1.25rem}.p-datatable-header,.p-datatable-footer{padding:.75rem 1rem;background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-fg));border-bottom:1px solid rgb(var(--smz-color-line))}.p-datatable-footer{border-top:1px solid rgb(var(--smz-color-line));border-bottom:0}.p-datatable .p-sortable-column:hover{background:rgb(var(--smz-color-surface-3))}.p-datatable .p-sortable-column:focus-visible{outline:2px solid rgb(var(--smz-color-focus));outline-offset:-2px}.p-datatable .p-datatable-loading-overlay{background:rgb(var(--smz-color-surface-1) / .6);color:rgb(var(--smz-color-primary))}.p-datatable .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.p-datatable .p-checkbox,.p-datatable .p-radiobutton{position:relative;display:inline-flex;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none}.p-datatable .p-checkbox-box,.p-datatable .p-radiobutton-box{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:1px solid rgb(var(--smz-color-line-strong));background:rgb(var(--smz-color-surface-1));color:rgb(var(--smz-color-on-primary));transition:background-color var(--smz-duration),border-color var(--smz-duration),box-shadow var(--smz-duration)}.p-datatable .p-checkbox-box{border-radius:.3rem}.p-datatable .p-radiobutton-box{border-radius:9999px}.p-datatable .p-checkbox-box.p-highlight,.p-datatable .p-radiobutton-box.p-highlight{background:rgb(var(--smz-color-primary));border-color:rgb(var(--smz-color-primary))}.p-datatable .p-checkbox-box.p-focus,.p-datatable .p-radiobutton-box.p-focus{box-shadow:0 0 0 2px rgb(var(--smz-color-focus) / .45)}.p-datatable .p-checkbox-box.p-disabled,.p-datatable .p-radiobutton-box.p-disabled{opacity:.5;cursor:not-allowed}.p-datatable .p-checkbox-icon{font-size:.7rem;line-height:1}.p-datatable .p-radiobutton-icon{width:.5rem;height:.5rem;border-radius:9999px;background:rgb(var(--smz-color-on-primary));opacity:0}.p-datatable .p-radiobutton-box.p-highlight .p-radiobutton-icon{opacity:1}.p-datatable-thead>tr>th.p-highlight{background:rgb(var(--smz-color-primary) / .1);color:rgb(var(--smz-color-primary))}.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:rgb(var(--smz-color-surface-3) / .5)}.p-datatable-sm .p-datatable-thead>tr>th,.p-datatable-sm .p-datatable-tbody>tr>td,.p-datatable-sm .p-datatable-tfoot>tr>td{padding:.5rem}.p-column-filter-menu-button,.p-column-filter-clear-button{width:2rem;height:2rem;border-radius:9999px;color:rgb(var(--smz-color-fg-muted));background:transparent;border:0;cursor:pointer;transition:background-color var(--smz-duration)}.p-column-filter-menu-button:hover,.p-column-filter-clear-button:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-column-filter-overlay{min-width:14rem;padding:.5rem;background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay);font-family:var(--smz-font-sans);font-size:var(--smz-text-md)}.p-column-filter-overlay .p-column-filter-row-items,.p-column-filter-overlay .p-column-filter-constraint{padding:.25rem 0}.p-column-filter-overlay .p-column-filter-row-item{padding:.5rem .75rem;border-radius:var(--smz-radius-control);cursor:pointer}.p-column-filter-overlay .p-column-filter-row-item:hover,.p-column-filter-overlay .p-column-filter-row-item.p-highlight{background:rgb(var(--smz-color-surface-3))}.p-column-filter-overlay .p-column-filter-buttonbar{padding:.5rem 0 0;border-top:1px solid rgb(var(--smz-color-line))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: TableService }, { type: i0.ChangeDetectorRef }, { type: TableOverlayService }], propDecorators: { frozenColumns: [{
                 type: Input
             }], frozenValue: [{
@@ -14700,188 +14709,188 @@ class TableBody {
         return getItemOptions ? getItemOptions(index).index : index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableBody, isStandalone: false, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], value: "value", frozen: "frozen", frozenRows: "frozenRows", scrollerOptions: "scrollerOptions" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        @if (!dt.expandedRowTemplate) {
-          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
-            @if (dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, rowIndex)) {
-              <ng-container role="row">
-                <ng-container
-                  *ngTemplateOutlet="dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-                ></ng-container>
-              </ng-container>
-            }
-            @if (dt.rowGroupMode !== 'rowspan') {
-              <ng-container
-                *ngTemplateOutlet="rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-              ></ng-container>
-            }
-            @if (dt.rowGroupMode === 'rowspan') {
-              <ng-container
-                        *ngTemplateOutlet="
-                            rowData ? template : dt.loadingBodyTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                frozen: frozen,
-                                rowgroup: shouldRenderRowspan(value, rowData, rowIndex),
-                                rowspan: calculateRowGroupSize(value, rowData, rowIndex)
-                            }
-                        "
-            ></ng-container>
-          }
-          @if (dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)) {
-            <ng-container role="row">
-              <ng-container
-                *ngTemplateOutlet="dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-              ></ng-container>
-            </ng-container>
-          }
-        }
-        }
-        @if (dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)) {
-          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
-            @if (!dt.groupHeaderTemplate) {
-              <ng-container
-                *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-              ></ng-container>
-            }
-            @if (dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))) {
-              <ng-container role="row">
-                <ng-container
-                        *ngTemplateOutlet="
-                            dt.groupHeaderTemplate;
-                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
-                        "
-                ></ng-container>
-              </ng-container>
-            }
-            @if (dt.isRowExpanded(rowData)) {
-              <ng-container *ngTemplateOutlet="dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
-              @if (dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))) {
-                <ng-container role="row">
-                  <ng-container
-                            *ngTemplateOutlet="
-                                dt.groupFooterTemplate;
-                                context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
-                            "
-                  ></ng-container>
-                </ng-container>
-              }
-            }
-          }
-        }
-        @if (dt.frozenExpandedRowTemplate && frozen) {
-          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
-            <ng-container
-              *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-            ></ng-container>
-            @if (dt.isRowExpanded(rowData)) {
-              <ng-container *ngTemplateOutlet="dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
-            }
-          }
-        }
-        @if (dt.loading) {
-          <ng-container *ngTemplateOutlet="dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
-        }
-        @if (dt.isEmpty() && !dt.loading) {
-          <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
-        }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableBody, isStandalone: false, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], value: "value", frozen: "frozen", frozenRows: "frozenRows", scrollerOptions: "scrollerOptions" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        @if (!dt.expandedRowTemplate) {
+          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
+            @if (dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, rowIndex)) {
+              <ng-container role="row">
+                <ng-container
+                  *ngTemplateOutlet="dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+                ></ng-container>
+              </ng-container>
+            }
+            @if (dt.rowGroupMode !== 'rowspan') {
+              <ng-container
+                *ngTemplateOutlet="rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+              ></ng-container>
+            }
+            @if (dt.rowGroupMode === 'rowspan') {
+              <ng-container
+                        *ngTemplateOutlet="
+                            rowData ? template : dt.loadingBodyTemplate;
+                            context: {
+                                $implicit: rowData,
+                                rowIndex: getRowIndex(rowIndex),
+                                columns: columns,
+                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                frozen: frozen,
+                                rowgroup: shouldRenderRowspan(value, rowData, rowIndex),
+                                rowspan: calculateRowGroupSize(value, rowData, rowIndex)
+                            }
+                        "
+            ></ng-container>
+          }
+          @if (dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)) {
+            <ng-container role="row">
+              <ng-container
+                *ngTemplateOutlet="dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+              ></ng-container>
+            </ng-container>
+          }
+        }
+        }
+        @if (dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)) {
+          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
+            @if (!dt.groupHeaderTemplate) {
+              <ng-container
+                *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+              ></ng-container>
+            }
+            @if (dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))) {
+              <ng-container role="row">
+                <ng-container
+                        *ngTemplateOutlet="
+                            dt.groupHeaderTemplate;
+                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
+                        "
+                ></ng-container>
+              </ng-container>
+            }
+            @if (dt.isRowExpanded(rowData)) {
+              <ng-container *ngTemplateOutlet="dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
+              @if (dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))) {
+                <ng-container role="row">
+                  <ng-container
+                            *ngTemplateOutlet="
+                                dt.groupFooterTemplate;
+                                context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
+                            "
+                  ></ng-container>
+                </ng-container>
+              }
+            }
+          }
+        }
+        @if (dt.frozenExpandedRowTemplate && frozen) {
+          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
+            <ng-container
+              *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+            ></ng-container>
+            @if (dt.isRowExpanded(rowData)) {
+              <ng-container *ngTemplateOutlet="dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
+            }
+          }
+        }
+        @if (dt.loading) {
+          <ng-container *ngTemplateOutlet="dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        }
+        @if (dt.isEmpty() && !dt.loading) {
+          <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        }
         `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBody, decorators: [{
             type: Component,
             args: [{
                     selector: '[pTableBody]',
-                    template: `
-        @if (!dt.expandedRowTemplate) {
-          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
-            @if (dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, rowIndex)) {
-              <ng-container role="row">
-                <ng-container
-                  *ngTemplateOutlet="dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-                ></ng-container>
-              </ng-container>
-            }
-            @if (dt.rowGroupMode !== 'rowspan') {
-              <ng-container
-                *ngTemplateOutlet="rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-              ></ng-container>
-            }
-            @if (dt.rowGroupMode === 'rowspan') {
-              <ng-container
-                        *ngTemplateOutlet="
-                            rowData ? template : dt.loadingBodyTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                frozen: frozen,
-                                rowgroup: shouldRenderRowspan(value, rowData, rowIndex),
-                                rowspan: calculateRowGroupSize(value, rowData, rowIndex)
-                            }
-                        "
-            ></ng-container>
-          }
-          @if (dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)) {
-            <ng-container role="row">
-              <ng-container
-                *ngTemplateOutlet="dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-              ></ng-container>
-            </ng-container>
-          }
-        }
-        }
-        @if (dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)) {
-          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
-            @if (!dt.groupHeaderTemplate) {
-              <ng-container
-                *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-              ></ng-container>
-            }
-            @if (dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))) {
-              <ng-container role="row">
-                <ng-container
-                        *ngTemplateOutlet="
-                            dt.groupHeaderTemplate;
-                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
-                        "
-                ></ng-container>
-              </ng-container>
-            }
-            @if (dt.isRowExpanded(rowData)) {
-              <ng-container *ngTemplateOutlet="dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
-              @if (dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))) {
-                <ng-container role="row">
-                  <ng-container
-                            *ngTemplateOutlet="
-                                dt.groupFooterTemplate;
-                                context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
-                            "
-                  ></ng-container>
-                </ng-container>
-              }
-            }
-          }
-        }
-        @if (dt.frozenExpandedRowTemplate && frozen) {
-          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
-            <ng-container
-              *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
-            ></ng-container>
-            @if (dt.isRowExpanded(rowData)) {
-              <ng-container *ngTemplateOutlet="dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
-            }
-          }
-        }
-        @if (dt.loading) {
-          <ng-container *ngTemplateOutlet="dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
-        }
-        @if (dt.isEmpty() && !dt.loading) {
-          <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
-        }
+                    template: `
+        @if (!dt.expandedRowTemplate) {
+          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
+            @if (dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, rowIndex)) {
+              <ng-container role="row">
+                <ng-container
+                  *ngTemplateOutlet="dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+                ></ng-container>
+              </ng-container>
+            }
+            @if (dt.rowGroupMode !== 'rowspan') {
+              <ng-container
+                *ngTemplateOutlet="rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+              ></ng-container>
+            }
+            @if (dt.rowGroupMode === 'rowspan') {
+              <ng-container
+                        *ngTemplateOutlet="
+                            rowData ? template : dt.loadingBodyTemplate;
+                            context: {
+                                $implicit: rowData,
+                                rowIndex: getRowIndex(rowIndex),
+                                columns: columns,
+                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                frozen: frozen,
+                                rowgroup: shouldRenderRowspan(value, rowData, rowIndex),
+                                rowspan: calculateRowGroupSize(value, rowData, rowIndex)
+                            }
+                        "
+            ></ng-container>
+          }
+          @if (dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)) {
+            <ng-container role="row">
+              <ng-container
+                *ngTemplateOutlet="dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+              ></ng-container>
+            </ng-container>
+          }
+        }
+        }
+        @if (dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)) {
+          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
+            @if (!dt.groupHeaderTemplate) {
+              <ng-container
+                *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+              ></ng-container>
+            }
+            @if (dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))) {
+              <ng-container role="row">
+                <ng-container
+                        *ngTemplateOutlet="
+                            dt.groupHeaderTemplate;
+                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
+                        "
+                ></ng-container>
+              </ng-container>
+            }
+            @if (dt.isRowExpanded(rowData)) {
+              <ng-container *ngTemplateOutlet="dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
+              @if (dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))) {
+                <ng-container role="row">
+                  <ng-container
+                            *ngTemplateOutlet="
+                                dt.groupFooterTemplate;
+                                context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
+                            "
+                  ></ng-container>
+                </ng-container>
+              }
+            }
+          }
+        }
+        @if (dt.frozenExpandedRowTemplate && frozen) {
+          @for (rowData of value; track $any(dt.rowTrackBy)(rowIndex, rowData); let rowIndex = $index) {
+            <ng-container
+              *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
+            ></ng-container>
+            @if (dt.isRowExpanded(rowData)) {
+              <ng-container *ngTemplateOutlet="dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
+            }
+          }
+        }
+        @if (dt.loading) {
+          <ng-container *ngTemplateOutlet="dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        }
+        @if (dt.isEmpty() && !dt.loading) {
+          <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        }
         `,
                     changeDetection: ChangeDetectionStrategy.Default,
                     encapsulation: ViewEncapsulation.None,
@@ -15125,22 +15134,22 @@ class SortIcon {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SortIcon, isStandalone: false, selector: "p-sortIcon", inputs: { field: "field" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <i class="p-sortable-column-icon fa-solid fa-fw" [ngClass]="{ 'fa-arrow-up-short-wide': sortOrder === 1, 'fa-arrow-down-wide-short': sortOrder === -1, 'fa-sort': sortOrder === 0 }"></i>
-        @if (isMultiSorted()) {
-          <span class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
-        }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SortIcon, isStandalone: false, selector: "p-sortIcon", inputs: { field: "field" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        <i class="p-sortable-column-icon fa-solid fa-fw" [ngClass]="{ 'fa-arrow-up-short-wide': sortOrder === 1, 'fa-arrow-down-wide-short': sortOrder === -1, 'fa-sort': sortOrder === 0 }"></i>
+        @if (isMultiSorted()) {
+          <span class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
+        }
         `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-sortIcon',
-                    template: `
-        <i class="p-sortable-column-icon fa-solid fa-fw" [ngClass]="{ 'fa-arrow-up-short-wide': sortOrder === 1, 'fa-arrow-down-wide-short': sortOrder === -1, 'fa-sort': sortOrder === 0 }"></i>
-        @if (isMultiSorted()) {
-          <span class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
-        }
+                    template: `
+        <i class="p-sortable-column-icon fa-solid fa-fw" [ngClass]="{ 'fa-arrow-up-short-wide': sortOrder === 1, 'fa-arrow-down-wide-short': sortOrder === -1, 'fa-sort': sortOrder === 0 }"></i>
+        @if (isMultiSorted()) {
+          <span class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
+        }
         `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -16133,26 +16142,26 @@ class CellEditor {
         return (this.dt.editingCell && this.editableColumn && this.dt.editingCell === this.editableColumn.el.nativeElement) || (this.editableRow && this.dt.editMode === 'row' && this.dt.isRowEditing(this.editableRow.data));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CellEditor, isStandalone: false, selector: "p-cellEditor", host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: `
-        @if (editing) {
-          <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
-        }
-        @if (!editing) {
-          <ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
-        }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CellEditor, isStandalone: false, selector: "p-cellEditor", host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: `
+        @if (editing) {
+          <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
+        }
+        @if (!editing) {
+          <ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
+        }
         `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-cellEditor',
-                    template: `
-        @if (editing) {
-          <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
-        }
-        @if (!editing) {
-          <ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
-        }
+                    template: `
+        @if (editing) {
+          <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
+        }
+        @if (!editing) {
+          <ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
+        }
         `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
@@ -16214,30 +16223,30 @@ class TableRadioButton {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TableRadioButton, isStandalone: false, selector: "p-tableRadioButton", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <div class="p-radiobutton p-component" [ngClass]="{ 'p-radiobutton-focused': focused, 'p-radiobutton-disabled': disabled }" (click)="onClick($event)">
-            <div class="p-hidden-accessible">
-                <input type="radio" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.aria-label]="ariaLabel" />
-            </div>
-            <div #box [ngClass]="{ 'p-radiobutton-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="radio" [attr.aria-checked]="checked">
-                <div class="p-radiobutton-icon"></div>
-            </div>
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TableRadioButton, isStandalone: false, selector: "p-tableRadioButton", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        <div class="p-radiobutton p-component" [ngClass]="{ 'p-radiobutton-focused': focused, 'p-radiobutton-disabled': disabled }" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input type="radio" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.aria-label]="ariaLabel" />
+            </div>
+            <div #box [ngClass]="{ 'p-radiobutton-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="radio" [attr.aria-checked]="checked">
+                <div class="p-radiobutton-icon"></div>
+            </div>
+        </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableRadioButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableRadioButton',
-                    template: `
-        <div class="p-radiobutton p-component" [ngClass]="{ 'p-radiobutton-focused': focused, 'p-radiobutton-disabled': disabled }" (click)="onClick($event)">
-            <div class="p-hidden-accessible">
-                <input type="radio" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.aria-label]="ariaLabel" />
-            </div>
-            <div #box [ngClass]="{ 'p-radiobutton-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="radio" [attr.aria-checked]="checked">
-                <div class="p-radiobutton-icon"></div>
-            </div>
-        </div>
+                    template: `
+        <div class="p-radiobutton p-component" [ngClass]="{ 'p-radiobutton-focused': focused, 'p-radiobutton-disabled': disabled }" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input type="radio" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.aria-label]="ariaLabel" />
+            </div>
+            <div #box [ngClass]="{ 'p-radiobutton-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="radio" [attr.aria-checked]="checked">
+                <div class="p-radiobutton-icon"></div>
+            </div>
+        </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -16306,30 +16315,30 @@ class TableCheckbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TableCheckbox, isStandalone: false, selector: "p-tableCheckbox", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", required: "required", ariaLabel: "ariaLabel" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': disabled }" (click)="onClick($event)">
-            <div class="p-hidden-accessible">
-                <input type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.required]="required" [attr.aria-label]="ariaLabel" />
-            </div>
-            <div #box [ngClass]="{ 'p-checkbox-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
-            </div>
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TableCheckbox, isStandalone: false, selector: "p-tableCheckbox", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", required: "required", ariaLabel: "ariaLabel" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': disabled }" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.required]="required" [attr.aria-label]="ariaLabel" />
+            </div>
+            <div #box [ngClass]="{ 'p-checkbox-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
+            </div>
+        </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableCheckbox',
-                    template: `
-        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': disabled }" (click)="onClick($event)">
-            <div class="p-hidden-accessible">
-                <input type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.required]="required" [attr.aria-label]="ariaLabel" />
-            </div>
-            <div #box [ngClass]="{ 'p-checkbox-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
-            </div>
-        </div>
+                    template: `
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': disabled }" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled" [attr.required]="required" [attr.aria-label]="ariaLabel" />
+            </div>
+            <div #box [ngClass]="{ 'p-checkbox-box p-component': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
+            </div>
+        </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -16417,30 +16426,30 @@ class TableHeaderCheckbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TableHeaderCheckbox, isStandalone: false, selector: "p-tableHeaderCheckbox", inputs: { disabled: "disabled", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': isDisabled() }" (click)="onClick($event)">
-            <div class="p-hidden-accessible">
-                <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="isDisabled()" [attr.aria-label]="ariaLabel" />
-            </div>
-            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': isDisabled() }" role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
-            </div>
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TableHeaderCheckbox, isStandalone: false, selector: "p-tableHeaderCheckbox", inputs: { disabled: "disabled", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': isDisabled() }" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="isDisabled()" [attr.aria-label]="ariaLabel" />
+            </div>
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': isDisabled() }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
+            </div>
+        </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableHeaderCheckbox',
-                    template: `
-        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': isDisabled() }" (click)="onClick($event)">
-            <div class="p-hidden-accessible">
-                <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="isDisabled()" [attr.aria-label]="ariaLabel" />
-            </div>
-            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': isDisabled() }" role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
-            </div>
-        </div>
+                    template: `
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused, 'p-checkbox-disabled': isDisabled() }" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="isDisabled()" [attr.aria-label]="ariaLabel" />
+            </div>
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': isDisabled() }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{ 'fa-solid fa-check': checked }"></span>
+            </div>
+        </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -16894,7 +16903,8 @@ class ColumnFilter {
         return false;
     }
     isOutsideClicked(event) {
-        return !(this.overlay.isSameNode(event.target) ||
+        return !(isInsideCdkOverlay(event) ||
+            this.overlay.isSameNode(event.target) ||
             this.overlay.contains(event.target) ||
             this.icon.nativeElement.isSameNode(event.target) ||
             this.icon.nativeElement.contains(event.target) ||
@@ -16986,260 +16996,260 @@ class ColumnFilter {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnFilter, deps: [{ token: i0.ElementRef }, { token: Table }, { token: i0.Renderer2 }, { token: i2.SmzLocaleService }, { token: TableOverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnFilter, isStandalone: false, selector: "p-columnFilter", inputs: { field: "field", type: "type", display: "display", showMenu: "showMenu", matchMode: "matchMode", operator: "operator", showOperator: "showOperator", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showMatchModes: "showMatchModes", showAddButton: "showAddButton", hideOnClear: "hideOnClear", placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: "maxConstraints", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping", showButtons: "showButtons", showTime: "showTime" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: `
-        <div class="p-column-filter" [ngClass]="{ 'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu' }">
-          @if (display === 'row') {
-            <p-columnFilterFormElement
-              class="p-fluid"
-              [type]="type"
-              [field]="field"
-              [filterConstraint]="$any(dt.filters[field])"
-              [filterTemplate]="filterTemplate"
-              [placeholder]="placeholder"
-              [minFractionDigits]="minFractionDigits"
-              [maxFractionDigits]="maxFractionDigits"
-              [prefix]="prefix"
-              [suffix]="suffix"
-              [locale]="locale"
-              [localeMatcher]="localeMatcher"
-              [currency]="currency"
-              [currencyDisplay]="currencyDisplay"
-              [useGrouping]="useGrouping"
-              [showButtons]="showButtons"
-              [showTime]="showTime"
-            ></p-columnFilterFormElement>
-          }
-          @if (showMenuButton) {
-            <button
-              #icon
-              type="button"
-              class="p-column-filter-menu-button p-link"
-              aria-haspopup="true"
-              [attr.aria-expanded]="overlayVisible"
-              [ngClass]="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
-              (click)="toggleMenu()"
-              (keydown)="onToggleButtonKeyDown($event)"
-              >
-              <span class="fa-solid fa-filter p-filter-icon"></span>
-            </button>
-          }
-          @if (showClearButton && display === 'row') {
-            <button #icon [ngClass]="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" (click)="clearFilter()">
-              <span class="fa-solid fa-filter-circle-xmark"></span>
-            </button>
-          }
-          @if (showMenu && overlayVisible) {
-            <div
-              [ngClass]="{ 'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu' }"
-              (click)="onContentClick()"
-              [@overlayAnimation]="'visible'"
-              (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-              (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-              (keydown.escape)="onEscape()"
-              >
-              <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: field }"></ng-container>
-              @if (display === 'row') {
-                <ul class="p-column-filter-row-items">
-                  @for (matchMode of matchModes; track matchMode; let i = $index) {
-                    <li
-                      class="p-column-filter-row-item"
-                      (click)="onRowMatchModeChange(matchMode.value)"
-                      (keydown)="onRowMatchModeKeyDown($event)"
-                      (keydown.enter)="this.onRowMatchModeChange(matchMode.value)"
-                      [ngClass]="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
-                      [attr.tabindex]="i === 0 ? '0' : null"
-                      >
-                      {{ matchMode.label }}
-                    </li>
-                  }
-                  <li class="p-column-filter-separator"></li>
-                  <li class="p-column-filter-row-item" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">{{ noFilterLabel }}</li>
-                </ul>
-              } @else {
-                @if (isShowOperator) {
-                  <div class="p-column-filter-operator">
-                    <ui-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" styleClass="p-column-filter-operator-dropdown"></ui-select>
-                  </div>
-                }
-                <div class="p-column-filter-constraints">
-                  @for (fieldConstraint of fieldConstraints; track fieldConstraint; let i = $index) {
-                    <div class="p-column-filter-constraint">
-                      @if (showMatchModes && matchModes) {
-                        <ui-select [options]="matchModes" [ngModel]="fieldConstraint.matchMode" (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)" styleClass="p-column-filter-matchmode-dropdown"></ui-select>
-                      }
-                      <p-columnFilterFormElement
-                        [type]="type"
-                        [field]="field"
-                        [filterConstraint]="fieldConstraint"
-                        [filterTemplate]="filterTemplate"
-                        [placeholder]="placeholder"
-                        [minFractionDigits]="minFractionDigits"
-                        [maxFractionDigits]="maxFractionDigits"
-                        [prefix]="prefix"
-                        [suffix]="suffix"
-                        [locale]="locale"
-                        [localeMatcher]="localeMatcher"
-                        [currency]="currency"
-                        [currencyDisplay]="currencyDisplay"
-                        [useGrouping]="useGrouping"
-                        [showTime]="showTime"
-                      ></p-columnFilterFormElement>
-                      <div>
-                        @if (showRemoveIcon) {
-                          <button type="button" smzButton icon="fa-solid fa-trash" class="p-column-filter-remove-button" (click)="removeConstraint(fieldConstraint)" smzRipple [label]="removeRuleButtonLabel" variant="text" severity="danger" size="sm"></button>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-                @if (isShowAddConstraint) {
-                  <div class="p-column-filter-add-rule">
-                    <button type="button" smzButton [label]="addRuleButtonLabel" icon="fa-solid fa-plus" class="p-column-filter-add-button" (click)="addConstraint()" smzRipple variant="text" size="sm"></button>
-                  </div>
-                }
-                <div class="p-column-filter-buttonbar">
-                  @if (showClearButton) {
-                    <button type="button" smzButton (click)="clearFilter()" [label]="clearButtonLabel" smzRipple variant="outlined" size="sm"></button>
-                  }
-                  @if (showApplyButton) {
-                    <button type="button" smzButton (click)="applyFilter()" [label]="applyButtonLabel" smzRipple size="sm"></button>
-                  }
-                </div>
-              }
-              <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: field }"></ng-container>
-            </div>
-          }
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnFilter, isStandalone: false, selector: "p-columnFilter", inputs: { field: "field", type: "type", display: "display", showMenu: "showMenu", matchMode: "matchMode", operator: "operator", showOperator: "showOperator", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showMatchModes: "showMatchModes", showAddButton: "showAddButton", hideOnClear: "hideOnClear", placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: "maxConstraints", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping", showButtons: "showButtons", showTime: "showTime" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: `
+        <div class="p-column-filter" [ngClass]="{ 'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu' }">
+          @if (display === 'row') {
+            <p-columnFilterFormElement
+              class="p-fluid"
+              [type]="type"
+              [field]="field"
+              [filterConstraint]="$any(dt.filters[field])"
+              [filterTemplate]="filterTemplate"
+              [placeholder]="placeholder"
+              [minFractionDigits]="minFractionDigits"
+              [maxFractionDigits]="maxFractionDigits"
+              [prefix]="prefix"
+              [suffix]="suffix"
+              [locale]="locale"
+              [localeMatcher]="localeMatcher"
+              [currency]="currency"
+              [currencyDisplay]="currencyDisplay"
+              [useGrouping]="useGrouping"
+              [showButtons]="showButtons"
+              [showTime]="showTime"
+            ></p-columnFilterFormElement>
+          }
+          @if (showMenuButton) {
+            <button
+              #icon
+              type="button"
+              class="p-column-filter-menu-button p-link"
+              aria-haspopup="true"
+              [attr.aria-expanded]="overlayVisible"
+              [ngClass]="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
+              (click)="toggleMenu()"
+              (keydown)="onToggleButtonKeyDown($event)"
+              >
+              <span class="fa-solid fa-filter p-filter-icon"></span>
+            </button>
+          }
+          @if (showClearButton && display === 'row') {
+            <button #icon [ngClass]="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" (click)="clearFilter()">
+              <span class="fa-solid fa-filter-circle-xmark"></span>
+            </button>
+          }
+          @if (showMenu && overlayVisible) {
+            <div
+              [ngClass]="{ 'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu' }"
+              (click)="onContentClick()"
+              [@overlayAnimation]="'visible'"
+              (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+              (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+              (keydown.escape)="onEscape()"
+              >
+              <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: field }"></ng-container>
+              @if (display === 'row') {
+                <ul class="p-column-filter-row-items">
+                  @for (matchMode of matchModes; track matchMode.value; let i = $index) {
+                    <li
+                      class="p-column-filter-row-item"
+                      (click)="onRowMatchModeChange(matchMode.value)"
+                      (keydown)="onRowMatchModeKeyDown($event)"
+                      (keydown.enter)="this.onRowMatchModeChange(matchMode.value)"
+                      [ngClass]="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
+                      [attr.tabindex]="i === 0 ? '0' : null"
+                      >
+                      {{ matchMode.label }}
+                    </li>
+                  }
+                  <li class="p-column-filter-separator"></li>
+                  <li class="p-column-filter-row-item" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">{{ noFilterLabel }}</li>
+                </ul>
+              } @else {
+                @if (isShowOperator) {
+                  <div class="p-column-filter-operator">
+                    <ui-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" styleClass="p-column-filter-operator-dropdown"></ui-select>
+                  </div>
+                }
+                <div class="p-column-filter-constraints">
+                  @for (fieldConstraint of fieldConstraints; track $index; let i = $index) {
+                    <div class="p-column-filter-constraint">
+                      @if (showMatchModes && matchModes) {
+                        <ui-select [options]="matchModes" [ngModel]="fieldConstraint.matchMode" (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)" styleClass="p-column-filter-matchmode-dropdown"></ui-select>
+                      }
+                      <p-columnFilterFormElement
+                        [type]="type"
+                        [field]="field"
+                        [filterConstraint]="fieldConstraint"
+                        [filterTemplate]="filterTemplate"
+                        [placeholder]="placeholder"
+                        [minFractionDigits]="minFractionDigits"
+                        [maxFractionDigits]="maxFractionDigits"
+                        [prefix]="prefix"
+                        [suffix]="suffix"
+                        [locale]="locale"
+                        [localeMatcher]="localeMatcher"
+                        [currency]="currency"
+                        [currencyDisplay]="currencyDisplay"
+                        [useGrouping]="useGrouping"
+                        [showTime]="showTime"
+                      ></p-columnFilterFormElement>
+                      <div>
+                        @if (showRemoveIcon) {
+                          <button type="button" smzButton icon="fa-solid fa-trash" class="p-column-filter-remove-button" (click)="removeConstraint(fieldConstraint)" smzRipple [label]="removeRuleButtonLabel" variant="text" severity="danger" size="sm"></button>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+                @if (isShowAddConstraint) {
+                  <div class="p-column-filter-add-rule">
+                    <button type="button" smzButton [label]="addRuleButtonLabel" icon="fa-solid fa-plus" class="p-column-filter-add-button" (click)="addConstraint()" smzRipple variant="text" size="sm"></button>
+                  </div>
+                }
+                <div class="p-column-filter-buttonbar">
+                  @if (showClearButton) {
+                    <button type="button" smzButton (click)="clearFilter()" [label]="clearButtonLabel" smzRipple variant="outlined" size="sm"></button>
+                  }
+                  @if (showApplyButton) {
+                    <button type="button" smzButton (click)="applyFilter()" [label]="applyButtonLabel" smzRipple size="sm"></button>
+                  }
+                </div>
+              }
+              <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: field }"></ng-container>
+            </div>
+          }
+        </div>
         `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => 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: "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(() => SmzButtonComponent), selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i0.forwardRef(() => ColumnFilterFormElement), selector: "p-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showTime", "showButtons"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilter',
-                    template: `
-        <div class="p-column-filter" [ngClass]="{ 'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu' }">
-          @if (display === 'row') {
-            <p-columnFilterFormElement
-              class="p-fluid"
-              [type]="type"
-              [field]="field"
-              [filterConstraint]="$any(dt.filters[field])"
-              [filterTemplate]="filterTemplate"
-              [placeholder]="placeholder"
-              [minFractionDigits]="minFractionDigits"
-              [maxFractionDigits]="maxFractionDigits"
-              [prefix]="prefix"
-              [suffix]="suffix"
-              [locale]="locale"
-              [localeMatcher]="localeMatcher"
-              [currency]="currency"
-              [currencyDisplay]="currencyDisplay"
-              [useGrouping]="useGrouping"
-              [showButtons]="showButtons"
-              [showTime]="showTime"
-            ></p-columnFilterFormElement>
-          }
-          @if (showMenuButton) {
-            <button
-              #icon
-              type="button"
-              class="p-column-filter-menu-button p-link"
-              aria-haspopup="true"
-              [attr.aria-expanded]="overlayVisible"
-              [ngClass]="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
-              (click)="toggleMenu()"
-              (keydown)="onToggleButtonKeyDown($event)"
-              >
-              <span class="fa-solid fa-filter p-filter-icon"></span>
-            </button>
-          }
-          @if (showClearButton && display === 'row') {
-            <button #icon [ngClass]="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" (click)="clearFilter()">
-              <span class="fa-solid fa-filter-circle-xmark"></span>
-            </button>
-          }
-          @if (showMenu && overlayVisible) {
-            <div
-              [ngClass]="{ 'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu' }"
-              (click)="onContentClick()"
-              [@overlayAnimation]="'visible'"
-              (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-              (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-              (keydown.escape)="onEscape()"
-              >
-              <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: field }"></ng-container>
-              @if (display === 'row') {
-                <ul class="p-column-filter-row-items">
-                  @for (matchMode of matchModes; track matchMode; let i = $index) {
-                    <li
-                      class="p-column-filter-row-item"
-                      (click)="onRowMatchModeChange(matchMode.value)"
-                      (keydown)="onRowMatchModeKeyDown($event)"
-                      (keydown.enter)="this.onRowMatchModeChange(matchMode.value)"
-                      [ngClass]="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
-                      [attr.tabindex]="i === 0 ? '0' : null"
-                      >
-                      {{ matchMode.label }}
-                    </li>
-                  }
-                  <li class="p-column-filter-separator"></li>
-                  <li class="p-column-filter-row-item" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">{{ noFilterLabel }}</li>
-                </ul>
-              } @else {
-                @if (isShowOperator) {
-                  <div class="p-column-filter-operator">
-                    <ui-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" styleClass="p-column-filter-operator-dropdown"></ui-select>
-                  </div>
-                }
-                <div class="p-column-filter-constraints">
-                  @for (fieldConstraint of fieldConstraints; track fieldConstraint; let i = $index) {
-                    <div class="p-column-filter-constraint">
-                      @if (showMatchModes && matchModes) {
-                        <ui-select [options]="matchModes" [ngModel]="fieldConstraint.matchMode" (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)" styleClass="p-column-filter-matchmode-dropdown"></ui-select>
-                      }
-                      <p-columnFilterFormElement
-                        [type]="type"
-                        [field]="field"
-                        [filterConstraint]="fieldConstraint"
-                        [filterTemplate]="filterTemplate"
-                        [placeholder]="placeholder"
-                        [minFractionDigits]="minFractionDigits"
-                        [maxFractionDigits]="maxFractionDigits"
-                        [prefix]="prefix"
-                        [suffix]="suffix"
-                        [locale]="locale"
-                        [localeMatcher]="localeMatcher"
-                        [currency]="currency"
-                        [currencyDisplay]="currencyDisplay"
-                        [useGrouping]="useGrouping"
-                        [showTime]="showTime"
-                      ></p-columnFilterFormElement>
-                      <div>
-                        @if (showRemoveIcon) {
-                          <button type="button" smzButton icon="fa-solid fa-trash" class="p-column-filter-remove-button" (click)="removeConstraint(fieldConstraint)" smzRipple [label]="removeRuleButtonLabel" variant="text" severity="danger" size="sm"></button>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-                @if (isShowAddConstraint) {
-                  <div class="p-column-filter-add-rule">
-                    <button type="button" smzButton [label]="addRuleButtonLabel" icon="fa-solid fa-plus" class="p-column-filter-add-button" (click)="addConstraint()" smzRipple variant="text" size="sm"></button>
-                  </div>
-                }
-                <div class="p-column-filter-buttonbar">
-                  @if (showClearButton) {
-                    <button type="button" smzButton (click)="clearFilter()" [label]="clearButtonLabel" smzRipple variant="outlined" size="sm"></button>
-                  }
-                  @if (showApplyButton) {
-                    <button type="button" smzButton (click)="applyFilter()" [label]="applyButtonLabel" smzRipple size="sm"></button>
-                  }
-                </div>
-              }
-              <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: field }"></ng-container>
-            </div>
-          }
-        </div>
+                    template: `
+        <div class="p-column-filter" [ngClass]="{ 'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu' }">
+          @if (display === 'row') {
+            <p-columnFilterFormElement
+              class="p-fluid"
+              [type]="type"
+              [field]="field"
+              [filterConstraint]="$any(dt.filters[field])"
+              [filterTemplate]="filterTemplate"
+              [placeholder]="placeholder"
+              [minFractionDigits]="minFractionDigits"
+              [maxFractionDigits]="maxFractionDigits"
+              [prefix]="prefix"
+              [suffix]="suffix"
+              [locale]="locale"
+              [localeMatcher]="localeMatcher"
+              [currency]="currency"
+              [currencyDisplay]="currencyDisplay"
+              [useGrouping]="useGrouping"
+              [showButtons]="showButtons"
+              [showTime]="showTime"
+            ></p-columnFilterFormElement>
+          }
+          @if (showMenuButton) {
+            <button
+              #icon
+              type="button"
+              class="p-column-filter-menu-button p-link"
+              aria-haspopup="true"
+              [attr.aria-expanded]="overlayVisible"
+              [ngClass]="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
+              (click)="toggleMenu()"
+              (keydown)="onToggleButtonKeyDown($event)"
+              >
+              <span class="fa-solid fa-filter p-filter-icon"></span>
+            </button>
+          }
+          @if (showClearButton && display === 'row') {
+            <button #icon [ngClass]="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" (click)="clearFilter()">
+              <span class="fa-solid fa-filter-circle-xmark"></span>
+            </button>
+          }
+          @if (showMenu && overlayVisible) {
+            <div
+              [ngClass]="{ 'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu' }"
+              (click)="onContentClick()"
+              [@overlayAnimation]="'visible'"
+              (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+              (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+              (keydown.escape)="onEscape()"
+              >
+              <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: field }"></ng-container>
+              @if (display === 'row') {
+                <ul class="p-column-filter-row-items">
+                  @for (matchMode of matchModes; track matchMode.value; let i = $index) {
+                    <li
+                      class="p-column-filter-row-item"
+                      (click)="onRowMatchModeChange(matchMode.value)"
+                      (keydown)="onRowMatchModeKeyDown($event)"
+                      (keydown.enter)="this.onRowMatchModeChange(matchMode.value)"
+                      [ngClass]="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
+                      [attr.tabindex]="i === 0 ? '0' : null"
+                      >
+                      {{ matchMode.label }}
+                    </li>
+                  }
+                  <li class="p-column-filter-separator"></li>
+                  <li class="p-column-filter-row-item" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">{{ noFilterLabel }}</li>
+                </ul>
+              } @else {
+                @if (isShowOperator) {
+                  <div class="p-column-filter-operator">
+                    <ui-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" styleClass="p-column-filter-operator-dropdown"></ui-select>
+                  </div>
+                }
+                <div class="p-column-filter-constraints">
+                  @for (fieldConstraint of fieldConstraints; track $index; let i = $index) {
+                    <div class="p-column-filter-constraint">
+                      @if (showMatchModes && matchModes) {
+                        <ui-select [options]="matchModes" [ngModel]="fieldConstraint.matchMode" (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)" styleClass="p-column-filter-matchmode-dropdown"></ui-select>
+                      }
+                      <p-columnFilterFormElement
+                        [type]="type"
+                        [field]="field"
+                        [filterConstraint]="fieldConstraint"
+                        [filterTemplate]="filterTemplate"
+                        [placeholder]="placeholder"
+                        [minFractionDigits]="minFractionDigits"
+                        [maxFractionDigits]="maxFractionDigits"
+                        [prefix]="prefix"
+                        [suffix]="suffix"
+                        [locale]="locale"
+                        [localeMatcher]="localeMatcher"
+                        [currency]="currency"
+                        [currencyDisplay]="currencyDisplay"
+                        [useGrouping]="useGrouping"
+                        [showTime]="showTime"
+                      ></p-columnFilterFormElement>
+                      <div>
+                        @if (showRemoveIcon) {
+                          <button type="button" smzButton icon="fa-solid fa-trash" class="p-column-filter-remove-button" (click)="removeConstraint(fieldConstraint)" smzRipple [label]="removeRuleButtonLabel" variant="text" severity="danger" size="sm"></button>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+                @if (isShowAddConstraint) {
+                  <div class="p-column-filter-add-rule">
+                    <button type="button" smzButton [label]="addRuleButtonLabel" icon="fa-solid fa-plus" class="p-column-filter-add-button" (click)="addConstraint()" smzRipple variant="text" size="sm"></button>
+                  </div>
+                }
+                <div class="p-column-filter-buttonbar">
+                  @if (showClearButton) {
+                    <button type="button" smzButton (click)="clearFilter()" [label]="clearButtonLabel" smzRipple variant="outlined" size="sm"></button>
+                  }
+                  @if (showApplyButton) {
+                    <button type="button" smzButton (click)="applyFilter()" [label]="applyButtonLabel" smzRipple size="sm"></button>
+                  }
+                </div>
+              }
+              <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: field }"></ng-container>
+            </div>
+          }
+        </div>
         `,
                     animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])],
                     encapsulation: ViewEncapsulation.None,
@@ -17342,16 +17352,54 @@ class ColumnFilterFormElement {
             this.dt._filter();
         };
     }
+    pendingFilter = null;
+    /**
+     * Sem botao "Aplicar" (padrao dos filtros do smz), qualquer mudanca de valor filtra a tabela:
+     * texto e numero com debounce, data e booleano na hora. Com o botao, so booleano/vazio filtram (comportamento do PrimeNG).
+     */
     onModelChange(value) {
         this.filterConstraint.value = value;
         if (this.type === 'boolean' || value === '') {
+            this.cancelPendingFilter();
             this.dt._filter();
         }
+        else if (!this.colFilter.showApplyButton) {
+            this.cancelPendingFilter();
+            if (this.type === 'date') {
+                this.dt._filter();
+            }
+            else {
+                this.pendingFilter = setTimeout(() => {
+                    this.pendingFilter = null;
+                    this.dt._filter();
+                    this.dt.cd?.markForCheck();
+                }, 300);
+            }
+        }
     }
     onTextInputEnterKeyDown(event) {
+        this.cancelPendingFilter();
         this.dt._filter();
         event.preventDefault();
     }
+    cancelPendingFilter() {
+        if (this.pendingFilter !== null) {
+            clearTimeout(this.pendingFilter);
+            this.pendingFilter = null;
+        }
+    }
+    /** Fechar o painel antes do debounce terminar nao pode perder o filtro digitado: aplica o que estava pendente. */
+    ngOnDestroy() {
+        if (this.pendingFilter !== null) {
+            this.cancelPendingFilter();
+            // Estamos no meio de uma deteccao de mudancas (o painel acabou de fechar): filtra depois dela e agenda uma nova.
+            const table = this.dt;
+            queueMicrotask(() => {
+                table._filter();
+                table.cd.markForCheck();
+            });
+        }
+    }
     onNumericInputKeyDown(event) {
         if (event.key === 'Enter') {
             this.dt._filter();
@@ -17359,94 +17407,94 @@ class ColumnFilterFormElement {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnFilterFormElement, isStandalone: false, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping", showTime: "showTime", showButtons: "showButtons" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        @if (filterTemplate) {
-          <ng-container
-                *ngTemplateOutlet="
-                    filterTemplate;
-                    context: {
-                        $implicit: filterConstraint.value,
-                        filterCallback: filterCallback,
-                        type: type,
-                        field: field,
-                        filterConstraint: filterConstraint,
-                        placeholder: placeholder,
-                        minFractionDigits: minFractionDigits,
-                        maxFractionDigits: maxFractionDigits,
-                        prefix: prefix,
-                        suffix: suffix,
-                        locale: locale,
-                        localeMatcher: localeMatcher,
-                        currency: currency,
-                        currencyDisplay: currencyDisplay,
-                        useGrouping: useGrouping,
-                        showButtons: showButtons
-                    }
-                "
-        ></ng-container>
-        } @else {
-          @switch (type) {
-            @case ('text') {
-              <input type="text" smzInputText [value]="filterConstraint?.value" (input)="onModelChange($any($event.target).value)" (keydown.enter)="onTextInputEnterKeyDown($any($event))" [attr.placeholder]="placeholder" />
-            }
-            @case ('numeric') {
-              <ui-input-number [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" (keyDown)="onNumericInputKeyDown($event)" [showButtons]="showButtons" [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix" [placeholder]="placeholder" [mode]="currency ? 'currency' : 'decimal'" [locale]="locale" [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></ui-input-number>
-            }
-            @case ('boolean') {
-              <ui-checkbox [ngModel]="filterConstraint?.value" [binary]="false" (ngModelChange)="onModelChange($event)"></ui-checkbox>
-            }
-            @case ('date') {
-              <ui-date-picker [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" [showTime]="showTime"></ui-date-picker>
-            }
-          }
-        }
-        `, 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", "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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnFilterFormElement, isStandalone: false, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping", showTime: "showTime", showButtons: "showButtons" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        @if (filterTemplate) {
+          <ng-container
+                *ngTemplateOutlet="
+                    filterTemplate;
+                    context: {
+                        $implicit: filterConstraint.value,
+                        filterCallback: filterCallback,
+                        type: type,
+                        field: field,
+                        filterConstraint: filterConstraint,
+                        placeholder: placeholder,
+                        minFractionDigits: minFractionDigits,
+                        maxFractionDigits: maxFractionDigits,
+                        prefix: prefix,
+                        suffix: suffix,
+                        locale: locale,
+                        localeMatcher: localeMatcher,
+                        currency: currency,
+                        currencyDisplay: currencyDisplay,
+                        useGrouping: useGrouping,
+                        showButtons: showButtons
+                    }
+                "
+        ></ng-container>
+        } @else {
+          @switch (type) {
+            @case ('text') {
+              <input type="text" smzInputText [value]="filterConstraint?.value" (input)="onModelChange($any($event.target).value)" (keydown.enter)="onTextInputEnterKeyDown($any($event))" [attr.placeholder]="placeholder" />
+            }
+            @case ('numeric') {
+              <ui-input-number [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" (keyDown)="onNumericInputKeyDown($event)" [showButtons]="showButtons" [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix" [placeholder]="placeholder" [mode]="currency ? 'currency' : 'decimal'" [locale]="locale" [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></ui-input-number>
+            }
+            @case ('boolean') {
+              <ui-checkbox [ngModel]="filterConstraint?.value" [binary]="false" (ngModelChange)="onModelChange($event)"></ui-checkbox>
+            }
+            @case ('date') {
+              <ui-date-picker [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" [showTime]="showTime"></ui-date-picker>
+            }
+          }
+        }
+        `, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilterFormElement',
-                    template: `
-        @if (filterTemplate) {
-          <ng-container
-                *ngTemplateOutlet="
-                    filterTemplate;
-                    context: {
-                        $implicit: filterConstraint.value,
-                        filterCallback: filterCallback,
-                        type: type,
-                        field: field,
-                        filterConstraint: filterConstraint,
-                        placeholder: placeholder,
-                        minFractionDigits: minFractionDigits,
-                        maxFractionDigits: maxFractionDigits,
-                        prefix: prefix,
-                        suffix: suffix,
-                        locale: locale,
-                        localeMatcher: localeMatcher,
-                        currency: currency,
-                        currencyDisplay: currencyDisplay,
-                        useGrouping: useGrouping,
-                        showButtons: showButtons
-                    }
-                "
-        ></ng-container>
-        } @else {
-          @switch (type) {
-            @case ('text') {
-              <input type="text" smzInputText [value]="filterConstraint?.value" (input)="onModelChange($any($event.target).value)" (keydown.enter)="onTextInputEnterKeyDown($any($event))" [attr.placeholder]="placeholder" />
-            }
-            @case ('numeric') {
-              <ui-input-number [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" (keyDown)="onNumericInputKeyDown($event)" [showButtons]="showButtons" [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix" [placeholder]="placeholder" [mode]="currency ? 'currency' : 'decimal'" [locale]="locale" [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></ui-input-number>
-            }
-            @case ('boolean') {
-              <ui-checkbox [ngModel]="filterConstraint?.value" [binary]="false" (ngModelChange)="onModelChange($event)"></ui-checkbox>
-            }
-            @case ('date') {
-              <ui-date-picker [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" [showTime]="showTime"></ui-date-picker>
-            }
-          }
-        }
+                    template: `
+        @if (filterTemplate) {
+          <ng-container
+                *ngTemplateOutlet="
+                    filterTemplate;
+                    context: {
+                        $implicit: filterConstraint.value,
+                        filterCallback: filterCallback,
+                        type: type,
+                        field: field,
+                        filterConstraint: filterConstraint,
+                        placeholder: placeholder,
+                        minFractionDigits: minFractionDigits,
+                        maxFractionDigits: maxFractionDigits,
+                        prefix: prefix,
+                        suffix: suffix,
+                        locale: locale,
+                        localeMatcher: localeMatcher,
+                        currency: currency,
+                        currencyDisplay: currencyDisplay,
+                        useGrouping: useGrouping,
+                        showButtons: showButtons
+                    }
+                "
+        ></ng-container>
+        } @else {
+          @switch (type) {
+            @case ('text') {
+              <input type="text" smzInputText [value]="filterConstraint?.value" (input)="onModelChange($any($event.target).value)" (keydown.enter)="onTextInputEnterKeyDown($any($event))" [attr.placeholder]="placeholder" />
+            }
+            @case ('numeric') {
+              <ui-input-number [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" (keyDown)="onNumericInputKeyDown($event)" [showButtons]="showButtons" [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix" [placeholder]="placeholder" [mode]="currency ? 'currency' : 'decimal'" [locale]="locale" [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></ui-input-number>
+            }
+            @case ('boolean') {
+              <ui-checkbox [ngModel]="filterConstraint?.value" [binary]="false" (ngModelChange)="onModelChange($event)"></ui-checkbox>
+            }
+            @case ('date') {
+              <ui-date-picker [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" [showTime]="showTime"></ui-date-picker>
+            }
+          }
+        }
         `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
@@ -17753,41 +17801,7 @@ class SmzMenuItemActionsDirective {
     data;
     collapse = new EventEmitter();
     onClick(event) {
-        if (this.item.disabled) {
-            return;
-        }
-        if (this.item.confirmable?.isCritical) {
-            CriticalConfirmableFunction(this.item.confirmable.title, this.item.confirmable.message, () => { this.resolveCommand(event); });
-        }
-        else if (this.item.confirmable != null && this.item.confirmable.isCritical === false) {
-            ConfirmableFunction(this.item.confirmable.title, this.item.confirmable.message, () => { this.resolveCommand(event); });
-        }
-        else {
-            this.resolveCommand(event);
-        }
-    }
-    resolveCommand(event) {
-        if (this.item.command != null) {
-            if (this.item.dataMap != null) {
-                // Caso o menu tenha uma função para remapear o data
-                const mappedData = this.item.dataMap(this.data);
-                this.item.command(mappedData);
-            }
-            else {
-                this.item.command(this.data);
-            }
-        }
-        else if (this.item.routerLink != null) {
-            if (this.item.queryParams != null) {
-                this.store.dispatch(new Navigate([this.item.routerLink[0], this.item.queryParams]));
-            }
-            else {
-                this.store.dispatch(new Navigate(this.item.routerLink));
-            }
-        }
-        else {
-            console.error('Nether command nor routerLink was set on the item. Please review the menu item model', event, this.item);
-        }
+        executeSmzMenuItem(this.store, this.item, this.data, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzMenuItemActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: SmzMenuItemActionsDirective, isStandalone: false, selector: "[smzMenuItemAction]", inputs: { item: "item", data: "data" }, outputs: { collapse: "collapse" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
@@ -17808,6 +17822,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
+/**
+ * Executa um item de menu com o `data` da linha: respeita `disabled`, `confirmable`, `dataMap`, `command` e `routerLink`/`queryParams`.
+ * Compartilhado entre o modo inline (`smzMenuItemAction`) e o modo overlay (`smz-menu`).
+ */
+function executeSmzMenuItem(store, item, data, event) {
+    if (item.disabled) {
+        return;
+    }
+    const resolve = () => {
+        if (item.command != null) {
+            item.command(item.dataMap != null ? item.dataMap(data) : data);
+        }
+        else if (item.routerLink != null) {
+            store.dispatch(new Navigate(item.queryParams != null ? [item.routerLink[0], item.queryParams] : item.routerLink));
+        }
+        else {
+            console.error('Nether command nor routerLink was set on the item. Please review the menu item model', event, item);
+        }
+    };
+    if (item.confirmable?.isCritical) {
+        CriticalConfirmableFunction(item.confirmable.title, item.confirmable.message, resolve);
+    }
+    else if (item.confirmable != null && item.confirmable.isCritical === false) {
+        ConfirmableFunction(item.confirmable.title, item.confirmable.message, resolve);
+    }
+    else {
+        resolve();
+    }
+}
 
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef, no-underscore-dangle, no-console, eqeqeq, @typescript-eslint/no-unused-vars, @typescript-eslint/no-useless-constructor, @typescript-eslint/explicit-member-accessibility, max-len, no-prototype-builtins, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */
 class SmzFlattenMenuPipe {
@@ -17888,9 +17931,27 @@ class SmzMenuComponent {
     toggle(event, actionMenu) {
         const items = this.callback != null ? this.callback(this.data) : this.items;
         const store = GlobalInjector.instance.get(Store);
-        this.menuItems = new SmzMenuPipe(store).transform(items, this.data);
+        this.menuItems = this.bindActions(new SmzMenuPipe(store).transform(items, this.data), store);
         actionMenu.toggle(event);
     }
+    /**
+     * O `ui-menu` chama `command({ originalEvent, item })`; aqui cada item passa a executar a acao com o `data` da linha
+     * (confirmacao, `dataMap`, `routerLink`/`queryParams`), como no modo inline.
+     */
+    bindActions(items, store) {
+        if (items == null)
+            return items;
+        return items.map((item) => {
+            const hasAction = item.command != null || item.routerLink != null;
+            const bound = { ...item, items: item.items ? this.bindActions(item.items, store) : item.items };
+            if (hasAction) {
+                const original = { ...item };
+                bound.routerLink = undefined;
+                bound.command = (event) => executeSmzMenuItem(store, original, this.data, event?.originalEvent ?? event);
+            }
+            return bound;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzMenuComponent, isStandalone: false, selector: "smz-menu", inputs: { items: "items", callback: "callback", data: "data", buttonClass: "buttonClass", styleClass: "styleClass", icon: "icon", behavior: "behavior", testId: "testId" }, ngImport: i0, template: "\r\n@switch (behavior) {\r\n  @case ('overlay') {\r\n    <ui-menu #actionMenu [popup]=\"true\" [model]=\"menuItems\" appendTo=\"body\"></ui-menu>\r\n    <button smzButton id=\"action-button\" type=\"button\" [attr.data-testid]=\"testId\" [styleClass]=\"[buttonClass, styleClass]\" [icon]=\"icon\" (click)=\"toggle($event, actionMenu)\"></button>\r\n  }\r\n  @case ('inline') {\r\n    <div class=\"grid grid-nogutter items-center justify-start\">\r\n      @for (item of (items | smzFlattenMenu : data); track item) {\r\n        @if (item.visible) {\r\n          <button smzButton type=\"button\" smzMenuItemAction [item]=\"item\" [data]=\"data\" [icon]=\"item.icon\" [styleClass]=\"item.styleClass\" [disabled]=\"item.disabled\" [smzTooltip]=\"item.tooltip\" [rounded]=\"true\" variant=\"text\"></button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n}\r\n", dependencies: [{ 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.SmzMenuListComponent, selector: "ui-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "appendTo", "baseZIndex"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: SmzMenuItemActionsDirective, selector: "[smzMenuItemAction]", inputs: ["item", "data"], outputs: ["collapse"] }, { kind: "pipe", type: SmzFlattenMenuPipe, name: "smzFlattenMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -17985,6 +18046,8 @@ class SmzColumnFilterComponent {
     showAddButton = true;
     showMatchModes = true;
     showOperator = true;
+    /** Padrao `false`: todos os filtros de coluna do smz aplicam na hora (sem botao "Aplicar"), de forma consistente. */
+    showApplyButton = false;
     type = 'text';
     showTime = false;
     documentClickListener;
@@ -18027,7 +18090,7 @@ class SmzColumnFilterComponent {
         }
     }
     isOutsideClicked(event) {
-        return !(this.columnFilter.overlay.isSameNode(event.target) || this.columnFilter.overlay.contains(event.target));
+        return !(isInsideCdkOverlay(event) || this.columnFilter.overlay.isSameNode(event.target) || this.columnFilter.overlay.contains(event.target));
     }
     hide() {
         this.columnFilter.hide();
@@ -18038,7 +18101,7 @@ class SmzColumnFilterComponent {
         this.unbindDocumentClickListener();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzColumnFilterComponent, isStandalone: false, selector: "smz-column-filter", inputs: { currency: "currency", display: "display", field: "field", matchMode: "matchMode", showAddButton: "showAddButton", showMatchModes: "showMatchModes", showOperator: "showOperator", type: "type", showTime: "showTime" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "columnFilter", first: true, predicate: ColumnFilter, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzColumnFilterComponent, isStandalone: false, selector: "smz-column-filter", inputs: { currency: "currency", display: "display", field: "field", matchMode: "matchMode", showAddButton: "showAddButton", showMatchModes: "showMatchModes", showOperator: "showOperator", showApplyButton: "showApplyButton", type: "type", showTime: "showTime" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "columnFilter", first: true, predicate: ColumnFilter, descendants: true }], ngImport: i0, template: `
   <div (click)="bindDocumentClickListener()">
     <p-columnFilter
       [currency]="currency"
@@ -18048,6 +18111,7 @@ class SmzColumnFilterComponent {
       [showAddButton]="showAddButton"
       [showMatchModes]="showMatchModes"
       [showOperator]="showOperator"
+      [showApplyButton]="showApplyButton"
       [type]="type">
       <!-- TODO: [showTime]="showTime" -->
 
@@ -18080,6 +18144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       [showAddButton]="showAddButton"
       [showMatchModes]="showMatchModes"
       [showOperator]="showOperator"
+      [showApplyButton]="showApplyButton"
       [type]="type">
       <!-- TODO: [showTime]="showTime" -->
 
@@ -18119,6 +18184,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }], showOperator: [{
                 type: Input
+            }], showApplyButton: [{
+                type: Input
             }], type: [{
                 type: Input
             }], showTime: [{
@@ -22492,7 +22559,7 @@ 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"] }, { 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", "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", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTableComponent, decorators: [{
             type: Component,
@@ -22615,7 +22682,7 @@ class SmzColumnFilter2Component {
     }
     isOutsideClicked(event) {
         const overlay = this['overlay'];
-        const result = !(overlay.isSameNode(event.target) || overlay.contains(event.target));
+        const result = !(isInsideCdkOverlay(event) || overlay.isSameNode(event.target) || overlay.contains(event.target));
         if (result) {
             setTimeout(() => {
                 this['cdf'].markForCheck();
@@ -35501,7 +35568,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"], outputs: ["valueChange"] }, { 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\">\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" }] });
 }
 __decorate([
     Confirmable('Confirma a criação desta pergunta/resposta ?', 'Aviso')
@@ -38930,7 +38997,6 @@ class HephaestusMenuExpandableItemComponent {
           <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
           <span class="layout-menuitem-text">{{ item.label }}</span>
           <i class="fa-solid fa-fw fa-chevron-down layout-submenu-toggler"></i>
-          <span class="p-ink"></span>
         </a>
 
         @for (subItem of item.items | isVisible; track subItem; let subItemIndex = $index) {
@@ -38960,7 +39026,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
           <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
           <span class="layout-menuitem-text">{{ item.label }}</span>
           <i class="fa-solid fa-fw fa-chevron-down layout-submenu-toggler"></i>
-          <span class="p-ink"></span>
         </a>
 
         @for (subItem of item.items | isVisible; track subItem; let subItemIndex = $index) {
@@ -38997,10 +39062,9 @@ class HephaestusMenuItemComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HephaestusMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HephaestusMenuItemComponent, isStandalone: false, selector: "smz-ui-hephaestus-menu-item", inputs: { item: "item", parent: "parent", index: "index", currentUrl: "currentUrl" }, ngImport: i0, template: `
       <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : item.routerLink }">
-        <a class="p-ripple" [ngClass]="{ 'active-route': currentUrl | urlChecker : item.routerLink, 'opacity-50 hover:bg-inherit select-none focus:shadow-none cursor-default': item.disabled }" menuItemAction [item]="item" [parent]="parent" [breadcrumbs]="true" [tabindex]="index">
+        <a smzRipple [ngClass]="{ 'active-route': currentUrl | urlChecker : item.routerLink, 'opacity-50 hover:bg-inherit select-none focus:shadow-none cursor-default': item.disabled }" menuItemAction [item]="item" [parent]="parent" [breadcrumbs]="true" [tabindex]="index">
           <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
           <span class="layout-menuitem-text">{{ item.label }}</span>
-          <span class="p-ink"></span>
         </a>
 
         @for (subItem of item.items | isVisible; track subItem) {
@@ -39008,7 +39072,7 @@ class HephaestusMenuItemComponent {
         }
 
       </li>
-      `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => MenuItemActionsDirective), selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: i0.forwardRef(() => HephaestusMenuNodeComponent), selector: "smz-ui-hephaestus-menu-node", inputs: ["item", "index", "currentUrl"] }, { kind: "pipe", type: i0.forwardRef(() => IsVisiblePipe), name: "isVisible" }, { kind: "pipe", type: i0.forwardRef(() => UrlCheckerPipe), name: "urlChecker" }] });
+      `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.SmzRippleDirective), selector: "[smzRipple]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => MenuItemActionsDirective), selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: i0.forwardRef(() => HephaestusMenuNodeComponent), selector: "smz-ui-hephaestus-menu-node", inputs: ["item", "index", "currentUrl"] }, { kind: "pipe", type: i0.forwardRef(() => IsVisiblePipe), name: "isVisible" }, { kind: "pipe", type: i0.forwardRef(() => UrlCheckerPipe), name: "urlChecker" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HephaestusMenuItemComponent, decorators: [{
             type: Component,
@@ -39016,10 +39080,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'smz-ui-hephaestus-menu-item',
                     template: `
       <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : item.routerLink }">
-        <a class="p-ripple" [ngClass]="{ 'active-route': currentUrl | urlChecker : item.routerLink, 'opacity-50 hover:bg-inherit select-none focus:shadow-none cursor-default': item.disabled }" menuItemAction [item]="item" [parent]="parent" [breadcrumbs]="true" [tabindex]="index">
+        <a smzRipple [ngClass]="{ 'active-route': currentUrl | urlChecker : item.routerLink, 'opacity-50 hover:bg-inherit select-none focus:shadow-none cursor-default': item.disabled }" menuItemAction [item]="item" [parent]="parent" [breadcrumbs]="true" [tabindex]="index">
           <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
           <span class="layout-menuitem-text">{{ item.label }}</span>
-          <span class="p-ink"></span>
         </a>
 
         @for (subItem of item.items | isVisible; track subItem) {
@@ -39105,7 +39168,7 @@ class HephaestusMenuSlimNodeComponent {
       @switch (subItem | hasChild) {
         @case (false) {
           <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : subItem.routerLink }">
-            <a class="p-ripple" [tabindex]="subItemIndex" menuItemAction [item]="subItem" [parent]="parent" [breadcrumbs]="true">
+            <a smzRipple [tabindex]="subItemIndex" menuItemAction [item]="subItem" [parent]="parent" [breadcrumbs]="true">
               @if (subItem.icon != null) {
                 <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
               }
@@ -39113,7 +39176,6 @@ class HephaestusMenuSlimNodeComponent {
                 <i class="layout-menuitem-icon fa-solid fa-fw"></i>
               }
               <span class="layout-menuitem-text">{{ subItem.label }}</span>
-              <span class="p-ink"></span>
             </a>
           </li>
         }
@@ -39122,7 +39184,7 @@ class HephaestusMenuSlimNodeComponent {
         }
       }
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: HephaestusMenuExpandableItemComponent, selector: "smz-ui-hephaestus-menu-expandable-item", inputs: ["item", "index", "currentUrl"] }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe$4, name: "hasChild" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.SmzRippleDirective, selector: "[smzRipple]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: HephaestusMenuExpandableItemComponent, selector: "smz-ui-hephaestus-menu-expandable-item", inputs: ["item", "index", "currentUrl"] }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe$4, name: "hasChild" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HephaestusMenuSlimNodeComponent, decorators: [{
             type: Component,
@@ -39133,7 +39195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       @switch (subItem | hasChild) {
         @case (false) {
           <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : subItem.routerLink }">
-            <a class="p-ripple" [tabindex]="subItemIndex" menuItemAction [item]="subItem" [parent]="parent" [breadcrumbs]="true">
+            <a smzRipple [tabindex]="subItemIndex" menuItemAction [item]="subItem" [parent]="parent" [breadcrumbs]="true">
               @if (subItem.icon != null) {
                 <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
               }
@@ -39141,7 +39203,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 <i class="layout-menuitem-icon fa-solid fa-fw"></i>
               }
               <span class="layout-menuitem-text">{{ subItem.label }}</span>
-              <span class="p-ink"></span>
             </a>
           </li>
         }
@@ -39204,11 +39265,11 @@ class HephaestusSidebarComponent {
         return `/${currentPath}` == routerUrl;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HephaestusSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HephaestusSidebarComponent, isStandalone: false, selector: "smz-ui-hephaestus-sidebar", inputs: { menu: "menu" }, host: { classAttribute: "z-30" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: "@if (layout$ | async; as layout) {\r\n  @if (appName$ | async; as appName) {\r\n    @if ((currentRoute$ | async); as route) {\r\n      <div class=\"layout-sidebar\" (mouseleave)=\"collapseAll(menu)\">\r\n        @if ((appLayoutLogo$ | async); as appLayoutLogo) {\r\n          <!-- LOGO EM FORMATO DE ICONE -->\r\n          @if (layout.menu === menuType.SLIM) {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.icon\" class=\"m-2 slim-mobile-logo\">\r\n              <span class=\"app-name\">{{ appName }}</span>\r\n            </a>\r\n          } @else {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.horizontal\" class=\"pl-4 pr-4\" width=\"100%\">\r\n            </a>\r\n          }\r\n          <!-- LOGO COMPLETA -->\r\n        }\r\n        <!-- INICIO DO MENU -->\r\n        <div class=\"layout-menu-container\">\r\n          <!-- N\u00CDVEL 1 -->\r\n          @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n            @if (layout.menu === menuType.SLIM) {\r\n              <ul class=\"layout-menu bg-black bg-opacity-20 rounded-md mb-5\">\r\n                @if (item.items == null || item.items.length == 0) {\r\n                  <!-- ACTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  </li>\r\n                }\r\n                @if (item.items?.length > 0) {\r\n                  <!-- CAPTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a [tabindex]=\"itemIndex\" class=\"select-none hover:bg-inherit hover:shadow-none cursor-default\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words uppercase font-bold\">{{ item.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"menu-separator m-0\"></li>\r\n                }\r\n                @for (subItem of item.items | isVisible; track subItem; let lastSubItem = $last; let subItemIndex = $index) {\r\n                  <!-- ACTION GROUP -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : subItem.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text normal-case\">{{ subItem.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"subItemIndex\" menuItemAction [item]=\"subItem\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : subItem.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"subItem.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words\">{{ subItem.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          }\r\n          @if (layout.menu !== menuType.SLIM) {\r\n            <ul class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                  <!-- CABE\u00C7ALHO DO N\u00CDVEL 1 -->\r\n                  @if (!$any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text cursor-default bg-black bg-opacity-20\">{{ item.label }}</div>\r\n                  }\r\n                  <!-- ITENS PARA O MENU COLAPSADO -->\r\n                  @if (item.command == null && item.routerLink == null && !$any(item).showAsCaption) {\r\n                    <a class=\"p-ripple\" [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\" (mouseover)=\"toogleOnly(item, menu)\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <a class=\"cursor-default bg-black bg-opacity-20\" [tabindex]=\"itemIndex\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  }\r\n                  @if (item.command != null || item.routerLink != null && !$any(item).showAsCaption) {\r\n                    <a class=\"p-ripple\" [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  }\r\n                  @if (item.expanded) {\r\n                    <ul smz-ui-hephaestus-menu-slim-node [item]=\"item\" [parent]=\"null\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\"></ul>\r\n                  }\r\n                  <smz-ui-hephaestus-menu-node [item]=\"item\" [currentUrl]=\"route.url\"></smz-ui-hephaestus-menu-node>\r\n                </li>\r\n                @if (!last && !($any(item).hideSeparator)) {\r\n                  <li class=\"menu-separator\"></li>\r\n                }\r\n              }\r\n            </ul>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}", styles: [".active-first-route{background-color:#ffffff1a}.slim-mobile-logo{max-width:2.5rem;max-height:2.5rem;margin-left:auto!important;margin-right:auto!important}\n"], 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: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: HephaestusMenuNodeComponent, selector: "smz-ui-hephaestus-menu-node", inputs: ["item", "index", "currentUrl"] }, { kind: "component", type: HephaestusMenuSlimNodeComponent, selector: "[smz-ui-hephaestus-menu-slim-node]", inputs: ["item", "parent", "index", "currentUrl"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HephaestusSidebarComponent, isStandalone: false, selector: "smz-ui-hephaestus-sidebar", inputs: { menu: "menu" }, host: { classAttribute: "z-30" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], ngImport: i0, template: "@if (layout$ | async; as layout) {\r\n  @if (appName$ | async; as appName) {\r\n    @if ((currentRoute$ | async); as route) {\r\n      <div class=\"layout-sidebar\" (mouseleave)=\"collapseAll(menu)\">\r\n        @if ((appLayoutLogo$ | async); as appLayoutLogo) {\r\n          <!-- LOGO EM FORMATO DE ICONE -->\r\n          @if (layout.menu === menuType.SLIM) {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.icon\" class=\"m-2 slim-mobile-logo\">\r\n              <span class=\"app-name\">{{ appName }}</span>\r\n            </a>\r\n          } @else {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.horizontal\" class=\"pl-4 pr-4\" width=\"100%\">\r\n            </a>\r\n          }\r\n          <!-- LOGO COMPLETA -->\r\n        }\r\n        <!-- INICIO DO MENU -->\r\n        <div class=\"layout-menu-container\">\r\n          <!-- N\u00CDVEL 1 -->\r\n          @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n            @if (layout.menu === menuType.SLIM) {\r\n              <ul class=\"layout-menu bg-black bg-opacity-20 rounded-md mb-5\">\r\n                @if (item.items == null || item.items.length == 0) {\r\n                  <!-- ACTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  </li>\r\n                }\r\n                @if (item.items?.length > 0) {\r\n                  <!-- CAPTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a [tabindex]=\"itemIndex\" class=\"select-none hover:bg-inherit hover:shadow-none cursor-default\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words uppercase font-bold\">{{ item.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"menu-separator m-0\"></li>\r\n                }\r\n                @for (subItem of item.items | isVisible; track subItem; let lastSubItem = $last; let subItemIndex = $index) {\r\n                  <!-- ACTION GROUP -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : subItem.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text normal-case\">{{ subItem.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"subItemIndex\" menuItemAction [item]=\"subItem\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : subItem.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"subItem.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words\">{{ subItem.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          }\r\n          @if (layout.menu !== menuType.SLIM) {\r\n            <ul class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                  <!-- CABE\u00C7ALHO DO N\u00CDVEL 1 -->\r\n                  @if (!$any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text cursor-default bg-black bg-opacity-20\">{{ item.label }}</div>\r\n                  }\r\n                  <!-- ITENS PARA O MENU COLAPSADO -->\r\n                  @if (item.command == null && item.routerLink == null && !$any(item).showAsCaption) {\r\n                    <a smzRipple [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\" (mouseover)=\"toogleOnly(item, menu)\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <a class=\"cursor-default bg-black bg-opacity-20\" [tabindex]=\"itemIndex\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  }\r\n                  @if (item.command != null || item.routerLink != null && !$any(item).showAsCaption) {\r\n                    <a smzRipple [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  }\r\n                  @if (item.expanded) {\r\n                    <ul smz-ui-hephaestus-menu-slim-node [item]=\"item\" [parent]=\"null\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\"></ul>\r\n                  }\r\n                  <smz-ui-hephaestus-menu-node [item]=\"item\" [currentUrl]=\"route.url\"></smz-ui-hephaestus-menu-node>\r\n                </li>\r\n                @if (!last && !($any(item).hideSeparator)) {\r\n                  <li class=\"menu-separator\"></li>\r\n                }\r\n              }\r\n            </ul>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}", styles: [".active-first-route{background-color:#ffffff1a}.slim-mobile-logo{max-width:2.5rem;max-height:2.5rem;margin-left:auto!important;margin-right:auto!important}\n"], dependencies: [{ kind: "directive", type: i2.SmzRippleDirective, selector: "[smzRipple]" }, { 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: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: HephaestusMenuNodeComponent, selector: "smz-ui-hephaestus-menu-node", inputs: ["item", "index", "currentUrl"] }, { kind: "component", type: HephaestusMenuSlimNodeComponent, selector: "[smz-ui-hephaestus-menu-slim-node]", inputs: ["item", "parent", "index", "currentUrl"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HephaestusSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-hephaestus-sidebar', host: { 'class': 'z-30' }, standalone: false, template: "@if (layout$ | async; as layout) {\r\n  @if (appName$ | async; as appName) {\r\n    @if ((currentRoute$ | async); as route) {\r\n      <div class=\"layout-sidebar\" (mouseleave)=\"collapseAll(menu)\">\r\n        @if ((appLayoutLogo$ | async); as appLayoutLogo) {\r\n          <!-- LOGO EM FORMATO DE ICONE -->\r\n          @if (layout.menu === menuType.SLIM) {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.icon\" class=\"m-2 slim-mobile-logo\">\r\n              <span class=\"app-name\">{{ appName }}</span>\r\n            </a>\r\n          } @else {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.horizontal\" class=\"pl-4 pr-4\" width=\"100%\">\r\n            </a>\r\n          }\r\n          <!-- LOGO COMPLETA -->\r\n        }\r\n        <!-- INICIO DO MENU -->\r\n        <div class=\"layout-menu-container\">\r\n          <!-- N\u00CDVEL 1 -->\r\n          @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n            @if (layout.menu === menuType.SLIM) {\r\n              <ul class=\"layout-menu bg-black bg-opacity-20 rounded-md mb-5\">\r\n                @if (item.items == null || item.items.length == 0) {\r\n                  <!-- ACTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  </li>\r\n                }\r\n                @if (item.items?.length > 0) {\r\n                  <!-- CAPTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a [tabindex]=\"itemIndex\" class=\"select-none hover:bg-inherit hover:shadow-none cursor-default\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words uppercase font-bold\">{{ item.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"menu-separator m-0\"></li>\r\n                }\r\n                @for (subItem of item.items | isVisible; track subItem; let lastSubItem = $last; let subItemIndex = $index) {\r\n                  <!-- ACTION GROUP -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : subItem.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text normal-case\">{{ subItem.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"subItemIndex\" menuItemAction [item]=\"subItem\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : subItem.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"subItem.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words\">{{ subItem.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          }\r\n          @if (layout.menu !== menuType.SLIM) {\r\n            <ul class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                  <!-- CABE\u00C7ALHO DO N\u00CDVEL 1 -->\r\n                  @if (!$any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text cursor-default bg-black bg-opacity-20\">{{ item.label }}</div>\r\n                  }\r\n                  <!-- ITENS PARA O MENU COLAPSADO -->\r\n                  @if (item.command == null && item.routerLink == null && !$any(item).showAsCaption) {\r\n                    <a class=\"p-ripple\" [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\" (mouseover)=\"toogleOnly(item, menu)\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <a class=\"cursor-default bg-black bg-opacity-20\" [tabindex]=\"itemIndex\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  }\r\n                  @if (item.command != null || item.routerLink != null && !$any(item).showAsCaption) {\r\n                    <a class=\"p-ripple\" [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                      <span class=\"p-ink\"></span>\r\n                    </a>\r\n                  }\r\n                  @if (item.expanded) {\r\n                    <ul smz-ui-hephaestus-menu-slim-node [item]=\"item\" [parent]=\"null\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\"></ul>\r\n                  }\r\n                  <smz-ui-hephaestus-menu-node [item]=\"item\" [currentUrl]=\"route.url\"></smz-ui-hephaestus-menu-node>\r\n                </li>\r\n                @if (!last && !($any(item).hideSeparator)) {\r\n                  <li class=\"menu-separator\"></li>\r\n                }\r\n              }\r\n            </ul>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}", styles: [".active-first-route{background-color:#ffffff1a}.slim-mobile-logo{max-width:2.5rem;max-height:2.5rem;margin-left:auto!important;margin-right:auto!important}\n"] }]
+            args: [{ selector: 'smz-ui-hephaestus-sidebar', host: { 'class': 'z-30' }, standalone: false, template: "@if (layout$ | async; as layout) {\r\n  @if (appName$ | async; as appName) {\r\n    @if ((currentRoute$ | async); as route) {\r\n      <div class=\"layout-sidebar\" (mouseleave)=\"collapseAll(menu)\">\r\n        @if ((appLayoutLogo$ | async); as appLayoutLogo) {\r\n          <!-- LOGO EM FORMATO DE ICONE -->\r\n          @if (layout.menu === menuType.SLIM) {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.icon\" class=\"m-2 slim-mobile-logo\">\r\n              <span class=\"app-name\">{{ appName }}</span>\r\n            </a>\r\n          } @else {\r\n            <a class=\"logo\" [routerLink]=\"uiConfig.rbkUtils.authentication.authenticatedRoot\">\r\n              <img id=\"app-logo\" [src]=\"appLayoutLogo.horizontal\" class=\"pl-4 pr-4\" width=\"100%\">\r\n            </a>\r\n          }\r\n          <!-- LOGO COMPLETA -->\r\n        }\r\n        <!-- INICIO DO MENU -->\r\n        <div class=\"layout-menu-container\">\r\n          <!-- N\u00CDVEL 1 -->\r\n          @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n            @if (layout.menu === menuType.SLIM) {\r\n              <ul class=\"layout-menu bg-black bg-opacity-20 rounded-md mb-5\">\r\n                @if (item.items == null || item.items.length == 0) {\r\n                  <!-- ACTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  </li>\r\n                }\r\n                @if (item.items?.length > 0) {\r\n                  <!-- CAPTION -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text pl-4 pt-4\">{{ item.label }}</div>\r\n                    <a [tabindex]=\"itemIndex\" class=\"select-none hover:bg-inherit hover:shadow-none cursor-default\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words uppercase font-bold\">{{ item.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"menu-separator m-0\"></li>\r\n                }\r\n                @for (subItem of item.items | isVisible; track subItem; let lastSubItem = $last; let subItemIndex = $index) {\r\n                  <!-- ACTION GROUP -->\r\n                  <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : subItem.expanded }\">\r\n                    <div class=\"layout-menuitem-root-text normal-case\">{{ subItem.label }}</div>\r\n                    <a class=\"hover:shadow-none\" [tabindex]=\"subItemIndex\" menuItemAction [item]=\"subItem\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : subItem.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"subItem.icon\"></i>\r\n                      <span class=\"layout-menuitem-text break-words\">{{ subItem.label }}</span>\r\n                    </a>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          }\r\n          @if (layout.menu !== menuType.SLIM) {\r\n            <ul class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                  <!-- CABE\u00C7ALHO DO N\u00CDVEL 1 -->\r\n                  @if (!$any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <div class=\"layout-menuitem-root-text cursor-default bg-black bg-opacity-20\">{{ item.label }}</div>\r\n                  }\r\n                  <!-- ITENS PARA O MENU COLAPSADO -->\r\n                  @if (item.command == null && item.routerLink == null && !$any(item).showAsCaption) {\r\n                    <a smzRipple [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\" (mouseover)=\"toogleOnly(item, menu)\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  }\r\n                  @if ($any(item).showAsCaption) {\r\n                    <a class=\"cursor-default bg-black bg-opacity-20\" [tabindex]=\"itemIndex\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  }\r\n                  @if (item.command != null || item.routerLink != null && !$any(item).showAsCaption) {\r\n                    <a smzRipple [tabindex]=\"itemIndex\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                      <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                      <span class=\"layout-menuitem-text\">{{ item.label }}</span>\r\n                      <i class=\"fa-solid fa-fw fa-chevron-down layout-submenu-toggler\"></i>\r\n                    </a>\r\n                  }\r\n                  @if (item.expanded) {\r\n                    <ul smz-ui-hephaestus-menu-slim-node [item]=\"item\" [parent]=\"null\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\"></ul>\r\n                  }\r\n                  <smz-ui-hephaestus-menu-node [item]=\"item\" [currentUrl]=\"route.url\"></smz-ui-hephaestus-menu-node>\r\n                </li>\r\n                @if (!last && !($any(item).hideSeparator)) {\r\n                  <li class=\"menu-separator\"></li>\r\n                }\r\n              }\r\n            </ul>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}", styles: [".active-first-route{background-color:#ffffff1a}.slim-mobile-logo{max-width:2.5rem;max-height:2.5rem;margin-left:auto!important;margin-right:auto!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [SmzTemplateDirective]
@@ -39827,7 +39888,8 @@ class SmzDiamontSidebarModule {
             HephaestusMenuExpandableItemComponent,
             HephaestusMenuNodeComponent,
             HephaestusMenuSlimNodeComponent,
-            HasChildPipe$4], imports: [CommonModule,
+            HasChildPipe$4], imports: [SmzRippleDirective,
+            CommonModule,
             RouterModule,
             SmzDrawerComponent,
             MenuItemActionsModule,
@@ -39852,6 +39914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         HasChildPipe$4,
                     ],
                     imports: [
+                        SmzRippleDirective,
                         CommonModule,
                         RouterModule,
                         SmzDrawerComponent,
@@ -41512,24 +41575,22 @@ class AthenaHorizontalMenuNodeComponent {
         @switch (subItem | hasChild) {
           @case (false) {
             <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : subItem.routerLink }">
-              <a class="p-ripple" menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
+              <a smzRipple menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
-                <span class="p-ink"></span>
               </a>
             </li>
           }
           @case (true) {
             <li [ngClass]="{ 'active-menuitem' : subItem.expanded }">
-              <a class="p-ripple" [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
+              <a smzRipple [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
                 <i class="fa-solid fa-fw fa-angle-down layout-menuitem-toggler"></i>
-                <span class="p-ink"></span>
               </a>
               @if (subItem.expanded) {
                 <ul smz-ui-athena-horizontal-menu-node [item]="subItem" [currentUrl]="currentUrl" (collapse)="collapse.emit()"
@@ -41539,7 +41600,7 @@ class AthenaHorizontalMenuNodeComponent {
           }
         }
       }
-      `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: AthenaHorizontalMenuNodeComponent, selector: "[smz-ui-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe$2, name: "hasChild" }] });
+      `, isInline: true, dependencies: [{ kind: "directive", type: i2.SmzRippleDirective, selector: "[smzRipple]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: AthenaHorizontalMenuNodeComponent, selector: "[smz-ui-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe$2, name: "hasChild" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AthenaHorizontalMenuNodeComponent, decorators: [{
             type: Component,
@@ -41550,24 +41611,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         @switch (subItem | hasChild) {
           @case (false) {
             <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : subItem.routerLink }">
-              <a class="p-ripple" menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
+              <a smzRipple menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
-                <span class="p-ink"></span>
               </a>
             </li>
           }
           @case (true) {
             <li [ngClass]="{ 'active-menuitem' : subItem.expanded }">
-              <a class="p-ripple" [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
+              <a smzRipple [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
                 <i class="fa-solid fa-fw fa-angle-down layout-menuitem-toggler"></i>
-                <span class="p-ink"></span>
               </a>
               @if (subItem.expanded) {
                 <ul smz-ui-athena-horizontal-menu-node [item]="subItem" [currentUrl]="currentUrl" (collapse)="collapse.emit()"
@@ -41647,11 +41706,11 @@ class AthenaHorizontalMenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AthenaHorizontalMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AthenaHorizontalMenuComponent, isStandalone: false, selector: "smz-ui-athena-horizontal-menu", inputs: { menu: "menu" }, host: { listeners: { "document:click": "collapseFromOutside($event)" } }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                      <ul smz-ui-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color-menu-active)!important;color:var(--primary-color-menu-active)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: AthenaHorizontalMenuNodeComponent, selector: "[smz-ui-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe$2, name: "hasChild" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AthenaHorizontalMenuComponent, isStandalone: false, selector: "smz-ui-athena-horizontal-menu", inputs: { menu: "menu" }, host: { listeners: { "document:click": "collapseFromOutside($event)" } }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a smzRipple menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a smzRipple [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                      </a>\r\n                      <ul smz-ui-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color-menu-active)!important;color:var(--primary-color-menu-active)!important}\n"], dependencies: [{ kind: "directive", type: i2.SmzRippleDirective, selector: "[smzRipple]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: AthenaHorizontalMenuNodeComponent, selector: "[smz-ui-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe$2, name: "hasChild" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AthenaHorizontalMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-athena-horizontal-menu', host: { '(document:click)': 'collapseFromOutside($event)' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                      <ul smz-ui-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color-menu-active)!important;color:var(--primary-color-menu-active)!important}\n"] }]
+            args: [{ selector: 'smz-ui-athena-horizontal-menu', host: { '(document:click)': 'collapseFromOutside($event)' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a smzRipple menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a smzRipple [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                      </a>\r\n                      <ul smz-ui-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color-menu-active)!important;color:var(--primary-color-menu-active)!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [SmzTemplateDirective]
@@ -42006,7 +42065,8 @@ let SmzAthenaHorizontalMenuModule$1 = class SmzAthenaHorizontalMenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAthenaHorizontalMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SmzAthenaHorizontalMenuModule, declarations: [AthenaHorizontalMenuComponent,
             AthenaHorizontalMenuNodeComponent,
-            HasChildPipe$2], imports: [CommonModule,
+            HasChildPipe$2], imports: [SmzRippleDirective,
+            CommonModule,
             RouterModule,
             SmzDrawerComponent,
             MenuItemActionsModule,
@@ -42028,6 +42088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         HasChildPipe$2
                     ],
                     imports: [
+                        SmzRippleDirective,
                         CommonModule,
                         RouterModule,
                         SmzDrawerComponent,
@@ -43064,24 +43125,22 @@ class NewAthenaHorizontalMenuNodeComponent {
         @switch (subItem | hasChild) {
           @case (false) {
             <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : subItem.routerLink }">
-              <a class="p-ripple" menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
+              <a smzRipple menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
-                <span class="p-ink"></span>
               </a>
             </li>
           }
           @case (true) {
             <li [ngClass]="{ 'active-menuitem' : subItem.expanded }">
-              <a class="p-ripple" [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
+              <a smzRipple [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
                 <i class="fa-solid fa-fw fa-angle-down layout-menuitem-toggler"></i>
-                <span class="p-ink"></span>
               </a>
               @if (subItem.expanded) {
                 <ul smz-ui-new-athena-horizontal-menu-node [item]="subItem" [currentUrl]="currentUrl" (collapse)="collapse.emit()"
@@ -43091,7 +43150,7 @@ class NewAthenaHorizontalMenuNodeComponent {
           }
         }
       }
-      `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: NewAthenaHorizontalMenuNodeComponent, selector: "[smz-ui-new-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe, name: "hasChild" }] });
+      `, isInline: true, dependencies: [{ kind: "directive", type: i2.SmzRippleDirective, selector: "[smzRipple]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: NewAthenaHorizontalMenuNodeComponent, selector: "[smz-ui-new-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe, name: "hasChild" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NewAthenaHorizontalMenuNodeComponent, decorators: [{
             type: Component,
@@ -43102,24 +43161,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         @switch (subItem | hasChild) {
           @case (false) {
             <li [ngClass]="{ 'active-menuitem': currentUrl | urlChecker : subItem.routerLink }">
-              <a class="p-ripple" menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
+              <a smzRipple menuItemAction [item]="subItem" [parent]="item" [breadcrumbs]="true" [tabindex]="subItemIndex" (collapse)="collapse.emit()">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
-                <span class="p-ink"></span>
               </a>
             </li>
           }
           @case (true) {
             <li [ngClass]="{ 'active-menuitem' : subItem.expanded }">
-              <a class="p-ripple" [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
+              <a smzRipple [tabindex]="subItemIndex" (click)="toogleOnly(subItem, subItem.items)">
                 @if (subItem.icon) {
                   <i class="layout-menuitem-icon" [ngClass]="subItem.icon"></i>
                 }
                 <span>{{ subItem.label }}</span>
                 <i class="fa-solid fa-fw fa-angle-down layout-menuitem-toggler"></i>
-                <span class="p-ink"></span>
               </a>
               @if (subItem.expanded) {
                 <ul smz-ui-new-athena-horizontal-menu-node [item]="subItem" [currentUrl]="currentUrl" (collapse)="collapse.emit()"
@@ -43200,11 +43257,11 @@ class NewAthenaHorizontalMenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NewAthenaHorizontalMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NewAthenaHorizontalMenuComponent, isStandalone: false, selector: "smz-ui-new-athena-horizontal-menu", inputs: { menu: "menu" }, host: { listeners: { "document:click": "collapseFromOutside($event)" } }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                      <ul smz-ui-new-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-new-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color)!important;color:var(--primary-color)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: NewAthenaHorizontalMenuNodeComponent, selector: "[smz-ui-new-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe, name: "hasChild" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NewAthenaHorizontalMenuComponent, isStandalone: false, selector: "smz-ui-new-athena-horizontal-menu", inputs: { menu: "menu" }, host: { listeners: { "document:click": "collapseFromOutside($event)" } }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a smzRipple menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a smzRipple [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                      </a>\r\n                      <ul smz-ui-new-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-new-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color)!important;color:var(--primary-color)!important}\n"], dependencies: [{ kind: "directive", type: i2.SmzRippleDirective, selector: "[smzRipple]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MenuItemActionsDirective, selector: "[menuItemAction]", inputs: ["item", "parent", "breadcrumbs"], outputs: ["collapse"] }, { kind: "component", type: NewAthenaHorizontalMenuNodeComponent, selector: "[smz-ui-new-athena-horizontal-menu-node]", inputs: ["item", "index", "currentUrl"], outputs: ["collapse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: IsVisiblePipe, name: "isVisible" }, { kind: "pipe", type: UrlCheckerPipe, name: "urlChecker" }, { kind: "pipe", type: HasChildPipe, name: "hasChild" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NewAthenaHorizontalMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-ui-new-athena-horizontal-menu', host: { '(document:click)': 'collapseFromOutside($event)' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a class=\"p-ripple\" [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                        <span class=\"p-ink\"></span>\r\n                      </a>\r\n                      <ul smz-ui-new-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-new-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color)!important;color:var(--primary-color)!important}\n"] }]
+            args: [{ selector: 'smz-ui-new-athena-horizontal-menu', host: { '(document:click)': 'collapseFromOutside($event)' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (menu != null) {\r\n  @if (layout$ | async; as layout) {\r\n    @if (appName$ | async; as appName) {\r\n      @if ((currentRoute$ | async); as route) {\r\n        <div class=\"layout-menu-container\">\r\n          <div class=\"layout-menu-content\">\r\n            <ul id=\"menu-ul\" class=\"layout-menu\">\r\n              <!-- N\u00CDVEL 1 -->\r\n              @for (item of menu | isVisible; track item; let last = $last; let itemIndex = $index) {\r\n                @switch (item | hasChild) {\r\n                  @case (false) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text clickable\" menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\">{{ item.label }}</div>\r\n                      <a smzRipple menuItemAction [item]=\"item\" [parent]=\"null\" [breadcrumbs]=\"true\" (collapse)=\"collapseAll(menu)\" [tabindex]=\"itemIndex\" [ngClass]=\"{ 'active-first-route': route.url | urlChecker : item.routerLink }\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                      </a>\r\n                    </li>\r\n                  }\r\n                  @case (true) {\r\n                    <li class=\"layout-root-menuitem\" [ngClass]=\"{ 'active-menuitem' : item.expanded }\">\r\n                      <div class=\"layout-menuitem-root-text\">{{ item.label }}</div>\r\n                      <a smzRipple [tabindex]=\"itemIndex\" (click)=\"toogleOnly(item, menu)\">\r\n                        @if (item.icon) {\r\n                          <i class=\"layout-menuitem-icon\" [ngClass]=\"item.icon\"></i>\r\n                        }\r\n                        <span>{{ item.label }}</span>\r\n                        <i class=\"fa-solid fa-fw fa-angle-down layout-menuitem-toggler\"></i>\r\n                      </a>\r\n                      <ul smz-ui-new-athena-horizontal-menu-node [item]=\"item\" [currentUrl]=\"route.url\" role=\"menu\" style=\"z-index: 100;\" (collapse)=\"collapseAll(menu)\"></ul>\r\n                    </li>\r\n                  }\r\n                }\r\n              }\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", styles: ["smz-ui-new-athena-horizontal-menu .active-first-route{border-bottom-color:var(--primary-color)!important;color:var(--primary-color)!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [SmzTemplateDirective]
@@ -43463,7 +43520,8 @@ class SmzAthenaHorizontalMenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAthenaHorizontalMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SmzAthenaHorizontalMenuModule, declarations: [NewAthenaHorizontalMenuComponent,
             NewAthenaHorizontalMenuNodeComponent,
-            HasChildPipe], imports: [CommonModule,
+            HasChildPipe], imports: [SmzRippleDirective,
+            CommonModule,
             RouterModule,
             SmzDrawerComponent,
             MenuItemActionsModule,
@@ -43485,6 +43543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         HasChildPipe
                     ],
                     imports: [
+                        SmzRippleDirective,
                         CommonModule,
                         RouterModule,
                         SmzDrawerComponent,
@@ -46312,7 +46371,7 @@ class MentionableTextareaComponent {
         </ul>
       }
     </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid", "autoResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MentionableTextareaComponent, decorators: [{
             type: Component,
@@ -57071,5 +57130,5 @@ __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { AUTHORIZATION_HEADER, AccessControlService, ActionDispatchDirective, ApplicationActions, ApplicationSelectors, ApplicationState, AsPipe, AthenaLayout, AthenaLayoutComponent, AthenaLayoutModule, AuthClaimDefinitions, AuthHandler, AuthService, AuthenticationActions, AuthenticationSelectors, AuthenticationService, AuthenticationState, AuthorizationService, AxisOverflowDirection, AxisOverflowType, AxisPosition, BaseApiService, BoilerplateService, BreadcrumbService, CLAIMS_PAGE_ROUTE, CLAIMS_PATH, CLAIMS_STATE_NAME, CONTENT_ENCODING_HEADER, CachedRouteReuseStrategy, CalendarComponent, CalendarPipe, CanAccess, ChartType, CheckBoxComponent, CheckBoxGroupComponent, ClaimAccessType, ClaimAccessTypeDescription, ClaimAccessTypeValues, ClaimsActions, ClaimsModule, ClaimsSelectors, ClaimsState, ClickStopPropagationDirective, ClickStopPropagationModule, ClonePipe, ColorPallete, ColorPickerComponent, Confirmable, CreateLinearChart, CreateRadialChart, CustomError, CustomNgForDirective, CustomNgForModule, DATABASE_REQUIRED_ACTIONS, DATABASE_STATES, DECORATOR_APPLIED, DEFAULT_AUTHENTICATION_ENDPOINTS_ROUTES, DEFAULT_AUTHORIZATION_ENDPOINTS_ROUTES, DatabaseActions, DatabaseSelectors, DatabaseState, DatasetType, DeepWrapper, DescribeAnyPipe, DescribeArrayPipe, DescribeSimpleNamedPipe, DialogContentManagerComponent, DialogService, DropdownComponent, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef, ERROR_HANDLING_TYPE_HEADER, ExcelsUiActions, FEATURE_STATES, FeaturesActions, FeaturesSelectors, FeaturesState, FileUploadComponent, FilterContains, FirstOrDefaultPipe, FormGroupComponent, FormSubmitComponent, GenericInjectComponentDirective, GetElementById, GetElementsByParentId, GlobalActions, GlobalFilter, GlobalInjector, GlobalLoaderComponent, GlobalLoaderModule, GlobalState, GroupingType, HephaestusLayout, HephaestusLayoutComponent, HephaestusLayoutModule, HephaestusProviderModule, HostElement, HttpErrorHandler, IGNORE_ERROR_HANDLING, InViewportMetadata, InjectComponentDirective, InjectComponentService, InjectContentAppModule, InjectContentDirective, InjectContentService, InputBlurDetectionModule, InputChangeDetectionDirective, InputClearExtensionDirective, InputCurrencyComponent, InputListComponent, InputMaskComponent, InputNumberComponent, InputPasswordComponent, InputSwitchComponent, InputTagAreaComponent, InputTextAreaComponent, InputTextComponent, InputTreeComponent, IsVisiblePipe, IsVisiblePipeModule, JoinPipe, LOADING_BEHAVIOR_HEADER, LOCAL_LOADING_TAG_HEADER, LayoutUiActions, LayoutUiSelectors, LayoutUiState, LegacyAuthenticationSelectors, LinearChartBuilder, LinkedDropdownComponent, LinkedMultiSelectComponent, LoggingScope, LoggingService, MAIN_LAYOUT_PATH, MentionableTextareaComponent, MenuHelperService, MenuType, MergeClonePipe, MergeClonePipeModule, MultiSelectComponent, NG_ON_INIT, NewAthenaLayout, NewAthenaLayoutComponent, NewAthenaLayoutModule, NewAthenaProviderModule, NgCloneDirective, NgCloneModule, NgIfLandscapeDirective, NgIfLandscapeDirectiveModule, NgIfPortraitDirective, NgIfPortraitDirectiveModule, NgVar, NgVarContext, NgVarModule, NgxRbkUtilsConfig, NgxRbkUtilsModule, NgxSmzCardsModule, NgxSmzCommentsModule, NgxSmzDataInfoModule, NgxSmzDataPipesModule, NgxSmzDialogsModule, NgxSmzDockModule, NgxSmzDocumentsModule, NgxSmzFaqsModule, NgxSmzFormsModule, NgxSmzLayoutsModule, NgxSmzMenuModule, NgxSmzMultiTablesModule, NgxSmzRouterParamsModule, NgxSmzSafeImageModule, NgxSmzServerImageModule, NgxSmzServerImageToBase64Module, NgxSmzSideContentModule, NgxSmzTablesModule, NgxSmzTreeWithDetailsModule, NgxSmzTreesModule, NgxSmzUiBlockModule, NgxSmzUiComponent, NgxSmzUiConfig, NgxSmzUiGuidesModule, NgxSmzUiModule, NgxSmzViewportModule, NotificationFolder, NotificationFolderStatus, NotificationStatus, NotificationType, NotificationTypeClass, NotificationsUiActions, NotificationsUiSelectors, PrettyJsonPipe$1 as PrettyJsonPipe, PrettyJsonPipeModule, PrimeConfigService, REFRESH_TOKEN_BEHAVIOR_HEADER, RESTORE_STATE_ON_ERROR_HEADER, ROLES_PAGE_ROUTE, ROLES_PATH, ROLES_STATE_NAME, RadialChartBuilder, RadioButtonComponent, RbkAccessControlModule, RbkAuthGuard, RbkCanAccessAnyPipe, RbkCanAccessPipe, RbkClaimGuardDirective, RbkDatabaseStateGuard, RbkFeatureStateGuard, RbkPipesModule, RbkTableFilterClearDirectivesModule, RegistrySmzUiConfiguration, RepositoryForm, RoleMode, RoleModeDescription, RoleModeValues, RoleSource, RoleSourceDescription, RoleSourceValues, RolesActions, RolesModule, RolesSelectors, RolesState, RouterParamsActions, RouterParamsSelectors, SMZ_CORE_LOGGING_CONFIG, SMZ_UI_ENVIRONMENT_CONFIG, SafeHtmlPipe$2 as SafeHtmlPipe, SafeImageDirective, SafeUrlPipe$1 as SafeUrlPipe, SelectorPipe, ServerImageDirective, ServerImageToBase64Directive, ServerPathPipe, SetTemplateClasses, SetTemplateClassesPipe, SidebarState, SimpleCalendarPipe, SmzActionDispatchModule, SmzAuthorizationDeactivatedUsersTableBuilder, SmzAuthorizationUsersTableBuilder, SmzBaseColumnBuilder, SmzBaseEditableBuilder, SmzBreakpoints, SmzBuilderUtilities, SmzCardsBuilder, SmzCardsComponent, SmzCardsContentType, SmzCardsInjectableComponentBuilder, SmzCardsTemplate, SmzCardsView, SmzChartComponent, SmzChartModule, SmzClipboardService, SmzColumnCollectionBuilder, SmzCommentsBuilder, SmzCommentsComponent, SmzCommentsSectionComponent, SmzContentTheme, SmzContentThemes, SmzContentType, SmzControlType, SmzCoreLogging, SmzCurrencyColumnBuilder, SmzCustomColumnBuilder, SmzDataInfoComponent, SmzDataTransformColumnBuilder, SmzDataTransformTreePipe, SmzDateColumnBuilder, SmzDialogBuilder, SmzDialogComponentBuilder, SmzDialogFormBuilder, SmzDialogTableBuilder, SmzDialogsConfig, SmzDialogsPresets, SmzDialogsService, SmzDockComponent, SmzDockService, SmzDocumentBaseCellBuilder, SmzDocumentBuilder, SmzDocumentComponent, SmzDocumentsService, SmzDragDropModule, SmzDraggable, SmzDropdownEditableBuilder, SmzDroppable, SmzDynamicDialogConfig, SmzEasyBaseColumnBuilder, SmzEasyColumnCollectionBuilder, SmzEasyCustomColumnBuilder, SmzEasyDataTransformColumnBuilder, SmzEasyDateColumnBuilder, SmzEasyMenuTableBuilder, SmzEasyTableBuilder, SmzEasyTableComponent, SmzEasyTableContentType, SmzEasyTableModule, SmzEasyTextColumnBuilder, SmzEditableCollectionBuilder, SmzEditableTableBuilder, SmzEditableType, SmzEnvironment, SmzExcelColorDefinitions, SmzExcelDataDefinitions, SmzExcelFontDefinitions, SmzExcelService, SmzExcelSortOrderDefinitions, SmzExcelThemeDefinitions, SmzExcelTypeDefinitions, SmzExcelsBuilder, SmzExportDialogComponent, SmzExportDialogModule, SmzExportDialogService, SmzExportableContentSource, SmzExportableContentType, SmzFaqsComponent, SmzFaqsConfig, SmzFilterType, SmzFlattenMenuPipe, SmzFlipCardContext, SmzFormBuilder, SmzFormViewdata, SmzFormsConfig, SmzFormsPresets, SmzFormsRepositoryService, SmzGaugeBuilder, SmzGaugeComponent, SmzGaugeThresholdBuilder, SmzGetDataPipe, SmzGridItemComponent, SmzHelpDialogService, SmzHtmlViewerComponent, SmzHtmlViewerModule, SmzIconColumnBuilder, SmzIconMessageComponent, SmzInfoDateComponent, SmzInfoDateModule, SmzInitialPipe, SmzInputAutocompleteTagArea, SmzInputTextModule, SmzInputTextPipe, SmzLayoutsConfig, SmzLoader, SmzLoaders, SmzLoginBuilder, SmzLoginComponent, SmzLoginModule, SmzMenuBuilder, SmzMenuComponent, SmzMenuCreationBuilder, SmzMenuCreationItemBuilder, SmzMenuItemActionsDirective, SmzMenuItemBuilder, SmzMenuItemEasyTableBuilder, SmzMenuItemTableBuilder, SmzMenuTableBuilder, SmzMessagesModule, SmzMultiTablesBuilder, SmzMultiTablesComponent, SmzNotificationsComponent, SmzNotificationsModule, SmzNumberEditableBuilder, SmzPresets, SmzProxyStore, SmzResponsiveBreakpointsDirective, SmzResponsiveBreakpointsDirectiveModule, SmzResponsiveComponent, SmzRouteDatas, SmzRouteParams, SmzRouteQueryParams, SmzSideContentComponent, SmzSideContentDefault, SmzSincronizeTablePipe, SmzSmartTag, SmzSmartTagModule, SmzSubmitComponent, SmzSvgBuilder, SmzSvgComponent, SmzSvgFeatureBuilder, SmzSvgModule, SmzSvgPinBuilder, SmzSvgRootBuilder, SmzSvgWorldCoordinates, SmzSwitchEditableBuilder, SmzTableBuilder, SmzTableComponent, SmzTablesConfig, SmzTagMessage, SmzTailPipe, SmzTemplatesPipeModule, SmzTenantSwitchComponent, SmzTextColumnBuilder, SmzTextEditableBuilder, SmzTextPattern, SmzTimelineBuilder, SmzTimelineComponent, SmzToastComponent, SmzTooltipTouchSupportModule, SmzTreeBuilder, SmzTreeComponent, SmzTreeDragAndDropBuilder, SmzTreeDropBuilder, SmzTreeDynamicMenuBuilder, SmzTreeDynamicMenuItemBuilder, SmzTreeEmptyFeedbackBuilder, SmzTreeMenuBuilder, SmzTreeMenuItemBuilder, SmzTreeToolbarBuilder, SmzTreeToolbarButtonBuilder, SmzTreeToolbarButtonCollectionBuilder, SmzTreeWithDetailsBuilder, SmzTreeWithDetailsComponent, SmzUiBlockComponent, SmzUiBlockDirective, SmzUiBlockService, SmzUiBuilder, SmzUiEnvironment, SmzUiGuidesBuilder, SmzUiGuidesService, SmzViewportDirective, SmzViewportService, StandaloneInjectComponentDirective, StateBuilderPipe, TENANTS_PAGE_ROUTE, TENANTS_PATH, TENANTS_STATE_NAME, TableClearExtensionDirective, TableHelperService, TenantAuthenticationSelectors, TenantsActions, TenantsModule, TenantsSelectors, TenantsState, ThemeManagerService, TitleService, ToastActions, ToastService, TooltipTouchSupportDirective, TreeHelperService, TreeHelpers, Tunnel, UI_DEFINITIONS_STATE_NAME, UI_LOCALIZATION_STATE_NAME, USERS_PAGE_ROUTE, USERS_PATH, USERS_STATE_NAME, USER_ID_HEADER, LayoutUiActions as UiActions, UiDefinitionsDbActions, UiDefinitionsDbSelectors, UiDefinitionsDbState, UiDefinitionsService, UiLocalizationDbActions, UiLocalizationDbSelectors, UiLocalizationDbState, UiLocalizationService, LayoutUiSelectors as UiSelectors, UniqueFilterPipe, UrlCheckerPipe, UrlCheckerPipeModule, UsersActions, UsersModule, UsersSelectors, UsersState, WINDOWS_AUTHENTICATION_HEADER, Wait, applyTableContentNgStyle, b64toBlob, base64ToFile, breakLinesForHtml, buildAuthenticationEndpointsRoutes, buildAuthenticationUrl, buildAuthorizationEndpointsRoutes, buildLoginPageUrl, buildServerApiUrl, buildSmzDialogCustomButtonTestId, buildSmzDialogTestId, buildSmzDialogTopbarButtonTestId, buildSmzTableTestId, buildState, capitalizeFirstLetter, capitalizeWithSlash, captureAttemptedRoute, clearArray, clearAttemptedRoute, clone, cloneAndRemoveProperties, cloneAndRemoveProperty, compare, compareInsensitive, completeSubjectOnTheInstance, composeAttemptedRoute, consumeAttemptedRoute, convertFormCreationFeature, convertFormFeature, convertFormFeatureFromInputData, convertFormUpdateFeature, count, createObjectFromString, createRound, createSubjectOnTheInstance, dataURLtoFile, databaseSmzAccessStates, debounce, deepClone, deepEqual, deepIndexOf, deepMerge, defaultFormsModuleConfig, defaultState, downloadBase64File, downloadFromServerUrl, downloadFromUrl, empty, every, executeTextPattern, featureSmzAccessStates, fixDate$1 as fixDate, fixDateProperties, fixDates, flatten, flattenObject, getAuthenticationInitialState, getCleanApplicationState, getFirst, getFirstElement, getFirstElements, getFormInputFromDialog, getGlobalInitialState, getInitialApplicationState, getInitialDatabaseStoreState, getInitialState$8 as getInitialState, getLastElements, getPreset, getProperty, getSymbol, getTreeNodeFromKey, getUiDefinitionsInitialState, getUiLocalizationInitialState, getUsersInitialState, getValidatorsForInput, handleBase64, isArray, isConvertibleToNumber, isDeepObject, isEmpty$1 as isEmpty, isFunction$1 as isFunction, isInteger, isNil, isNull$1 as isNull, isNullOrEmptyString, isNumber$1 as isNumber, isNumberFinite$1 as isNumberFinite, isNumeric, isObject$2 as isObject, isObjectHelper, isPositive, isSimpleNamedEntity, isString$1 as isString, isUndefined$1 as isUndefined, isValidAttemptedRoute, isWithinTime, leftPad, longestStringInArray, mapParamsToObject, markAsDecorated, mergeClone, mergeDeep, nameof, namesof, ngxsModuleForFeatureFaqsDbState, ngxsModuleForFeatureUiAthenaLayoutState, ngxsModuleForFeatureUiHephaestusLayoutState, ngxsModuleForFeatureUiNewAthenaLayoutState, normalizeDateToUtc, orderArrayByProperty, pad, peekAttemptedRoute, provideSmzCoreLogging, provideSmzEnvironment, rbkSafeHtmlPipe, removeElementFromArray, replaceAll, replaceArrayItem, replaceArrayPartialItem, replaceItem, replaceNgOnInit, resolvePostLoginUrl, resolveSmzTableRowId, rightPad, routerModuleForChildUsersModule, routerParamsDispatch, routerParamsListener, setNestedObject, shorten, showConfirmation, showDialog, showMarkdownDialog, showMessage, showObjectDialog, showPersistentDialog, shuffle, slugSmzDialogTestIdKey, slugSmzTableTestIdKey, sortArray, sortArrayOfObjects, sortArrayOfStrings, sortMenuItemsByLabel, sum, synchronizeNodes, synchronizeRow, synchronizeTable, synchronizeTrees, takeUntil, takeWhile, toDecimal, toSimpleNamedEntity, toString, unwrapDeep, upperFirst, uuidv4, wrapDeep };
+export { AUTHORIZATION_HEADER, AccessControlService, ActionDispatchDirective, ApplicationActions, ApplicationSelectors, ApplicationState, AsPipe, AthenaLayout, AthenaLayoutComponent, AthenaLayoutModule, AuthClaimDefinitions, AuthHandler, AuthService, AuthenticationActions, AuthenticationSelectors, AuthenticationService, AuthenticationState, AuthorizationService, AxisOverflowDirection, AxisOverflowType, AxisPosition, BaseApiService, BoilerplateService, BreadcrumbService, CLAIMS_PAGE_ROUTE, CLAIMS_PATH, CLAIMS_STATE_NAME, CONTENT_ENCODING_HEADER, CachedRouteReuseStrategy, CalendarComponent, CalendarPipe, CanAccess, CancelEditableRow, CellEditor, ChartType, CheckBoxComponent, CheckBoxGroupComponent, ClaimAccessType, ClaimAccessTypeDescription, ClaimAccessTypeValues, ClaimsActions, ClaimsModule, ClaimsSelectors, ClaimsState, ClickStopPropagationDirective, ClickStopPropagationModule, ClonePipe, ColorPallete, ColorPickerComponent, ColumnFilter, ColumnFilterFormElement, Confirmable, ContextMenuRow, CreateLinearChart, CreateRadialChart, CustomError, CustomNgForDirective, CustomNgForModule, DATABASE_REQUIRED_ACTIONS, DATABASE_STATES, DECORATOR_APPLIED, DEFAULT_AUTHENTICATION_ENDPOINTS_ROUTES, DEFAULT_AUTHORIZATION_ENDPOINTS_ROUTES, DatabaseActions, DatabaseSelectors, DatabaseState, DatasetType, DeepWrapper, DescribeAnyPipe, DescribeArrayPipe, DescribeSimpleNamedPipe, DialogContentManagerComponent, DialogService, DropdownComponent, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef, ERROR_HANDLING_TYPE_HEADER, EditableColumn, EditableRow, ExcelsUiActions, FEATURE_STATES, FeaturesActions, FeaturesSelectors, FeaturesState, FileUploadComponent, FilterContains, FirstOrDefaultPipe, FormGroupComponent, FormSubmitComponent, FrozenColumn, GenericInjectComponentDirective, GetElementById, GetElementsByParentId, GlobalActions, GlobalFilter, GlobalInjector, GlobalLoaderComponent, GlobalLoaderModule, GlobalState, GroupingType, HephaestusLayout, HephaestusLayoutComponent, HephaestusLayoutModule, HephaestusProviderModule, HostElement, HttpErrorHandler, IGNORE_ERROR_HANDLING, InViewportMetadata, InitEditableRow, InjectComponentDirective, InjectComponentService, InjectContentAppModule, InjectContentDirective, InjectContentService, InputBlurDetectionModule, InputChangeDetectionDirective, InputClearExtensionDirective, InputCurrencyComponent, InputListComponent, InputMaskComponent, InputNumberComponent, InputPasswordComponent, InputSwitchComponent, InputTagAreaComponent, InputTextAreaComponent, InputTextComponent, InputTreeComponent, IsVisiblePipe, IsVisiblePipeModule, JoinPipe, LOADING_BEHAVIOR_HEADER, LOCAL_LOADING_TAG_HEADER, LayoutUiActions, LayoutUiSelectors, LayoutUiState, LegacyAuthenticationSelectors, LinearChartBuilder, LinkedDropdownComponent, LinkedMultiSelectComponent, LoggingScope, LoggingService, MAIN_LAYOUT_PATH, MentionableTextareaComponent, MenuHelperService, MenuType, MergeClonePipe, MergeClonePipeModule, MultiSelectComponent, NG_ON_INIT, NewAthenaLayout, NewAthenaLayoutComponent, NewAthenaLayoutModule, NewAthenaProviderModule, NgCloneDirective, NgCloneModule, NgIfLandscapeDirective, NgIfLandscapeDirectiveModule, NgIfPortraitDirective, NgIfPortraitDirectiveModule, NgVar, NgVarContext, NgVarModule, NgxRbkUtilsConfig, NgxRbkUtilsModule, NgxSmzCardsModule, NgxSmzCommentsModule, NgxSmzDataInfoModule, NgxSmzDataPipesModule, NgxSmzDialogsModule, NgxSmzDockModule, NgxSmzDocumentsModule, NgxSmzFaqsModule, NgxSmzFormsModule, NgxSmzLayoutsModule, NgxSmzMenuModule, NgxSmzMultiTablesModule, NgxSmzRouterParamsModule, NgxSmzSafeImageModule, NgxSmzServerImageModule, NgxSmzServerImageToBase64Module, NgxSmzSideContentModule, NgxSmzTablesModule, NgxSmzTreeWithDetailsModule, NgxSmzTreesModule, NgxSmzUiBlockModule, NgxSmzUiComponent, NgxSmzUiConfig, NgxSmzUiGuidesModule, NgxSmzUiModule, NgxSmzViewportModule, NotificationFolder, NotificationFolderStatus, NotificationStatus, NotificationType, NotificationTypeClass, NotificationsUiActions, NotificationsUiSelectors, PrettyJsonPipe$1 as PrettyJsonPipe, PrettyJsonPipeModule, PrimeConfigService, REFRESH_TOKEN_BEHAVIOR_HEADER, RESTORE_STATE_ON_ERROR_HEADER, ROLES_PAGE_ROUTE, ROLES_PATH, ROLES_STATE_NAME, RadialChartBuilder, RadioButtonComponent, RbkAccessControlModule, RbkAuthGuard, RbkCanAccessAnyPipe, RbkCanAccessPipe, RbkClaimGuardDirective, RbkDatabaseStateGuard, RbkFeatureStateGuard, RbkPipesModule, RbkTableFilterClearDirectivesModule, RegistrySmzUiConfiguration, ReorderableColumn, ReorderableRow, ReorderableRowHandle, RepositoryForm, ResizableColumn, RoleMode, RoleModeDescription, RoleModeValues, RoleSource, RoleSourceDescription, RoleSourceValues, RolesActions, RolesModule, RolesSelectors, RolesState, RouterParamsActions, RouterParamsSelectors, RowGroupHeader, RowToggler, SMZ_CORE_LOGGING_CONFIG, SMZ_UI_ENVIRONMENT_CONFIG, SafeHtmlPipe$2 as SafeHtmlPipe, SafeImageDirective, SafeUrlPipe$1 as SafeUrlPipe, SaveEditableRow, SelectableRow, SelectableRowDblClick, SelectorPipe, ServerImageDirective, ServerImageToBase64Directive, ServerPathPipe, SetTemplateClasses, SetTemplateClassesPipe, SidebarState, SimpleCalendarPipe, SmzActionDispatchModule, SmzAuthorizationDeactivatedUsersTableBuilder, SmzAuthorizationUsersTableBuilder, SmzBaseColumnBuilder, SmzBaseEditableBuilder, SmzBreakpoints, SmzBuilderUtilities, SmzCardsBuilder, SmzCardsComponent, SmzCardsContentType, SmzCardsInjectableComponentBuilder, SmzCardsTemplate, SmzCardsView, SmzChartComponent, SmzChartModule, SmzClipboardService, SmzColumnCollectionBuilder, SmzCommentsBuilder, SmzCommentsComponent, SmzCommentsSectionComponent, SmzContentTheme, SmzContentThemes, SmzContentType, SmzControlType, SmzCoreLogging, SmzCurrencyColumnBuilder, SmzCustomColumnBuilder, SmzDataInfoComponent, SmzDataTransformColumnBuilder, SmzDataTransformTreePipe, SmzDateColumnBuilder, SmzDialogBuilder, SmzDialogComponentBuilder, SmzDialogFormBuilder, SmzDialogTableBuilder, SmzDialogsConfig, SmzDialogsPresets, SmzDialogsService, SmzDockComponent, SmzDockService, SmzDocumentBaseCellBuilder, SmzDocumentBuilder, SmzDocumentComponent, SmzDocumentsService, SmzDragDropModule, SmzDraggable, SmzDropdownEditableBuilder, SmzDroppable, SmzDynamicDialogConfig, SmzEasyBaseColumnBuilder, SmzEasyColumnCollectionBuilder, SmzEasyCustomColumnBuilder, SmzEasyDataTransformColumnBuilder, SmzEasyDateColumnBuilder, SmzEasyMenuTableBuilder, SmzEasyTableBuilder, SmzEasyTableComponent, SmzEasyTableContentType, SmzEasyTableModule, SmzEasyTextColumnBuilder, SmzEditableCollectionBuilder, SmzEditableTableBuilder, SmzEditableType, SmzEnvironment, SmzExcelColorDefinitions, SmzExcelDataDefinitions, SmzExcelFontDefinitions, SmzExcelService, SmzExcelSortOrderDefinitions, SmzExcelThemeDefinitions, SmzExcelTypeDefinitions, SmzExcelsBuilder, SmzExportDialogComponent, SmzExportDialogModule, SmzExportDialogService, SmzExportableContentSource, SmzExportableContentType, SmzFaqsComponent, SmzFaqsConfig, SmzFilterType, SmzFlattenMenuPipe, SmzFlipCardContext, SmzFormBuilder, SmzFormViewdata, SmzFormsConfig, SmzFormsPresets, SmzFormsRepositoryService, SmzGaugeBuilder, SmzGaugeComponent, SmzGaugeThresholdBuilder, SmzGetDataPipe, SmzGridItemComponent, SmzHelpDialogService, SmzHtmlViewerComponent, SmzHtmlViewerModule, SmzIconColumnBuilder, SmzIconMessageComponent, SmzInfoDateComponent, SmzInfoDateModule, SmzInitialPipe, SmzInputAutocompleteTagArea, SmzInputTextModule, SmzInputTextPipe, SmzLayoutsConfig, SmzLoader, SmzLoaders, SmzLoginBuilder, SmzLoginComponent, SmzLoginModule, SmzMenuBuilder, SmzMenuComponent, SmzMenuCreationBuilder, SmzMenuCreationItemBuilder, SmzMenuItemActionsDirective, SmzMenuItemBuilder, SmzMenuItemEasyTableBuilder, SmzMenuItemTableBuilder, SmzMenuTableBuilder, SmzMessagesModule, SmzMultiTablesBuilder, SmzMultiTablesComponent, SmzNotificationsComponent, SmzNotificationsModule, SmzNumberEditableBuilder, SmzPresets, SmzProxyStore, SmzResponsiveBreakpointsDirective, SmzResponsiveBreakpointsDirectiveModule, SmzResponsiveComponent, SmzRouteDatas, SmzRouteParams, SmzRouteQueryParams, SmzSideContentComponent, SmzSideContentDefault, SmzSincronizeTablePipe, SmzSmartTag, SmzSmartTagModule, SmzSubmitComponent, SmzSvgBuilder, SmzSvgComponent, SmzSvgFeatureBuilder, SmzSvgModule, SmzSvgPinBuilder, SmzSvgRootBuilder, SmzSvgWorldCoordinates, SmzSwitchEditableBuilder, SmzTableBuilder, SmzTableComponent, SmzTablesConfig, SmzTagMessage, SmzTailPipe, SmzTemplatesPipeModule, SmzTenantSwitchComponent, SmzTextColumnBuilder, SmzTextEditableBuilder, SmzTextPattern, SmzTimelineBuilder, SmzTimelineComponent, SmzToastComponent, SmzTooltipTouchSupportModule, SmzTreeBuilder, SmzTreeComponent, SmzTreeDragAndDropBuilder, SmzTreeDropBuilder, SmzTreeDynamicMenuBuilder, SmzTreeDynamicMenuItemBuilder, SmzTreeEmptyFeedbackBuilder, SmzTreeMenuBuilder, SmzTreeMenuItemBuilder, SmzTreeToolbarBuilder, SmzTreeToolbarButtonBuilder, SmzTreeToolbarButtonCollectionBuilder, SmzTreeWithDetailsBuilder, SmzTreeWithDetailsComponent, SmzUiBlockComponent, SmzUiBlockDirective, SmzUiBlockService, SmzUiBuilder, SmzUiEnvironment, SmzUiGuidesBuilder, SmzUiGuidesService, SmzViewportDirective, SmzViewportService, SortIcon, SortableColumn, StandaloneInjectComponentDirective, StateBuilderPipe, TENANTS_PAGE_ROUTE, TENANTS_PATH, TENANTS_STATE_NAME, Table, TableBody, TableCheckbox, TableClearExtensionDirective, TableHeaderCheckbox, TableHelperService, TableModule, TableOverlayService, TableRadioButton, TableService, TenantAuthenticationSelectors, TenantsActions, TenantsModule, TenantsSelectors, TenantsState, ThemeManagerService, TitleService, ToastActions, ToastService, TooltipTouchSupportDirective, TreeHelperService, TreeHelpers, Tunnel, UI_DEFINITIONS_STATE_NAME, UI_LOCALIZATION_STATE_NAME, USERS_PAGE_ROUTE, USERS_PATH, USERS_STATE_NAME, USER_ID_HEADER, LayoutUiActions as UiActions, UiDefinitionsDbActions, UiDefinitionsDbSelectors, UiDefinitionsDbState, UiDefinitionsService, UiLocalizationDbActions, UiLocalizationDbSelectors, UiLocalizationDbState, UiLocalizationService, LayoutUiSelectors as UiSelectors, UniqueFilterPipe, UrlCheckerPipe, UrlCheckerPipeModule, UsersActions, UsersModule, UsersSelectors, UsersState, WINDOWS_AUTHENTICATION_HEADER, Wait, applyTableContentNgStyle, b64toBlob, base64ToFile, breakLinesForHtml, buildAuthenticationEndpointsRoutes, buildAuthenticationUrl, buildAuthorizationEndpointsRoutes, buildLoginPageUrl, buildServerApiUrl, buildSmzDialogCustomButtonTestId, buildSmzDialogTestId, buildSmzDialogTopbarButtonTestId, buildSmzTableTestId, buildState, capitalizeFirstLetter, capitalizeWithSlash, captureAttemptedRoute, clearArray, clearAttemptedRoute, clone, cloneAndRemoveProperties, cloneAndRemoveProperty, compare, compareInsensitive, completeSubjectOnTheInstance, composeAttemptedRoute, consumeAttemptedRoute, convertFormCreationFeature, convertFormFeature, convertFormFeatureFromInputData, convertFormUpdateFeature, count, createObjectFromString, createRound, createSubjectOnTheInstance, dataURLtoFile, databaseSmzAccessStates, debounce, deepClone, deepEqual, deepIndexOf, deepMerge, defaultFormsModuleConfig, defaultState, downloadBase64File, downloadFromServerUrl, downloadFromUrl, empty, every, executeSmzMenuItem, executeTextPattern, featureSmzAccessStates, fixDate$1 as fixDate, fixDateProperties, fixDates, flatten, flattenObject, getAuthenticationInitialState, getCleanApplicationState, getFirst, getFirstElement, getFirstElements, getFormInputFromDialog, getGlobalInitialState, getInitialApplicationState, getInitialDatabaseStoreState, getInitialState$8 as getInitialState, getLastElements, getPreset, getProperty, getSymbol, getTreeNodeFromKey, getUiDefinitionsInitialState, getUiLocalizationInitialState, getUsersInitialState, getValidatorsForInput, handleBase64, isArray, isConvertibleToNumber, isDeepObject, isEmpty$1 as isEmpty, isFunction$1 as isFunction, isInsideCdkOverlay, isInteger, isNil, isNull$1 as isNull, isNullOrEmptyString, isNumber$1 as isNumber, isNumberFinite$1 as isNumberFinite, isNumeric, isObject$2 as isObject, isObjectHelper, isPositive, isSimpleNamedEntity, isString$1 as isString, isUndefined$1 as isUndefined, isValidAttemptedRoute, isWithinTime, leftPad, longestStringInArray, mapParamsToObject, markAsDecorated, mergeClone, mergeDeep, nameof, namesof, ngxsModuleForFeatureFaqsDbState, ngxsModuleForFeatureUiAthenaLayoutState, ngxsModuleForFeatureUiHephaestusLayoutState, ngxsModuleForFeatureUiNewAthenaLayoutState, normalizeDateToUtc, orderArrayByProperty, pad, peekAttemptedRoute, provideSmzCoreLogging, provideSmzEnvironment, rbkSafeHtmlPipe, removeElementFromArray, replaceAll, replaceArrayItem, replaceArrayPartialItem, replaceItem, replaceNgOnInit, resolvePostLoginUrl, resolveSmzTableRowId, rightPad, routerModuleForChildUsersModule, routerParamsDispatch, routerParamsListener, setNestedObject, shorten, showConfirmation, showDialog, showMarkdownDialog, showMessage, showObjectDialog, showPersistentDialog, shuffle, slugSmzDialogTestIdKey, slugSmzTableTestIdKey, sortArray, sortArrayOfObjects, sortArrayOfStrings, sortMenuItemsByLabel, sum, synchronizeNodes, synchronizeRow, synchronizeTable, synchronizeTrees, takeUntil, takeWhile, toDecimal, toSimpleNamedEntity, toString, unwrapDeep, upperFirst, uuidv4, wrapDeep };
 //# sourceMappingURL=ngx-smz-core.mjs.map