spiderly 19.1.0 → 19.2.0-preview

package/fesm2022/spiderly.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, makeEnvironmentProviders, APP_INITIALIZER, ErrorHandler, importProvidersFrom, NgModule, Input, Component, EventEmitter, Output, ViewChild, LOCALE_ID, Inject, TemplateRef, ContentChild, HostBinding, inject, Directive } from '@angular/core';
+import { Injectable, ErrorHandler, APP_INITIALIZER, makeEnvironmentProviders, importProvidersFrom, NgModule, Input, Component, EventEmitter, Output, ViewChild, LOCALE_ID, Inject, TemplateRef, ContentChild, HostBinding, inject, Directive } from '@angular/core';
 import * as i1$1 from 'primeng/api';
 import { MessageService, ConfirmationService } from 'primeng/api';
 import { BehaviorSubject, Subject, of, map as map$1, throttleTime, combineLatest, forkJoin, delay as delay$1, withLatestFrom, firstValueFrom, filter as filter$1, finalize as finalize$1, tap as tap$1, throwError } from 'rxjs';
@@ -30,6 +30,8 @@ import * as i4$2 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i4$3 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
+import * as i5$1 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
 import * as i3$3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i4$4 from 'primeng/editor';
@@ -49,11 +51,9 @@ import * as i4$7 from 'primeng/password';
 import { PasswordModule } from 'primeng/password';
 import * as i4$8 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
-import * as i4$9 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
 import * as i2$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i4$a from 'primeng/panel';
+import * as i4$9 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
 import * as i1$4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -66,7 +66,7 @@ import * as i7 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import * as i8 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import * as i4$b from 'primeng/menubar';
+import * as i4$a from 'primeng/menubar';
 import { MenubarModule } from 'primeng/menubar';
 import { NgxSpinnerService } from 'ngx-spinner';
 
@@ -82,9 +82,9 @@ class BaseEntity {
     }
 }
 
-class User extends BaseEntity {
+class UserBase extends BaseEntity {
     constructor({ id, email, } = {}) {
-        super('User');
+        super('UserBase');
         this.id = id;
         this.email = email;
     }
@@ -317,19 +317,19 @@ class ApiSecurityService {
         };
         //#endregion
         //#region User
-        this.getCurrentUser = () => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUser`, this.config.httpSkipSpinnerOptions);
+        this.getCurrentUserBase = () => {
+            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserBase`, this.config.httpSkipSpinnerOptions);
         };
         this.getCurrentUserPermissionCodes = () => {
             return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserPermissionCodes`, this.config.httpSkipSpinnerOptions);
         };
         //#endregion
         //#region Role
-        this.getRoleTableData = (dto) => {
-            return this.http.post(`${this.config.apiUrl}/Security/GetRoleTableData`, dto, this.config.httpSkipSpinnerOptions);
+        this.getPaginatedRoleList = (dto) => {
+            return this.http.post(`${this.config.apiUrl}/Security/GetPaginatedRoleList`, dto, this.config.httpSkipSpinnerOptions);
         };
-        this.exportRoleTableDataToExcel = (dto) => {
-            return this.http.post(`${this.config.apiUrl}/Security/ExportRoleTableDataToExcel`, dto, this.config.httpOptions);
+        this.exportRoleListToExcel = (dto) => {
+            return this.http.post(`${this.config.apiUrl}/Security/ExportRoleListToExcel`, dto, this.config.httpOptions);
         };
         this.deleteRole = (id) => {
             return this.http.delete(`${this.config.apiUrl}/Security/DeleteRole?id=${id}`);
@@ -397,7 +397,7 @@ class AuthBaseService {
                 }
                 if (event.key === 'login-event') {
                     this.stopTokenTimer();
-                    this.apiService.getCurrentUser().subscribe((user) => {
+                    this.apiService.getCurrentUserBase().subscribe((user) => {
                         this._user.next({
                             id: user.id,
                             email: user.email
@@ -532,7 +532,7 @@ class AuthBaseService {
     }
     isAccessTokenExpired() {
         const expired = this.getTokenRemainingTime() < 5000;
-        return of(expired);
+        return expired;
     }
     getTokenRemainingTime() {
         const accessToken = this.getAccessToken();
@@ -664,22 +664,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: SpiderlyMessageService }, { type: i1$2.TranslocoService }, { type: ConfigBaseService }] });
 
-function provideSpiderlyCore() {
-    return makeEnvironmentProviders([
+/**
+ * Provides core services and configuration for the Spiderly library.
+ *
+ * @param spiderlyCoreConfig Optional configuration object for Spiderly core.
+ * @returns EnvironmentProviders for Angular's dependency injection system.
+ *
+ * Usage:
+ * Call this function in your application's providers to set up core services.
+ */
+function provideSpiderlyCore(spiderlyCoreConfig) {
+    const useAuth = spiderlyCoreConfig?.useAuth ?? true;
+    const providers = [
         MessageService,
         ConfirmationService,
         DialogService,
         {
+            provide: ErrorHandler,
+            useClass: SpiderlyErrorHandler,
+        },
+    ];
+    if (useAuth === true) {
+        providers.push({
             provide: APP_INITIALIZER,
             useFactory: authInitializer,
             multi: true,
             deps: [AuthBaseService],
-        },
-        {
-            provide: ErrorHandler,
-            useClass: SpiderlyErrorHandler,
-        },
-    ]);
+        });
+    }
+    return makeEnvironmentProviders(providers);
 }
 
 class SpiderlyTranslocoLoader {
@@ -699,10 +712,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
+/**
+ * Provides Transloco with Spiderly-specific configuration.
+ * @param config Optional configuration for available, preload, default, and fallback languages.
+ * @returns EnvironmentProviders for Angular DI.
+ */
 function provideSpiderlyTransloco(config) {
     return importProvidersFrom(SpiderlyTranslocoModule.forRoot(config));
 }
+/**
+ * Angular module for Spiderly Transloco integration.
+ */
 class SpiderlyTranslocoModule {
+    /**
+   * Configures the module with custom translation settings.
+   * @param config Optional SpiderlyTranslocoConfig object.
+   * @returns ModuleWithProviders for Angular module system.
+   */
     static forRoot(config) {
         return {
             ngModule: SpiderlyTranslocoModule,
@@ -1031,13 +1057,6 @@ class SpiderlyCheckboxComponent extends BaseControl {
         this.inlineLabel = false;
         this.onChange = new EventEmitter();
         this.change = (event) => {
-            if (this.control.value === false)
-                this.control.setValue(null);
-            else if (this.control.value === true)
-                this.control.setValue(false);
-            else
-                this.control.setValue(true);
-            event.checked = this.control.value;
             this.onChange.next(event);
         };
     }
@@ -1047,7 +1066,7 @@ class SpiderlyCheckboxComponent extends BaseControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n    <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n    <div style=\"margin-top: 0.5rem; position: relative;\">\r\n        <p-checkbox\r\n        [class]=\"control.value === false ? 'p-checkbox-false' : ''\"\r\n        *ngIf=\"control\"\r\n        [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n        [formControl]=\"control\"\r\n        [value]=\"inlineLabel ? label : null\"\r\n        [id]=\"label\"\r\n        [binary]=\"true\"\r\n        (onChange)=\"change($event)\"\r\n        />\r\n        <i \r\n        *ngIf=\"control.value === false\" \r\n        class=\"pi pi-times p-checkbox-false-icon\" \r\n        [style.color]=\"control.disabled ? 'var(--p-checkbox-icon-disabled-color)' : 'var(--p-checkbox-icon-checked-color)'\"\r\n        ></i>\r\n    </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n    <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n    <div style=\"margin-top: 0.5rem; position: relative;\">\r\n        <p-checkbox\r\n        *ngIf=\"control\"\r\n        [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n        [formControl]=\"control\"\r\n        [value]=\"inlineLabel ? label : null\"\r\n        [id]=\"label\"\r\n        [binary]=\"true\"\r\n        (onChange)=\"change($event)\"\r\n        />\r\n    </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, decorators: [{
             type: Component,
@@ -1058,7 +1077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CheckboxModule,
                         TooltipModule,
                         RequiredComponent
-                    ], template: "<div class=\"flex flex-column gap-2\">\r\n    <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n    <div style=\"margin-top: 0.5rem; position: relative;\">\r\n        <p-checkbox\r\n        [class]=\"control.value === false ? 'p-checkbox-false' : ''\"\r\n        *ngIf=\"control\"\r\n        [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n        [formControl]=\"control\"\r\n        [value]=\"inlineLabel ? label : null\"\r\n        [id]=\"label\"\r\n        [binary]=\"true\"\r\n        (onChange)=\"change($event)\"\r\n        />\r\n        <i \r\n        *ngIf=\"control.value === false\" \r\n        class=\"pi pi-times p-checkbox-false-icon\" \r\n        [style.color]=\"control.disabled ? 'var(--p-checkbox-icon-disabled-color)' : 'var(--p-checkbox-icon-checked-color)'\"\r\n        ></i>\r\n    </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"] }]
+                    ], template: "<div class=\"flex flex-column gap-2\">\r\n    <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n    <div style=\"margin-top: 0.5rem; position: relative;\">\r\n        <p-checkbox\r\n        *ngIf=\"control\"\r\n        [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n        [formControl]=\"control\"\r\n        [value]=\"inlineLabel ? label : null\"\r\n        [id]=\"label\"\r\n        [binary]=\"true\"\r\n        (onChange)=\"change($event)\"\r\n        />\r\n    </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { fakeLabel: [{
                 type: Input
             }], initializeToFalse: [{
@@ -1069,48 +1088,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Output
             }] } });
 
-class SpiderlyColorpickComponent extends BaseControl {
+class SpiderlyColorPickerComponent extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        this.showInputTextField = true;
     }
     ngOnInit() {
         this.control.valueChanges.subscribe((value) => {
             this.control.setValue(value, { emitEvent: false }); // Preventing infinite loop
         });
         if (this.control.value == null)
-            this.placeholder = this.translocoService.translate('SelectAColor');
+            this.placeholder = this.translocoService.translate('ColorPickerPlaceholder');
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorpickComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyColorpickComponent, isStandalone: true, selector: "spiderly-colorpick", usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <div style=\"display: flex; gap: 10px;\">\r\n    <div class=\"p-inputgroup p-fluid\">\r\n      <!-- <span class=\"p-inputgroup-addon\">\r\n        #\r\n      </span> -->\r\n      <input\r\n      *ngIf=\"control\"\r\n      [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n      pInputText\r\n      [placeholder]=\"placeholder\"\r\n      [style]=\"{'width':'100%', 'position': 'relative'}\"\r\n      [formControl]=\"control\"\r\n      [id]=\"control.label\"\r\n      (blur)=\"control.markAsDirty()\"\r\n      />\r\n  </div>\r\n    <p-colorpicker\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    appendTo=\"body\"\r\n    ></p-colorpicker>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyColorPickerComponent, isStandalone: true, selector: "spiderly-colorpicker", inputs: { showInputTextField: "showInputTextField" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <div style=\"display: flex; gap: 10px;\">\r\n    <input\r\n    *ngIf=\"control && showInputTextField\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    pInputText\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    [fluid]=\"true\"\r\n    />\r\n    <p-colorpicker\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    appendTo=\"body\"\r\n    ></p-colorpicker>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorpickComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spiderly-colorpick', imports: [
+            args: [{ selector: 'spiderly-colorpicker', imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
                         ColorPickerModule,
+                        InputTextModule,
                         TooltipModule,
                         RequiredComponent
-                    ], template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <div style=\"display: flex; gap: 10px;\">\r\n    <div class=\"p-inputgroup p-fluid\">\r\n      <!-- <span class=\"p-inputgroup-addon\">\r\n        #\r\n      </span> -->\r\n      <input\r\n      *ngIf=\"control\"\r\n      [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n      pInputText\r\n      [placeholder]=\"placeholder\"\r\n      [style]=\"{'width':'100%', 'position': 'relative'}\"\r\n      [formControl]=\"control\"\r\n      [id]=\"control.label\"\r\n      (blur)=\"control.markAsDirty()\"\r\n      />\r\n  </div>\r\n    <p-colorpicker\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    appendTo=\"body\"\r\n    ></p-colorpicker>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslocoService }] });
+                    ], template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <div style=\"display: flex; gap: 10px;\">\r\n    <input\r\n    *ngIf=\"control && showInputTextField\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    pInputText\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    [fluid]=\"true\"\r\n    />\r\n    <p-colorpicker\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    appendTo=\"body\"\r\n    ></p-colorpicker>\r\n  </div>\r\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { showInputTextField: [{
+                type: Input
+            }] } });
 
 class SpiderlyDropdownComponent extends BaseDropdownControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        this.isBooleanPicker = false;
         this.onChange = new EventEmitter();
     }
     ngOnInit() {
+        if (this.isBooleanPicker) {
+            this.options = [
+                { label: this.translocoService.translate('True'), code: true },
+                { label: this.translocoService.translate('False'), code: false },
+                { label: this.translocoService.translate('Empty'), code: null },
+            ];
+        }
         super.ngOnInit();
     }
     change(event) {
         this.onChange.next(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDropdownComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDropdownComponent, isStandalone: true, selector: "spiderly-dropdown", outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n    <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\r\n    <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 5px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\r\n  </div>\r\n\r\n  <!-- Don't support p-inputgroup -->\r\n  <p-select\r\n  *ngIf=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n  [id]=\"label\"\r\n  [formControl]=\"control\"\r\n  [placeholder]=\"placeholder\"\r\n  [options]=\"options\"\r\n  optionLabel=\"label\"\r\n  optionValue=\"code\"\r\n  [showClear]=\"true\"\r\n  (onHide)=\"dropdownMarkAsDirty()\"\r\n  (onChange)=\"change($event)\"\r\n  [fluid]=\"true\"\r\n  appendTo=\"body\"\r\n  />\r\n  \r\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDropdownComponent, isStandalone: true, selector: "spiderly-dropdown", inputs: { isBooleanPicker: "isBooleanPicker" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n    <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\r\n    <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 5px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\r\n  </div>\r\n\r\n  <!-- Don't support p-inputgroup -->\r\n  <p-select\r\n  *ngIf=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n  [id]=\"label\"\r\n  [formControl]=\"control\"\r\n  [placeholder]=\"placeholder\"\r\n  [options]=\"options\"\r\n  optionLabel=\"label\"\r\n  optionValue=\"code\"\r\n  [showClear]=\"true\"\r\n  (onHide)=\"dropdownMarkAsDirty()\"\r\n  (onChange)=\"change($event)\"\r\n  [fluid]=\"true\"\r\n  appendTo=\"body\"\r\n  />\r\n  \r\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDropdownComponent, decorators: [{
             type: Component,
@@ -1122,7 +1153,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         RequiredComponent,
                     ], template: "<div class=\"flex flex-column gap-2\">\r\n\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n    <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\r\n    <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 5px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\r\n  </div>\r\n\r\n  <!-- Don't support p-inputgroup -->\r\n  <p-select\r\n  *ngIf=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n  [id]=\"label\"\r\n  [formControl]=\"control\"\r\n  [placeholder]=\"placeholder\"\r\n  [options]=\"options\"\r\n  optionLabel=\"label\"\r\n  optionValue=\"code\"\r\n  [showClear]=\"true\"\r\n  (onHide)=\"dropdownMarkAsDirty()\"\r\n  (onChange)=\"change($event)\"\r\n  [fluid]=\"true\"\r\n  appendTo=\"body\"\r\n  />\r\n  \r\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { onChange: [{
+        }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { isBooleanPicker: [{
+                type: Input
+            }], onChange: [{
                 type: Output
             }] } });
 
@@ -1357,8 +1390,8 @@ function isExcelFileType(mimeType) {
     }
     return false;
 }
-function exportListToExcel(exportTableDataToExcelObservableMethod, tableFilter) {
-    exportTableDataToExcelObservableMethod(tableFilter).subscribe(res => {
+function exportListToExcel(exportListToExcelObservableMethod, filter) {
+    exportListToExcelObservableMethod(filter).subscribe(res => {
         let fileName = getFileNameFromContentDisposition(res, "ExcelExport.xlsx");
         FileSaver.saveAs(res.body, decodeURIComponent(fileName));
     });
@@ -1710,7 +1743,7 @@ class SpiderlyTextboxComponent extends BaseControl {
         this.onButtonClick.next(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextboxComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextboxComponent, isStandalone: true, selector: "spiderly-textbox", inputs: { showButton: "showButton", buttonIcon: "buttonIcon" }, outputs: { onButtonClick: "onButtonClick" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <div class=\"p-inputgroup\">\r\n    <input\r\n      *ngIf=\"control\"\r\n      [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n      pInputText\r\n      [formControl]=\"control\"\r\n      [id]=\"control.label\"\r\n      (blur)=\"control.markAsDirty()\"\r\n      [placeholder]=\"placeholder\"\r\n      [fluid]=\"true\"\r\n      />\r\n      <span *ngIf=\"showButton\" (click)=\"buttonClick()\" class=\"p-inputgroup-addon\" style=\"cursor: pointer; background-color: var(--p-primary-color); border-color: var(--p-primary-color);\">\r\n        <i class=\"pi {{buttonIcon}}\" style=\"color: #fff;\"></i>\r\n      </span>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$9.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextboxComponent, isStandalone: true, selector: "spiderly-textbox", inputs: { showButton: "showButton", buttonIcon: "buttonIcon" }, outputs: { onButtonClick: "onButtonClick" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <div class=\"p-inputgroup\">\r\n    <input\r\n      *ngIf=\"control\"\r\n      [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n      pInputText\r\n      [formControl]=\"control\"\r\n      [id]=\"control.label\"\r\n      (blur)=\"control.markAsDirty()\"\r\n      [placeholder]=\"placeholder\"\r\n      [fluid]=\"true\"\r\n      />\r\n      <span *ngIf=\"showButton\" (click)=\"buttonClick()\" class=\"p-inputgroup-addon\" style=\"cursor: pointer; background-color: var(--p-primary-color); border-color: var(--p-primary-color);\">\r\n        <i class=\"pi {{buttonIcon}}\" style=\"color: #fff;\"></i>\r\n      </span>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextboxComponent, decorators: [{
             type: Component,
@@ -1776,11 +1809,11 @@ class PanelHeaderComponent {
         tab.isSelected = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelHeaderComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PanelHeaderComponent, isStandalone: false, selector: "panel-header", inputs: { title: "title", showBigTitle: "showBigTitle", showIcon: "showIcon", icon: "icon", index: "index", tabs: "tabs" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\r\n    @if (tabs == null) {\r\n        <div style=\"display: flex; align-items: center; gap: 14px;\">\r\n            <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n            <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'\"></i> \r\n            <h2 [style]=\"(showBigTitle ? 'font-size: 16px;' : '')\" class=\"remove-h-css\">{{title}}</h2>\r\n        </div>\r\n    }\r\n    @else {\r\n        @for (tab of tabs; track $index) {\r\n            <div (click)=\"setTabIsSelected(tab)\"\r\n                [style]=\"{\r\n                    display: 'flex',\r\n                    alignItems: 'center',\r\n                    gap: '14px',\r\n                    cursor: 'pointer',\r\n                    fontWeight: tab.isSelected ? '700' : 'normal'\r\n                }\">\r\n                <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n                <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'\"></i> \r\n                <div [style]=\"showBigTitle ? 'font-size: 16px' : ''\">{{tab.label}}</div>\r\n            </div>\r\n        }\r\n    }\r\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PanelHeaderComponent, isStandalone: false, selector: "panel-header", inputs: { title: "title", showBigTitle: "showBigTitle", showIcon: "showIcon", icon: "icon", index: "index", tabs: "tabs" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\r\n    @if (tabs == null) {\r\n        <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n            <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n            <h2 [style]=\"(showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : '')\" class=\"remove-h-css\">{{title}}</h2>\r\n        </div>\r\n    }\r\n    @else {\r\n        @for (tab of tabs; track $index) {\r\n            <div (click)=\"setTabIsSelected(tab)\"\r\n                [style]=\"{\r\n                    display: 'flex',\r\n                    alignItems: 'center',\r\n                    gap: '8px',\r\n                    cursor: 'pointer',\r\n                    fontWeight: tab.isSelected ? '700' : 'normal'\r\n                }\">\r\n                <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n                <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n                <div [style]=\"showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : ''\">{{tab.label}}</div>\r\n            </div>\r\n        }\r\n    }\r\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'panel-header', standalone: false, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\r\n    @if (tabs == null) {\r\n        <div style=\"display: flex; align-items: center; gap: 14px;\">\r\n            <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n            <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'\"></i> \r\n            <h2 [style]=\"(showBigTitle ? 'font-size: 16px;' : '')\" class=\"remove-h-css\">{{title}}</h2>\r\n        </div>\r\n    }\r\n    @else {\r\n        @for (tab of tabs; track $index) {\r\n            <div (click)=\"setTabIsSelected(tab)\"\r\n                [style]=\"{\r\n                    display: 'flex',\r\n                    alignItems: 'center',\r\n                    gap: '14px',\r\n                    cursor: 'pointer',\r\n                    fontWeight: tab.isSelected ? '700' : 'normal'\r\n                }\">\r\n                <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n                <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'\"></i> \r\n                <div [style]=\"showBigTitle ? 'font-size: 16px' : ''\">{{tab.label}}</div>\r\n            </div>\r\n        }\r\n    }\r\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"] }]
+            args: [{ selector: 'panel-header', standalone: false, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\r\n    @if (tabs == null) {\r\n        <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n            <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n            <h2 [style]=\"(showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : '')\" class=\"remove-h-css\">{{title}}</h2>\r\n        </div>\r\n    }\r\n    @else {\r\n        @for (tab of tabs; track $index) {\r\n            <div (click)=\"setTabIsSelected(tab)\"\r\n                [style]=\"{\r\n                    display: 'flex',\r\n                    alignItems: 'center',\r\n                    gap: '8px',\r\n                    cursor: 'pointer',\r\n                    fontWeight: tab.isSelected ? '700' : 'normal'\r\n                }\">\r\n                <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n                <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n                <div [style]=\"showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : ''\">{{tab.label}}</div>\r\n            </div>\r\n        }\r\n    }\r\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { title: [{
                 type: Input
             }], showBigTitle: [{
@@ -1826,7 +1859,7 @@ class SpiderlyPanelComponent {
         this.onRemoveIconClick.next(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPanelComponent, isStandalone: false, selector: "spiderly-panel", inputs: { isFirstMultiplePanel: "isFirstMultiplePanel", isMiddleMultiplePanel: "isMiddleMultiplePanel", isLastMultiplePanel: "isLastMultiplePanel", toggleable: "toggleable", collapsed: "collapsed", crudMenu: "crudMenu", showCrudMenu: "showCrudMenu", showRemoveIcon: "showRemoveIcon", index: "index", showPanelHeader: "showPanelHeader" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<p-panel \r\n[showHeader]=\"showPanelHeader\"\r\n[ngClass]=\"{\r\n    'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,\r\n    'multiple-panel-first': isFirstMultiplePanel,\r\n    'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,\r\n    'multiple-panel-middle': isMiddleMultiplePanel,\r\n    'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,\r\n    'multiple-panel-last': isLastMultiplePanel,\r\n    'panel-border': !isFirstMultiplePanel,\r\n    'spiderly-panel': true,\r\n}\"\r\n[toggleable]=\"toggleable\"\r\n[collapsed]=\"toggleable && collapsed\"\r\nexpandIcon=\"pi pi-chevron-up\"\r\ncollapseIcon=\"pi pi-chevron-down\"\r\n>\r\n    <ng-template pTemplate=\"header\">\r\n        <div>\r\n            <ng-content select=\"panel-header\"></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"icons\">\r\n        <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\r\n            <i class=\"pi pi-ellipsis-h icon-hover\" (click)=\"menuItemClick(index, $event)\"></i>\r\n            <p-menu #menu [model]=\"crudMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n        </div>\r\n        <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\r\n            <i class=\"pi pi-minus icon-hover error-color-light\" (click)=\"removeItemClick()\"></i>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div class=\"panel-body-wrapper\">\r\n        <ng-content select=\"panel-body\"></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"panel-footer\"></ng-content>\r\n\r\n</p-panel>\r\n", styles: [":host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$a.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPanelComponent, isStandalone: false, selector: "spiderly-panel", inputs: { isFirstMultiplePanel: "isFirstMultiplePanel", isMiddleMultiplePanel: "isMiddleMultiplePanel", isLastMultiplePanel: "isLastMultiplePanel", toggleable: "toggleable", collapsed: "collapsed", crudMenu: "crudMenu", showCrudMenu: "showCrudMenu", showRemoveIcon: "showRemoveIcon", index: "index", showPanelHeader: "showPanelHeader" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<p-panel \r\n[showHeader]=\"showPanelHeader\"\r\n[ngClass]=\"{\r\n    'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,\r\n    'multiple-panel-first': isFirstMultiplePanel,\r\n    'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,\r\n    'multiple-panel-middle': isMiddleMultiplePanel,\r\n    'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,\r\n    'multiple-panel-last': isLastMultiplePanel,\r\n    'panel-border': !isFirstMultiplePanel,\r\n    'spiderly-panel': true,\r\n}\"\r\n[toggleable]=\"toggleable\"\r\n[collapsed]=\"toggleable && collapsed\"\r\nexpandIcon=\"pi pi-chevron-up\"\r\ncollapseIcon=\"pi pi-chevron-down\"\r\n>\r\n    <ng-template pTemplate=\"header\">\r\n        <div>\r\n            <ng-content select=\"panel-header\"></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"icons\">\r\n        <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\r\n            <i class=\"pi pi-ellipsis-h icon-hover\" (click)=\"menuItemClick(index, $event)\"></i>\r\n            <p-menu #menu [model]=\"crudMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n        </div>\r\n        <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\r\n            <i class=\"pi pi-minus icon-hover error-color-light\" (click)=\"removeItemClick()\"></i>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div class=\"panel-body-wrapper\">\r\n        <ng-content select=\"panel-body\"></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"panel-footer\"></ng-content>\r\n\r\n</p-panel>\r\n", styles: [":host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$9.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelComponent, decorators: [{
             type: Component,
@@ -1867,11 +1900,11 @@ class SpiderlyCardComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCardComponent, isStandalone: false, selector: "spiderly-card", inputs: { icon: "icon", title: "title" }, ngImport: i0, template: "<div class=\"card responsive-card-padding\">\r\n    <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 12px;\">\r\n        <i  style=\"font-size: 20px;\" class=\"{{icon}} primary-color\"></i>\r\n        <h5 style=\"margin: 0;\">{{title}}</h5>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCardComponent, isStandalone: false, selector: "spiderly-card", inputs: { icon: "icon", title: "title" }, ngImport: i0, template: "<div class=\"card responsive-card-padding\">\r\n    <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 8px;\">\r\n        <i  style=\"font-size: 21px;\" class=\"{{icon}} primary-color\"></i>\r\n        <h5 style=\"margin: 0;\">{{title}}</h5>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spiderly-card', standalone: false, template: "<div class=\"card responsive-card-padding\">\r\n    <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 12px;\">\r\n        <i  style=\"font-size: 20px;\" class=\"{{icon}} primary-color\"></i>\r\n        <h5 style=\"margin: 0;\">{{title}}</h5>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
+            args: [{ selector: 'spiderly-card', standalone: false, template: "<div class=\"card responsive-card-padding\">\r\n    <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 8px;\">\r\n        <i  style=\"font-size: 21px;\" class=\"{{icon}} primary-color\"></i>\r\n        <h5 style=\"margin: 0;\">{{title}}</h5>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], title: [{
@@ -1966,7 +1999,7 @@ class SpiderlyControlsModule {
             SpiderlyNumberComponent,
             SpiderlyDropdownComponent,
             SpiderlyEditorComponent,
-            SpiderlyColorpickComponent,
+            SpiderlyColorPickerComponent,
             SpiderlyFileComponent], exports: [SpiderlyTextboxComponent,
             SpiderlyTextareaComponent,
             SpiderlyCheckboxComponent,
@@ -1981,7 +2014,7 @@ class SpiderlyControlsModule {
             SpiderlyNumberComponent,
             SpiderlyDropdownComponent,
             SpiderlyEditorComponent,
-            SpiderlyColorpickComponent,
+            SpiderlyColorPickerComponent,
             SpiderlyFileComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyControlsModule, imports: [SpiderlyTextboxComponent,
             SpiderlyTextareaComponent,
@@ -1997,7 +2030,7 @@ class SpiderlyControlsModule {
             SpiderlyNumberComponent,
             SpiderlyDropdownComponent,
             SpiderlyEditorComponent,
-            SpiderlyColorpickComponent,
+            SpiderlyColorPickerComponent,
             SpiderlyFileComponent, SpiderlyPanelsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyControlsModule, decorators: [{
@@ -2018,7 +2051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyNumberComponent,
                         SpiderlyDropdownComponent,
                         SpiderlyEditorComponent,
-                        SpiderlyColorpickComponent,
+                        SpiderlyColorPickerComponent,
                         SpiderlyFileComponent,
                     ],
                     exports: [
@@ -2036,7 +2069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyNumberComponent,
                         SpiderlyDropdownComponent,
                         SpiderlyEditorComponent,
-                        SpiderlyColorpickComponent,
+                        SpiderlyColorPickerComponent,
                         SpiderlyFileComponent
                     ],
                     declarations: [],
@@ -2213,6 +2246,7 @@ class RoleBaseDetailsComponent {
         this.onSave = new EventEmitter();
         this.onRoleFormGroupInitFinish = new EventEmitter();
         this.additionalButtons = [];
+        this.showBigPanelTitle = true;
         this.authorizedForSaveObservable = () => of(false);
         this.isAuthorizedForSave = false;
         this.onIsAuthorizedForSaveChange = new EventEmitter();
@@ -2306,7 +2340,7 @@ class RoleBaseDetailsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RoleBaseDetailsComponent, deps: [{ token: ApiSecurityService }, { token: i3.ActivatedRoute }, { token: BaseFormService }, { token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: RoleBaseDetailsComponent, isStandalone: true, selector: "role-base-details", inputs: { getCrudMenuForOrderedData: "getCrudMenuForOrderedData", formGroup: "formGroup", roleFormGroup: "roleFormGroup", additionalButtons: "additionalButtons", authorizedForSaveObservable: "authorizedForSaveObservable" }, outputs: { onSave: "onSave", onRoleFormGroupInitFinish: "onRoleFormGroupInitFinish", onIsAuthorizedForSaveChange: "onIsAuthorizedForSaveChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <spiderly-panel>\r\n        <panel-header></panel-header>\r\n\r\n        <panel-body>\r\n            <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\r\n                <div class=\"col-12\">\r\n                    <spiderly-textbox [control]=\"control('name', roleFormGroup)\"></spiderly-textbox>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-textarea [control]=\"control('description', roleFormGroup)\"></spiderly-textarea>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiautocomplete [control]=\"selectedUsersForRole\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiselect [control]=\"selectedPermissionsForRole\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\r\n                </div>\r\n            </form>\r\n\r\n            <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\r\n\r\n        </panel-body>\r\n\r\n        <panel-footer>\r\n            <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\r\n            @for (button of additionalButtons; track button.label) {\r\n                <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\r\n            }\r\n            <return-button></return-button>\r\n        </panel-footer>\r\n    </spiderly-panel>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardSkeletonComponent, selector: "card-skeleton", inputs: ["height"] }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyTextareaComponent, selector: "spiderly-textarea" }, { kind: "component", type: SpiderlyMultiAutocompleteComponent, selector: "spiderly-multiautocomplete" }, { kind: "component", type: SpiderlyMultiSelectComponent, selector: "spiderly-multiselect" }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: SpiderlyReturnButtonComponent, selector: "return-button", inputs: ["navigateUrl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: RoleBaseDetailsComponent, isStandalone: true, selector: "role-base-details", inputs: { getCrudMenuForOrderedData: "getCrudMenuForOrderedData", formGroup: "formGroup", roleFormGroup: "roleFormGroup", additionalButtons: "additionalButtons", panelTitle: "panelTitle", showBigPanelTitle: "showBigPanelTitle", panelIcon: "panelIcon", authorizedForSaveObservable: "authorizedForSaveObservable" }, outputs: { onSave: "onSave", onRoleFormGroupInitFinish: "onRoleFormGroupInitFinish", onIsAuthorizedForSaveChange: "onIsAuthorizedForSaveChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <spiderly-panel>\r\n        <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\r\n\r\n        <panel-body>\r\n            <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\r\n                <div class=\"col-12\">\r\n                    <spiderly-textbox [control]=\"control('name', roleFormGroup)\"></spiderly-textbox>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-textarea [control]=\"control('description', roleFormGroup)\"></spiderly-textarea>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiautocomplete [control]=\"selectedUsersForRole\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiselect [control]=\"selectedPermissionsForRole\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\r\n                </div>\r\n            </form>\r\n\r\n            <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\r\n\r\n        </panel-body>\r\n\r\n        <panel-footer>\r\n            <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\r\n            @for (button of additionalButtons; track button.label) {\r\n                <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\r\n            }\r\n            <return-button></return-button>\r\n        </panel-footer>\r\n    </spiderly-panel>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardSkeletonComponent, selector: "card-skeleton", inputs: ["height"] }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyTextareaComponent, selector: "spiderly-textarea" }, { kind: "component", type: SpiderlyMultiAutocompleteComponent, selector: "spiderly-multiautocomplete" }, { kind: "component", type: SpiderlyMultiSelectComponent, selector: "spiderly-multiselect" }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: SpiderlyReturnButtonComponent, selector: "return-button", inputs: ["navigateUrl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RoleBaseDetailsComponent, decorators: [{
             type: Component,
@@ -2323,7 +2357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyPanelsModule,
                         SpiderlyButtonComponent,
                         SpiderlyReturnButtonComponent
-                    ], template: "<ng-container *transloco=\"let t\">\r\n    <spiderly-panel>\r\n        <panel-header></panel-header>\r\n\r\n        <panel-body>\r\n            <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\r\n                <div class=\"col-12\">\r\n                    <spiderly-textbox [control]=\"control('name', roleFormGroup)\"></spiderly-textbox>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-textarea [control]=\"control('description', roleFormGroup)\"></spiderly-textarea>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiautocomplete [control]=\"selectedUsersForRole\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiselect [control]=\"selectedPermissionsForRole\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\r\n                </div>\r\n            </form>\r\n\r\n            <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\r\n\r\n        </panel-body>\r\n\r\n        <panel-footer>\r\n            <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\r\n            @for (button of additionalButtons; track button.label) {\r\n                <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\r\n            }\r\n            <return-button></return-button>\r\n        </panel-footer>\r\n    </spiderly-panel>\r\n</ng-container>" }]
+                    ], template: "<ng-container *transloco=\"let t\">\r\n    <spiderly-panel>\r\n        <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\r\n\r\n        <panel-body>\r\n            <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\r\n                <div class=\"col-12\">\r\n                    <spiderly-textbox [control]=\"control('name', roleFormGroup)\"></spiderly-textbox>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-textarea [control]=\"control('description', roleFormGroup)\"></spiderly-textarea>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiautocomplete [control]=\"selectedUsersForRole\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <spiderly-multiselect [control]=\"selectedPermissionsForRole\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\r\n                </div>\r\n            </form>\r\n\r\n            <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\r\n\r\n        </panel-body>\r\n\r\n        <panel-footer>\r\n            <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\r\n            @for (button of additionalButtons; track button.label) {\r\n                <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\r\n            }\r\n            <return-button></return-button>\r\n        </panel-footer>\r\n    </spiderly-panel>\r\n</ng-container>" }]
         }], ctorParameters: () => [{ type: ApiSecurityService }, { type: i3.ActivatedRoute }, { type: BaseFormService }, { type: AuthBaseService }], propDecorators: { onSave: [{
                 type: Output
             }], onRoleFormGroupInitFinish: [{
@@ -2336,6 +2370,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], additionalButtons: [{
                 type: Input
+            }], panelTitle: [{
+                type: Input
+            }], showBigPanelTitle: [{
+                type: Input
+            }], panelIcon: [{
+                type: Input
             }], authorizedForSaveObservable: [{
                 type: Input
             }], onIsAuthorizedForSaveChange: [{
@@ -3159,6 +3199,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                     ], template: "<ng-container *transloco=\"let t\">\r\n  <p-confirmDialog \r\n  #cd \r\n  ></p-confirmDialog>\r\n    <div\r\n      class=\"border-bottom-1 surface-border text-lg\"\r\n      style=\"display: flex; align-items: center; padding-bottom: 10px; width: 100%; gap: 10px;\"\r\n    >\r\n      <i class=\"pi pi-exclamation-circle text-4xl\"></i>\r\n      <p>{{t('PleaseConfirmToProceed')}}</p>\r\n    </div>\r\n  \r\n      <div style=\"display: flex; gap: 5px; justify-content: right; margin-top: 28px;\">\r\n          <spiderly-button (onClick)=\"reject()\" icon=\"pi pi-times\" [label]=\"t('Cancle')\" severity=\"secondary\"></spiderly-button>\r\n          <spiderly-button (onClick)=\"accept()\" icon=\"pi pi-check\" [label]=\"t('Confirm')\" styleClass=\"p-button-danger\"></spiderly-button>\r\n      </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [{ type: i1$6.DynamicDialogRef }, { type: i1$6.DynamicDialogConfig }] });
 
+class Filter extends BaseEntity {
+    constructor({ filters, first, rows, sortField, sortOrder, multiSortMeta, additionalFilterIdInt, additionalFilterIdLong, } = {}) {
+        super('Filter');
+        this.filters = filters;
+        this.first = first;
+        this.rows = rows;
+        this.sortField = sortField;
+        this.sortOrder = sortOrder;
+        this.multiSortMeta = multiSortMeta;
+        this.additionalFilterIdInt = additionalFilterIdInt;
+        this.additionalFilterIdLong = additionalFilterIdLong;
+    }
+}
+
 var MatchModeCodes;
 (function (MatchModeCodes) {
     MatchModeCodes[MatchModeCodes["StartsWith"] = 0] = "StartsWith";
@@ -3207,6 +3261,7 @@ class SpiderlyDataTableComponent {
         this.clientFilterCount = 0;
     }
     ngOnInit() {
+        let a = new Filter();
         this.matchModeDateOptions = [
             { label: this.translocoService.translate('OnDate'), value: MatchModeCodes.Equals },
             { label: this.translocoService.translate('DatesBefore'), value: MatchModeCodes.LessThan },
@@ -3226,7 +3281,7 @@ class SpiderlyDataTableComponent {
         let tableFilter = event;
         tableFilter.additionalFilterIdLong = this.additionalFilterIdLong;
         this.onLazyLoad.next(tableFilter);
-        this.getTableDataObservableMethod(tableFilter).subscribe({
+        this.getPaginatedListObservableMethod(tableFilter).subscribe({
             next: async (res) => {
                 this.items = res.data;
                 this.totalRecords = res.totalRecords;
@@ -3432,9 +3487,9 @@ class SpiderlyDataTableComponent {
         return `${index}${item.field}`;
     }
     exportListToExcel() {
-        let tableFilter = this.lastLazyLoadEvent;
-        tableFilter.additionalFilterIdLong = this.additionalFilterIdLong;
-        exportListToExcel(this.exportTableDataToExcelObservableMethod, tableFilter);
+        let filter = this.lastLazyLoadEvent;
+        filter.additionalFilterIdLong = this.additionalFilterIdLong;
+        exportListToExcel(this.exportListToExcelObservableMethod, filter);
     }
     clear(table) {
         table.clear();
@@ -3532,7 +3587,7 @@ class SpiderlyDataTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, deps: [{ token: i3.Router }, { token: i1$6.DialogService }, { token: i3.ActivatedRoute }, { token: SpiderlyMessageService }, { token: i1$2.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", getTableDataObservableMethod: "getTableDataObservableMethod", exportTableDataToExcelObservableMethod: "exportTableDataToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n            <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n                  <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [pTooltip]=\"col.filterType !== 'blob' ? getRowData(rowData, col) : ''\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img height=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n            <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n                  <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [pTooltip]=\"col.filterType !== 'blob' ? getRowData(rowData, col) : ''\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
             type: Component,
@@ -3546,7 +3601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         MultiSelectModule,
                         CheckboxModule,
                         TooltipModule,
-                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n            <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n                  <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [pTooltip]=\"col.filterType !== 'blob' ? getRowData(rowData, col) : ''\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img height=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n            <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n                  <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [pTooltip]=\"col.filterType !== 'blob' ? getRowData(rowData, col) : ''\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
         }], ctorParameters: () => [{ type: i3.Router }, { type: i1$6.DialogService }, { type: i3.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1$2.TranslocoService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -3571,9 +3626,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], onTotalRecordsChange: [{
                 type: Output
-            }], getTableDataObservableMethod: [{
+            }], getPaginatedListObservableMethod: [{
                 type: Input
-            }], exportTableDataToExcelObservableMethod: [{
+            }], exportListToExcelObservableMethod: [{
                 type: Input
             }], deleteItemFromTableObservableMethod: [{
                 type: Input
@@ -3705,7 +3760,7 @@ class SpiderlyDataViewComponent {
         let tableFilter = event;
         tableFilter.filters = transformedFilter;
         this.onLazyLoad.next(tableFilter);
-        this.getTableDataObservableMethod(tableFilter).subscribe({
+        this.getPaginatedListObservableMethod(tableFilter).subscribe({
             next: async (res) => {
                 this.items = res.data;
                 this.totalRecords = res.totalRecords;
@@ -3765,7 +3820,7 @@ class SpiderlyDataViewComponent {
         this.table.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, deps: [{ token: i1$2.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getTableDataObservableMethod: "getTableDataObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table \r\n    #dt \r\n    [value]=\"items\" \r\n    [rows]=\"rows\" \r\n    [rowHover]=\"false\" \r\n    responsiveLayout=\"scroll\" \r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" \r\n    [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n    [loading]=\"(items === undefined || loading === true)\" \r\n    dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"\r\n    [filterDelay]=\"500\"\r\n    [paginator]=\"true\"\r\n    > \r\n      <ng-template #caption>\r\n        <div *ngIf=\"filters.length !== 0\">\r\n          <div class=\"data-view-grid\">\r\n            @for (filter of filters; track $index) {\r\n              <div>\r\n              <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n                  <div>\r\n                    <label>\r\n                      {{filter.name}}\r\n                    </label>\r\n                  </div>\r\n\r\n                  <p-columnFilter *ngIf=\"filter.filterType != null\" [type]=\"filter.filterType\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.filterPlaceholder\" \r\n                  [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.filterType)\" [matchModeOptions]=\"getMatchModeOptions(filter.filterType)\" \r\n                  >\r\n                    <ng-container *ngIf=\"filter.filterType == 'multiselect'\">\r\n                      <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                        <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                          <ng-template let-item pTemplate=\"item\">\r\n                            <div class=\"p-multiselect-representative-option\">\r\n                              <span class=\"ml-2\">{{ item.label }}</span>\r\n                            </div>\r\n                          </ng-template>\r\n                        </p-multiSelect>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </p-columnFilter>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div style=\"display: flex; gap: 12px;\">\r\n            <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n            <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #body let-rowData let-index=\"rowIndex\">\r\n        <tr style=\"padding: 0; margin-bottom: 0;\">\r\n          <td style=\"display: block; border: 0; padding: 0;\">\r\n            <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        {{t('NoRecordsFound')}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getPaginatedListObservableMethod: "getPaginatedListObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table \r\n    #dt \r\n    [value]=\"items\" \r\n    [rows]=\"rows\" \r\n    [rowHover]=\"false\" \r\n    responsiveLayout=\"scroll\" \r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" \r\n    [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n    [loading]=\"(items === undefined || loading === true)\" \r\n    dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"\r\n    [filterDelay]=\"500\"\r\n    [paginator]=\"true\"\r\n    > \r\n      <ng-template #caption>\r\n        <div *ngIf=\"filters.length !== 0\">\r\n          <div class=\"data-view-grid\">\r\n            @for (filter of filters; track $index) {\r\n              <div>\r\n              <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n                  <div>\r\n                    <label>\r\n                      {{filter.label}}\r\n                    </label>\r\n                  </div>\r\n\r\n                  <p-columnFilter *ngIf=\"filter.type != null\" [type]=\"filter.type\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.placeholder\" \r\n                  [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.type)\" [matchModeOptions]=\"getMatchModeOptions(filter.type)\" \r\n                  >\r\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\r\n                      <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                        <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'100%'}\">\r\n                          <ng-template let-item pTemplate=\"item\">\r\n                            <div class=\"p-multiselect-representative-option\">\r\n                              <span class=\"ml-2\">{{ item.label }}</span>\r\n                            </div>\r\n                          </ng-template>\r\n                        </p-multiSelect>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </p-columnFilter>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div style=\"display: flex; gap: 12px;\">\r\n            <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n            <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #body let-rowData let-index=\"rowIndex\">\r\n        <tr style=\"padding: 0; margin-bottom: 0;\">\r\n          <td style=\"display: block; border: 0; padding: 0;\">\r\n            <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        {{t('NoRecordsFound')}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, decorators: [{
             type: Component,
@@ -3783,7 +3838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         InputTextModule,
                         InputNumberModule,
                         SelectModule,
-                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table \r\n    #dt \r\n    [value]=\"items\" \r\n    [rows]=\"rows\" \r\n    [rowHover]=\"false\" \r\n    responsiveLayout=\"scroll\" \r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" \r\n    [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n    [loading]=\"(items === undefined || loading === true)\" \r\n    dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"\r\n    [filterDelay]=\"500\"\r\n    [paginator]=\"true\"\r\n    > \r\n      <ng-template #caption>\r\n        <div *ngIf=\"filters.length !== 0\">\r\n          <div class=\"data-view-grid\">\r\n            @for (filter of filters; track $index) {\r\n              <div>\r\n              <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n                  <div>\r\n                    <label>\r\n                      {{filter.name}}\r\n                    </label>\r\n                  </div>\r\n\r\n                  <p-columnFilter *ngIf=\"filter.filterType != null\" [type]=\"filter.filterType\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.filterPlaceholder\" \r\n                  [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.filterType)\" [matchModeOptions]=\"getMatchModeOptions(filter.filterType)\" \r\n                  >\r\n                    <ng-container *ngIf=\"filter.filterType == 'multiselect'\">\r\n                      <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                        <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                          <ng-template let-item pTemplate=\"item\">\r\n                            <div class=\"p-multiselect-representative-option\">\r\n                              <span class=\"ml-2\">{{ item.label }}</span>\r\n                            </div>\r\n                          </ng-template>\r\n                        </p-multiSelect>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </p-columnFilter>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div style=\"display: flex; gap: 12px;\">\r\n            <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n            <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #body let-rowData let-index=\"rowIndex\">\r\n        <tr style=\"padding: 0; margin-bottom: 0;\">\r\n          <td style=\"display: block; border: 0; padding: 0;\">\r\n            <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        {{t('NoRecordsFound')}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table \r\n    #dt \r\n    [value]=\"items\" \r\n    [rows]=\"rows\" \r\n    [rowHover]=\"false\" \r\n    responsiveLayout=\"scroll\" \r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" \r\n    [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n    [loading]=\"(items === undefined || loading === true)\" \r\n    dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"\r\n    [filterDelay]=\"500\"\r\n    [paginator]=\"true\"\r\n    > \r\n      <ng-template #caption>\r\n        <div *ngIf=\"filters.length !== 0\">\r\n          <div class=\"data-view-grid\">\r\n            @for (filter of filters; track $index) {\r\n              <div>\r\n              <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n                  <div>\r\n                    <label>\r\n                      {{filter.label}}\r\n                    </label>\r\n                  </div>\r\n\r\n                  <p-columnFilter *ngIf=\"filter.type != null\" [type]=\"filter.type\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.placeholder\" \r\n                  [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.type)\" [matchModeOptions]=\"getMatchModeOptions(filter.type)\" \r\n                  >\r\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\r\n                      <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                        <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'100%'}\">\r\n                          <ng-template let-item pTemplate=\"item\">\r\n                            <div class=\"p-multiselect-representative-option\">\r\n                              <span class=\"ml-2\">{{ item.label }}</span>\r\n                            </div>\r\n                          </ng-template>\r\n                        </p-multiSelect>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </p-columnFilter>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div style=\"display: flex; gap: 12px;\">\r\n            <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n            <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #body let-rowData let-index=\"rowIndex\">\r\n        <tr style=\"padding: 0; margin-bottom: 0;\">\r\n          <td style=\"display: block; border: 0; padding: 0;\">\r\n            <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        {{t('NoRecordsFound')}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -3808,7 +3863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], clearFiltersIcon: [{
                 type: Input
-            }], getTableDataObservableMethod: [{
+            }], getPaginatedListObservableMethod: [{
                 type: Input
             }], cardBody: [{
                 type: ContentChild,
@@ -3877,6 +3932,7 @@ class MenuitemComponent {
         });
     }
     ngOnInit() {
+        this.item.visible = this.item.visible ?? true;
         this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
         if (this.item.routerLink) {
             this.updateActiveStateFromRoute();
@@ -4168,7 +4224,7 @@ class TopBarComponent {
                     this.hideMenuItemsBasedOnPermissions(menuItem.items, currentUserPermissionCodes);
                 }
                 if (typeof menuItem.hasPermission === 'function') {
-                    menuItem.visible = menuItem.hasPermission(currentUserPermissionCodes);
+                    menuItem.visible = menuItem.hasPermission(currentUserPermissionCodes) ?? false;
                 }
             });
         };
@@ -4184,7 +4240,7 @@ class TopBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ token: AuthBaseService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\r\n  <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\r\n    <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n      <ng-template #start>\r\n        <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n      </ng-template>\r\n      <ng-template #end>\r\n        <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n          <div>\r\n            <ng-content select=\"[ACTIONS]\"></ng-content>\r\n          </div>\r\n          <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n        </div>\r\n      </ng-template>\r\n    </p-menubar>\r\n  </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$b.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\r\n  <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\r\n    <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n      <ng-template #start>\r\n        <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n      </ng-template>\r\n      <ng-template #end>\r\n        <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n          <div>\r\n            <ng-content select=\"[ACTIONS]\"></ng-content>\r\n          </div>\r\n          <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n        </div>\r\n      </ng-template>\r\n    </p-menubar>\r\n  </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$a.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
@@ -4421,27 +4477,28 @@ class SpiderlyButton extends BaseEntity {
     }
 }
 
-class TableFilter extends BaseEntity {
-    constructor({ filters, first, rows, sortField, sortOrder, multiSortMeta, additionalFilterIdInt, additionalFilterIdLong, } = {}) {
-        super('TableFilter');
-        this.filters = filters;
-        this.first = first;
-        this.rows = rows;
-        this.sortField = sortField;
-        this.sortOrder = sortOrder;
-        this.multiSortMeta = multiSortMeta;
-        this.additionalFilterIdInt = additionalFilterIdInt;
-        this.additionalFilterIdLong = additionalFilterIdLong;
-    }
-}
-
-class TableFilterContext {
+/**
+ * Represents a filter rule used for querying or filtering data collections.
+ *
+ * The `FilterRule` class is a generic structure that defines a single filtering condition,
+ * including the match mode (comparison operator), the value to compare, and an optional logical operator.
+ *
+ * The allowed match modes are determined by the type parameter `T`:
+ * - For `string`: supports `Contains`, `StartsWith`, and `Equals`.
+ * - For `boolean`: supports `Equals`.
+ * - For `Date`: supports `Equals`, `GreaterThan`, and `LessThan`.
+ * - For `number`: supports `Equals`, `GreaterThan`, `LessThan`, and `In`.
+ * - For other types: allows any value from `MatchModeCodes`.
+ *
+ * @template T The type of the value to filter by.
+ */
+class FilterRule {
 }
 
-class TableFilterSortMeta {
+class FilterSortMeta {
 }
 
-class TableResponse {
+class PaginatedResult {
 }
 
 var LoginVerificationResultStatusCodes;
@@ -4685,5 +4742,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiSecurityService, AppSidebarComponent, AuthBaseService, AuthGuard, AuthResult, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormCopy, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigBaseService, ExternalProvider, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, JwtAuthResult, LastMenuIconIndexClicked, LayoutBaseService, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationResultStatusCodes, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, MimeTypes, Namebook, NotAuthGuard, NotFoundComponent, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, Permission, PermissionSaveBody, PrimengOption, RefreshToken, RefreshTokenRequest, Registration, RegistrationComponent, RegistrationVerificationComponent, RegistrationVerificationResult, RegistrationVerificationResultStatusCodes, RegistrationVerificationToken, RequiredComponent, Role, RoleBaseDetailsComponent, RoleMainUIForm, RolePermission, RolePermissionSaveBody, RoleSaveBody, RowClickEvent, SecurityPermissionCodes, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButton, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorpickComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoFallbackStrategy, SpiderlyTranslocoLoader, SpiderlyTranslocoMissingHandler, SpiderlyTranslocoModule, TableFilter, TableFilterContext, TableFilterSortMeta, TableResponse, TopBarComponent, TranslateLabelsAbstractService, User, UserRole, UserRoleSaveBody, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstLetter, deleteAction, exportListToExcel, getControl, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isImageFileType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, nameOf, nameof, provideSpiderlyCore, provideSpiderlyTransloco, pushAction, selectedTab, singleOrDefault, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { Action, AllClickEvent, ApiSecurityService, AppSidebarComponent, AuthBaseService, AuthGuard, AuthResult, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormCopy, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigBaseService, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, JwtAuthResult, LastMenuIconIndexClicked, LayoutBaseService, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationResultStatusCodes, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, MimeTypes, Namebook, NotAuthGuard, NotFoundComponent, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, Permission, PermissionSaveBody, PrimengOption, RefreshToken, RefreshTokenRequest, Registration, RegistrationComponent, RegistrationVerificationComponent, RegistrationVerificationResult, RegistrationVerificationResultStatusCodes, RegistrationVerificationToken, RequiredComponent, Role, RoleBaseDetailsComponent, RoleMainUIForm, RolePermission, RolePermissionSaveBody, RoleSaveBody, RowClickEvent, SecurityPermissionCodes, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButton, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoFallbackStrategy, SpiderlyTranslocoLoader, SpiderlyTranslocoMissingHandler, SpiderlyTranslocoModule, TopBarComponent, TranslateLabelsAbstractService, UserBase, UserRole, UserRoleSaveBody, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstLetter, deleteAction, exportListToExcel, getControl, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isImageFileType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, nameOf, nameof, provideSpiderlyCore, provideSpiderlyTransloco, pushAction, selectedTab, singleOrDefault, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map