spiderly 19.0.2 → 19.0.4

package/fesm2022/spiderly.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, makeEnvironmentProviders, APP_INITIALIZER, ErrorHandler, NgModule, importProvidersFrom, Input, Component, EventEmitter, Output, ViewChild, LOCALE_ID, Inject, HostBinding, inject } 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 * 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';
@@ -11,78 +11,63 @@ import { HttpParams, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angul
 import * as i3$1 from '@abacritt/angularx-social-login';
 import * as i1$2 from '@jsverse/transloco';
 import { provideTransloco, TranslocoModule, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import * as i1$3 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i5$2 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
-import { DialogModule } from 'primeng/dialog';
-import * as i3$3 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
-import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i4$2 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import * as i4$5 from 'primeng/textarea';
-import { TextareaModule } from 'primeng/textarea';
-import * as i4$4 from 'primeng/multiselect';
-import { MultiSelectModule } from 'primeng/multiselect';
-import * as i5$5 from 'primeng/password';
-import { PasswordModule } from 'primeng/password';
-import * as i7 from 'primeng/table';
-import { TableModule } from 'primeng/table';
-import { ToastModule } from 'primeng/toast';
-import * as i4 from 'primeng/tooltip';
-import { TooltipModule, Tooltip } from 'primeng/tooltip';
-import * as i2$1 from 'primeng/confirmdialog';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { SidebarModule } from 'primeng/sidebar';
-import * as i8$1 from 'primeng/badge';
-import { BadgeModule } from 'primeng/badge';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i8 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
 import * as i1$6 from 'primeng/dynamicdialog';
 import { DialogService } from 'primeng/dynamicdialog';
-import * as i3$4 from 'primeng/panel';
-import { PanelModule } from 'primeng/panel';
-import * as i4$1 from 'primeng/autocomplete';
-import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i9 from 'primeng/avatar';
-import { AvatarModule } from 'primeng/avatar';
-import { AvatarGroupModule } from 'primeng/avatargroup';
-import { ProgressBarModule } from 'primeng/progressbar';
-import { DividerModule } from 'primeng/divider';
-import * as i5$4 from 'primeng/inputnumber';
-import { InputNumberModule } from 'primeng/inputnumber';
-import { OverlayPanelModule } from 'primeng/overlaypanel';
-import * as i4$6 from 'primeng/menu';
-import { MenuModule } from 'primeng/menu';
-import { PaginatorModule } from 'primeng/paginator';
-import * as i5$3 from 'primeng/editor';
-import { EditorModule, Editor } from 'primeng/editor';
-import * as i5 from 'primeng/inputgroup';
-import { InputGroupModule } from 'primeng/inputgroup';
-import * as i6 from 'primeng/inputgroupaddon';
-import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
-import { TimelineModule } from 'primeng/timeline';
-import { CardModule } from 'primeng/card';
-import * as i6$1 from 'primeng/colorpicker';
-import { ColorPickerModule } from 'primeng/colorpicker';
-import * as i4$3 from 'primeng/fileupload';
-import { FileUploadModule } from 'primeng/fileupload';
-import { DataViewModule } from 'primeng/dataview';
-import * as i5$1 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
 import { provideTranslocoPreloadLangs } from '@jsverse/transloco-preload-langs';
+import * as i4 from 'primeng/autocomplete';
+import { AutoCompleteModule } from 'primeng/autocomplete';
 import * as i2 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import * as i3$2 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, FormControl, FormGroup, FormArray } from '@angular/forms';
+import { FormControl, FormGroup, FormArray, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import * as i5 from 'primeng/tooltip';
+import { TooltipModule, Tooltip } from 'primeng/tooltip';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i4$1 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
+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 i3$3 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i4$4 from 'primeng/editor';
+import { EditorModule, Editor } from 'primeng/editor';
+import * as i3$4 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
 import * as FileSaver from 'file-saver';
+import * as i1$3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
 import * as i1$5 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
+import * as i4$5 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i4$6 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
+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 { PanelModule } from 'primeng/panel';
 import * as i1$4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
+import * as i9 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i2$2 from 'primeng/confirmdialog';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { trigger, state, transition, style, animate } from '@angular/animations';
+import * as i7 from 'primeng/avatar';
+import { AvatarModule } from 'primeng/avatar';
+import * as i8 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
+import * as i3$5 from 'primeng/menubar';
+import { MenubarModule } from 'primeng/menubar';
 import { NgxSpinnerService } from 'ngx-spinner';
 
 function authInitializer(authService) {
@@ -93,21 +78,9 @@ function authInitializer(authService) {
 
 class BaseEntity {
     constructor(typeName) {
-        this.pipedProperties = [];
         this.typeName = typeName;
     }
 }
-class PipedProperty {
-    constructor(p, c) {
-        this.pipe = p;
-        this.control = c;
-    }
-}
-var PropertyPipes;
-(function (PropertyPipes) {
-    PropertyPipes[PropertyPipes["IntegerPipe"] = 0] = "IntegerPipe";
-    PropertyPipes[PropertyPipes["DecimalPipe"] = 1] = "DecimalPipe";
-})(PropertyPipes || (PropertyPipes = {}));
 
 class User extends BaseEntity {
     constructor({ id, email, } = {}) {
@@ -304,6 +277,7 @@ class ConfigBaseService {
             headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
             params: new HttpParams().set('X-Skip-Spinner', 'true')
         };
+        this.logoPath = 'assets/images/logo/logo.svg';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigBaseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigBaseService, providedIn: 'root' }); }
@@ -444,7 +418,7 @@ class AuthBaseService {
         };
         this.initCompanyAuthDialogDetails = () => {
             return of(new InitCompanyAuthDialogDetails({
-                image: `assets/images/logo/logo.svg`,
+                image: this.config.logoPath,
                 companyName: this.config.companyName,
             }));
         };
@@ -694,6 +668,7 @@ function provideSpiderlyCore() {
     return makeEnvironmentProviders([
         MessageService,
         ConfirmationService,
+        DialogService,
         {
             provide: APP_INITIALIZER,
             useFactory: authInitializer,
@@ -707,239 +682,6 @@ function provideSpiderlyCore() {
     ]);
 }
 
-class PrimengModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PrimengModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PrimengModule, imports: [TableModule,
-            ButtonModule,
-            MultiSelectModule,
-            InputTextModule,
-            TextareaModule,
-            SelectModule,
-            TooltipModule,
-            InputSwitchModule,
-            DialogModule,
-            DatePickerModule,
-            CheckboxModule,
-            PasswordModule,
-            ToastModule,
-            ConfirmDialogModule,
-            SidebarModule,
-            BadgeModule,
-            RadioButtonModule,
-            RippleModule,
-            PanelModule,
-            AutoCompleteModule,
-            AvatarModule,
-            AvatarGroupModule,
-            ProgressBarModule,
-            DividerModule,
-            InputNumberModule,
-            OverlayPanelModule,
-            MenuModule,
-            PaginatorModule,
-            EditorModule,
-            InputGroupModule,
-            InputGroupAddonModule,
-            TimelineModule,
-            CardModule,
-            ColorPickerModule,
-            FileUploadModule,
-            DataViewModule], exports: [TableModule,
-            ButtonModule,
-            MultiSelectModule,
-            InputTextModule,
-            TextareaModule,
-            SelectModule,
-            TooltipModule,
-            InputSwitchModule,
-            DialogModule,
-            DatePickerModule,
-            CheckboxModule,
-            PasswordModule,
-            ToastModule,
-            ConfirmDialogModule,
-            SidebarModule,
-            BadgeModule,
-            RadioButtonModule,
-            RippleModule,
-            PanelModule,
-            AutoCompleteModule,
-            AvatarModule,
-            AvatarGroupModule,
-            ProgressBarModule,
-            DividerModule,
-            InputNumberModule,
-            OverlayPanelModule,
-            MenuModule,
-            PaginatorModule,
-            EditorModule,
-            InputGroupModule,
-            InputGroupAddonModule,
-            TimelineModule,
-            CardModule,
-            ColorPickerModule,
-            FileUploadModule,
-            DataViewModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PrimengModule, providers: [
-            DialogService,
-        ], imports: [TableModule,
-            ButtonModule,
-            MultiSelectModule,
-            InputTextModule,
-            TextareaModule,
-            SelectModule,
-            TooltipModule,
-            InputSwitchModule,
-            DialogModule,
-            DatePickerModule,
-            CheckboxModule,
-            PasswordModule,
-            ToastModule,
-            ConfirmDialogModule,
-            SidebarModule,
-            BadgeModule,
-            RadioButtonModule,
-            RippleModule,
-            PanelModule,
-            AutoCompleteModule,
-            AvatarModule,
-            AvatarGroupModule,
-            ProgressBarModule,
-            DividerModule,
-            InputNumberModule,
-            OverlayPanelModule,
-            MenuModule,
-            PaginatorModule,
-            EditorModule,
-            InputGroupModule,
-            InputGroupAddonModule,
-            TimelineModule,
-            CardModule,
-            ColorPickerModule,
-            FileUploadModule,
-            DataViewModule, TableModule,
-            ButtonModule,
-            MultiSelectModule,
-            InputTextModule,
-            TextareaModule,
-            SelectModule,
-            TooltipModule,
-            InputSwitchModule,
-            DialogModule,
-            DatePickerModule,
-            CheckboxModule,
-            PasswordModule,
-            ToastModule,
-            ConfirmDialogModule,
-            SidebarModule,
-            BadgeModule,
-            RadioButtonModule,
-            RippleModule,
-            PanelModule,
-            AutoCompleteModule,
-            AvatarModule,
-            AvatarGroupModule,
-            ProgressBarModule,
-            DividerModule,
-            InputNumberModule,
-            OverlayPanelModule,
-            MenuModule,
-            PaginatorModule,
-            EditorModule,
-            InputGroupModule,
-            InputGroupAddonModule,
-            TimelineModule,
-            CardModule,
-            ColorPickerModule,
-            FileUploadModule,
-            DataViewModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PrimengModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        TableModule,
-                        ButtonModule,
-                        MultiSelectModule,
-                        InputTextModule,
-                        TextareaModule,
-                        SelectModule,
-                        TooltipModule,
-                        InputSwitchModule,
-                        DialogModule,
-                        DatePickerModule,
-                        CheckboxModule,
-                        PasswordModule,
-                        ToastModule,
-                        ConfirmDialogModule,
-                        SidebarModule,
-                        BadgeModule,
-                        RadioButtonModule,
-                        RippleModule,
-                        PanelModule,
-                        AutoCompleteModule,
-                        AvatarModule,
-                        AvatarGroupModule,
-                        ProgressBarModule,
-                        DividerModule,
-                        InputNumberModule,
-                        OverlayPanelModule,
-                        MenuModule,
-                        PaginatorModule,
-                        EditorModule,
-                        InputGroupModule,
-                        InputGroupAddonModule,
-                        TimelineModule,
-                        CardModule,
-                        ColorPickerModule,
-                        FileUploadModule,
-                        DataViewModule,
-                    ],
-                    exports: [
-                        TableModule,
-                        ButtonModule,
-                        MultiSelectModule,
-                        InputTextModule,
-                        TextareaModule,
-                        SelectModule,
-                        TooltipModule,
-                        InputSwitchModule,
-                        DialogModule,
-                        DatePickerModule,
-                        CheckboxModule,
-                        PasswordModule,
-                        ToastModule,
-                        ConfirmDialogModule,
-                        SidebarModule,
-                        BadgeModule,
-                        RadioButtonModule,
-                        RippleModule,
-                        PanelModule,
-                        AutoCompleteModule,
-                        AvatarModule,
-                        AvatarGroupModule,
-                        ProgressBarModule,
-                        DividerModule,
-                        InputNumberModule,
-                        OverlayPanelModule,
-                        MenuModule,
-                        PaginatorModule,
-                        EditorModule,
-                        InputGroupModule,
-                        InputGroupAddonModule,
-                        TimelineModule,
-                        CardModule,
-                        ColorPickerModule,
-                        FileUploadModule,
-                        DataViewModule
-                    ],
-                    declarations: [],
-                    providers: [
-                        DialogService,
-                    ],
-                }]
-        }] });
-
 class SpiderlyTranslocoLoader {
     constructor(http) {
         this.http = http;
@@ -1012,9 +754,6 @@ class BaseControl {
     ngOnInit() {
         if (this.control != null && this.disabled == true)
             this.control.disable();
-        // TODO FT: Delete if you don't need
-        // if(this.control?.validator?.hasNotEmptyRule == true) // FT HACK: Be carefull with this name, if you change it in generator you need to change it here also
-        //   this.control.required = true;
         this.errorMessageTooltipEvent = window.innerWidth > 1000 ? 'hover' : 'focus';
     }
     ngAfterViewInit() {
@@ -1024,7 +763,7 @@ class BaseControl {
     }
     getValidationErrrorMessages() {
         if (this.control?.errors && this.control?.dirty) {
-            // FT: it should always be one error message for single form control, 
+            // It should always be one error message for single form control, 
             // also i don't need to reassign it to null because it will be shown only when control.valid == false
             return this.control.errors['_'];
         }
@@ -1114,20 +853,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{ selector: 'required', standalone: true, template: "<span style=\"color: red; margin-left: 4px;\">*</span>" }]
         }], ctorParameters: () => [] });
 
-class SpiderlyAutocompleteComponent extends BaseAutocompleteControl {
+// It's made like generic type because of <number>, <string> etc. not to put class like User.
+class SpiderlyFormControl extends FormControl {
+    constructor(value, opts = null, required = false) {
+        opts = opts ?? { updateOn: 'blur' };
+        super(value, opts);
+        this.required = required;
+    }
+    getRawValue() {
+        return super.getRawValue();
+    }
+    get validator() {
+        return this._spiderlyValidator;
+    }
+    set validator(validator) {
+        this._spiderlyValidator = validator;
+        this.setValidators(validator);
+    }
+}
+class SpiderlyFormGroup extends FormGroup {
+    constructor(controls) {
+        super(controls);
+        this.initSaveBody = () => null;
+        this.controlNamesFromHtml = [];
+    }
+    getRawValue() {
+        return super.getRawValue();
+    }
+}
+class SpiderlyFormArray extends FormArray {
+    constructor() {
+        super(...arguments);
+        this.controlNamesFromHtml = [];
+    }
+}
+
+class ValidatorAbstractService {
     constructor(translocoService) {
+        this.translocoService = translocoService;
+        this.isArrayEmpty = (control) => {
+            const validator = () => {
+                const value = control.value;
+                const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
+                const arrayValid = notEmptyRule;
+                return arrayValid ? null : { _: this.translocoService.translate('NotEmpty') };
+            };
+            validator.hasNotEmptyRule = true;
+            control.required = true;
+            return validator;
+        };
+        this.notEmpty = (control) => {
+            const validator = () => {
+                const value = control.value;
+                const notEmptyRule = typeof value !== 'undefined' && value !== null && value !== '';
+                const arrayValid = notEmptyRule;
+                return arrayValid ? null : { _: this.translocoService.translate('NotEmpty') };
+            };
+            validator.hasNotEmptyRule = true;
+            control.required = true;
+            control.validator = validator;
+            control.updateValueAndValidity();
+        };
+        this.isFormArrayEmpty = (control) => {
+            const validator = () => {
+                const value = control;
+                const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
+                const arrayValid = notEmptyRule;
+                return arrayValid ? null : { _: this.translocoService.translate('NotEmpty') };
+            };
+            validator.hasNotEmptyRule = true;
+            control.required = true;
+            return validator;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ValidatorAbstractService, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ValidatorAbstractService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ValidatorAbstractService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$2.TranslocoService }] });
+
+class SpiderlyAutocompleteComponent extends BaseAutocompleteControl {
+    constructor(translocoService, validatorService) {
         super(translocoService);
         this.translocoService = translocoService;
+        this.validatorService = validatorService;
         this.appendTo = 'body';
         this.showClear = true;
+        this.helperFormControl = new SpiderlyFormControl(null, { updateOn: 'change' });
     }
     ngOnInit() {
         super.ngOnInit();
-        if (this.options == null && this.control.value != null) {
-            this.options = [
-                { label: this.displayName, code: this.control.value }
-            ];
-        }
+        this.helperFormControl.label = this.control.label;
+        this.validatorService.setValidator(this.helperFormControl, this.control.parentClassName);
+        if (this.control.value != null)
+            this.helperFormControl.setValue({ label: this.displayName, code: this.control.value });
         if (this.emptyMessage == null) {
             this.emptyMessage = this.translocoService.translate('EmptyMessage');
         }
@@ -1136,21 +959,32 @@ class SpiderlyAutocompleteComponent extends BaseAutocompleteControl {
         this.onTextInput.next(event);
     }
     select(event) {
+        this.control.setValue(event.value.code);
+    }
+    clear() {
+        this.control.setValue(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyAutocompleteComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyAutocompleteComponent, isStandalone: true, selector: "spiderly-autocomplete", inputs: { appendTo: "appendTo", showClear: "showClear", emptyMessage: "emptyMessage", displayName: "displayName" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\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  \r\n    <p-inputgroup>\r\n      <p-autocomplete\r\n      *ngIf=\"control\"\r\n      [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n      [id]=\"label\"\r\n      [formControl]=\"control\"\r\n      [placeholder]=\"placeholder\"\r\n      [suggestions]=\"options\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"code\"\r\n      (completeMethod)=\"search($event)\"\r\n      [forceSelection]=\"true\"\r\n      [dropdown]=\"false\"\r\n      [showClear]=\"showClear\"\r\n      (onHide)=\"dropdownMarkAsDirty()\"\r\n      (onSelect)=\"select($event)\"\r\n      [completeOnFocus]=\"true\"\r\n      [style]=\"{'width': '100%'}\"\r\n      [fluid]=\"true\"\r\n      [appendTo]=\"appendTo\"\r\n      [emptyMessage]=\"emptyMessage\"\r\n      [lazy]=\"true\"\r\n      />\r\n      <p-inputgroup-addon *ngIf=\"showAddon\" (click)=\"addonClick()\" [style]=\"{'cursor': 'pointer', 'background-color': 'var(--p-primary-color)', 'border-color': 'var(--p-primary-color)'}\">\r\n        <i class=\"{{addonIcon}}\" style=\"color: #fff;\"></i>\r\n      </p-inputgroup-addon>\r\n    </p-inputgroup>\r\n  </div>\r\n</ng-container>", 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: PrimengModule }, { kind: "directive", type: i4.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: i4$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "component", type: i6.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    autocompleteMarkAsDirty() {
+        this.dropdownMarkAsDirty();
+        this.helperFormControl.markAsDirty();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyAutocompleteComponent, deps: [{ token: i1$2.TranslocoService }, { token: ValidatorAbstractService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyAutocompleteComponent, isStandalone: true, selector: "spiderly-autocomplete", inputs: { appendTo: "appendTo", showClear: "showClear", emptyMessage: "emptyMessage", displayName: "displayName" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-column gap-2\">\r\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"> <!-- By passing an empty string we remove the label entirely -->\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n  \r\n    <!-- Don't support p-inputgroup -->\r\n    <p-autocomplete\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [id]=\"label\"\r\n    [formControl]=\"helperFormControl\"\r\n    [placeholder]=\"placeholder\"\r\n    [suggestions]=\"options\"\r\n    (completeMethod)=\"search($event)\"\r\n    [forceSelection]=\"true\"\r\n    [dropdown]=\"false\"\r\n    [showClear]=\"showClear\"\r\n    (onHide)=\"autocompleteMarkAsDirty()\"\r\n    (onSelect)=\"select($event)\"\r\n    (onClear)=\"clear()\"\r\n    [completeOnFocus]=\"true\"\r\n    [fluid]=\"true\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [appendTo]=\"appendTo\"\r\n    [emptyMessage]=\"emptyMessage\"\r\n    [lazy]=\"true\"\r\n    ></p-autocomplete>\r\n  </div>\r\n</ng-container>", 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: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: InputGroupModule }, { 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" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spiderly-autocomplete', imports: [
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        AutoCompleteModule,
+                        InputGroupAddonModule,
+                        InputGroupModule,
+                        TooltipModule,
                         CommonModule,
                         RequiredComponent,
                         TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\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  \r\n    <p-inputgroup>\r\n      <p-autocomplete\r\n      *ngIf=\"control\"\r\n      [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n      [id]=\"label\"\r\n      [formControl]=\"control\"\r\n      [placeholder]=\"placeholder\"\r\n      [suggestions]=\"options\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"code\"\r\n      (completeMethod)=\"search($event)\"\r\n      [forceSelection]=\"true\"\r\n      [dropdown]=\"false\"\r\n      [showClear]=\"showClear\"\r\n      (onHide)=\"dropdownMarkAsDirty()\"\r\n      (onSelect)=\"select($event)\"\r\n      [completeOnFocus]=\"true\"\r\n      [style]=\"{'width': '100%'}\"\r\n      [fluid]=\"true\"\r\n      [appendTo]=\"appendTo\"\r\n      [emptyMessage]=\"emptyMessage\"\r\n      [lazy]=\"true\"\r\n      />\r\n      <p-inputgroup-addon *ngIf=\"showAddon\" (click)=\"addonClick()\" [style]=\"{'cursor': 'pointer', 'background-color': 'var(--p-primary-color)', 'border-color': 'var(--p-primary-color)'}\">\r\n        <i class=\"{{addonIcon}}\" style=\"color: #fff;\"></i>\r\n      </p-inputgroup-addon>\r\n    </p-inputgroup>\r\n  </div>\r\n</ng-container>" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { appendTo: [{
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-column gap-2\">\r\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"> <!-- By passing an empty string we remove the label entirely -->\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n  \r\n    <!-- Don't support p-inputgroup -->\r\n    <p-autocomplete\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [id]=\"label\"\r\n    [formControl]=\"helperFormControl\"\r\n    [placeholder]=\"placeholder\"\r\n    [suggestions]=\"options\"\r\n    (completeMethod)=\"search($event)\"\r\n    [forceSelection]=\"true\"\r\n    [dropdown]=\"false\"\r\n    [showClear]=\"showClear\"\r\n    (onHide)=\"autocompleteMarkAsDirty()\"\r\n    (onSelect)=\"select($event)\"\r\n    (onClear)=\"clear()\"\r\n    [completeOnFocus]=\"true\"\r\n    [fluid]=\"true\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [appendTo]=\"appendTo\"\r\n    [emptyMessage]=\"emptyMessage\"\r\n    [lazy]=\"true\"\r\n    ></p-autocomplete>\r\n  </div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1$2.TranslocoService }, { type: ValidatorAbstractService }], propDecorators: { appendTo: [{
                 type: Input
             }], showClear: [{
                 type: Input
@@ -1172,7 +1006,7 @@ class SpiderlyCalendarComponent extends BaseControl {
     setDate(event) {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCalendarComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCalendarComponent, isStandalone: true, selector: "spiderly-calendar", inputs: { showTime: "showTime" }, usesInheritance: true, ngImport: i0, template: "<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        <!-- 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    <p-datepicker\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    (onBlur)=\"control.markAsDirty()\"\r\n    dateFormat=\"dd.mm.yy.\"\r\n    iconDisplay=\"input\" \r\n    [showIcon]=\"true\" \r\n    [showTime]=\"showTime\"\r\n    (onSelect)=\"setDate($event)\"\r\n    appendTo=\"body\"\r\n    [fluid]=\"true\"\r\n    />\r\n</div>\r\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: PrimengModule }, { kind: "directive", type: i4.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: i5$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCalendarComponent, isStandalone: true, selector: "spiderly-calendar", inputs: { showTime: "showTime" }, usesInheritance: true, ngImport: i0, template: "<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        <!-- 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    <p-datepicker\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    (onBlur)=\"control.markAsDirty()\"\r\n    dateFormat=\"dd.mm.yy.\"\r\n    iconDisplay=\"input\" \r\n    [showIcon]=\"true\" \r\n    [showTime]=\"showTime\"\r\n    (onSelect)=\"setDate($event)\"\r\n    appendTo=\"body\"\r\n    [fluid]=\"true\"\r\n    />\r\n</div>\r\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: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "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: SpiderlyCalendarComponent, decorators: [{
             type: Component,
@@ -1180,7 +1014,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        DatePickerModule,
+                        TooltipModule,
                         RequiredComponent
                     ], template: "<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        <!-- 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    <p-datepicker\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    (onBlur)=\"control.markAsDirty()\"\r\n    dateFormat=\"dd.mm.yy.\"\r\n    iconDisplay=\"input\" \r\n    [showIcon]=\"true\" \r\n    [showTime]=\"showTime\"\r\n    (onSelect)=\"setDate($event)\"\r\n    appendTo=\"body\"\r\n    [fluid]=\"true\"\r\n    />\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { showTime: [{
@@ -1201,7 +1036,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" }, 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 class=\"p-inputgroup p-fluid\" style=\"margin-top: 0.5rem;\">\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        />\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.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: PrimengModule }, { kind: "directive", type: i4.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: i5$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: "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" }, 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 class=\"p-inputgroup p-fluid\" style=\"margin-top: 0.5rem;\">\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        />\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.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,
@@ -1209,7 +1044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        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 class=\"p-inputgroup p-fluid\" style=\"margin-top: 0.5rem;\">\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        />\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { fakeLabel: [{
@@ -1234,7 +1070,7 @@ class SpiderlyColorpickComponent extends BaseControl {
         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: PrimengModule }, { kind: "directive", type: i4$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i4.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: i6$1.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: "component", type: RequiredComponent, selector: "required" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorpickComponent, decorators: [{
             type: Component,
@@ -1242,7 +1078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        ColorPickerModule,
+                        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 }] });
@@ -1260,16 +1097,17 @@ class SpiderlyDropdownComponent extends BaseDropdownControl {
         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: PrimengModule }, { 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: "directive", type: i4.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", 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,
             args: [{ selector: 'spiderly-dropdown', imports: [
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        SelectModule,
+                        TooltipModule,
                         CommonModule,
-                        RequiredComponent
+                        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: [{
                 type: Output
@@ -1301,7 +1139,7 @@ class SpiderlyEditorComponent extends BaseControl {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyEditorComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }, { propertyName: "tooltip", first: true, predicate: Tooltip, descendants: true }], 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\r\n  <!-- Disable doesn't work on this control -->\r\n  <p-editor\r\n  *ngIf=\"control\"\r\n  [formControl]=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n  [readonly]=\"control.disabled\"\r\n  [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\r\n  [id]=\"control.label\"\r\n  [placeholder]=\"placeholder\"\r\n  (click)=\"onClick()\"\r\n  [style]=\"{ height: '320px' }\"\r\n  ></p-editor>\r\n\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.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: PrimengModule }, { kind: "directive", type: i4.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: i5$3.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }, { propertyName: "tooltip", first: true, predicate: Tooltip, descendants: true }], 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\r\n  <!-- Disable doesn't work on this control -->\r\n  <p-editor\r\n  *ngIf=\"control\"\r\n  [formControl]=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n  [readonly]=\"control.disabled\"\r\n  [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\r\n  [id]=\"control.label\"\r\n  [placeholder]=\"placeholder\"\r\n  (click)=\"onClick()\"\r\n  [style]=\"{ height: '320px' }\"\r\n  ></p-editor>\r\n\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.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: EditorModule }, { kind: "component", type: i4$4.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { 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: SpiderlyEditorComponent, decorators: [{
             type: Component,
@@ -1309,7 +1147,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        EditorModule,
+                        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\r\n  <!-- Disable doesn't work on this control -->\r\n  <p-editor\r\n  *ngIf=\"control\"\r\n  [formControl]=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n  [readonly]=\"control.disabled\"\r\n  [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\r\n  [id]=\"control.label\"\r\n  [placeholder]=\"placeholder\"\r\n  (click)=\"onClick()\"\r\n  [style]=\"{ height: '320px' }\"\r\n  ></p-editor>\r\n\r\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { editor: [{
@@ -1674,7 +1513,7 @@ class SpiderlyFileComponent extends BaseControl {
         return isExcelFileType(mimeType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"flex flex-column gap-2\">\r\n        <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n            <label>{{getTranslatedLabel()}}</label>\r\n            <!-- FT: It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\r\n            <required *ngIf=\"control?.required || required\"></required>\r\n        </div>\r\n\r\n        <p-fileUpload \r\n        [files]=\"files\" \r\n        [disabled]=\"disabled\" \r\n        [name]=\"control?.label ?? label\" \r\n        [multiple]=\"multiple\" \r\n        [accept]=\"acceptedFileTypesCommaSeparated\" \r\n        [maxFileSize]=\"1000000\" \r\n        (onSelect)=\"filesSelected($event)\"\r\n        [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\r\n        >\r\n            <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\r\n                <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n                    <div class=\"flex gap-2\">\r\n                        <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\r\n                        <!-- <p-button (onClick)=\"clearCallback()\" icon=\"pi pi-times\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" [disabled]=\"!files || files.length === 0\" /> -->\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\r\n                <div *ngIf=\"files?.length > 0\">\r\n                    <div class=\"flex justify-content-center p-0 gap-5\">\r\n                        <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\r\n                            <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\r\n                                <img role=\"presentation\" [src]=\"file.objectURL\"/>\r\n                            </div>\r\n                            <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\r\n                                <div class=\"excel-details\">\r\n                                    <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\r\n                                    <span class=\"file-name\">{{ file.name }}</span>\r\n                                </div>\r\n                            </div>\r\n                            <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"file\"> </ng-template>\r\n            <ng-template pTemplate=\"empty\">\r\n                <div class=\"flex align-items-center justify-content-center flex-column\">\r\n                    <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n                    <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\r\n                </div>\r\n            </ng-template>\r\n        </p-fileUpload>\r\n    </div>\r\n</ng-container>", dependencies: [{ 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PrimengModule }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$3.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"flex flex-column gap-2\">\r\n        <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n            <label>{{getTranslatedLabel()}}</label>\r\n            <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\r\n            <required *ngIf=\"control?.required || required\"></required>\r\n        </div>\r\n\r\n        <p-fileUpload \r\n        [files]=\"files\" \r\n        [disabled]=\"disabled\" \r\n        [name]=\"control?.label ?? label\" \r\n        [multiple]=\"multiple\" \r\n        [accept]=\"acceptedFileTypesCommaSeparated\" \r\n        [maxFileSize]=\"1000000\" \r\n        (onSelect)=\"filesSelected($event)\"\r\n        [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\r\n        >\r\n            <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\r\n                <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n                    <div class=\"flex gap-2\">\r\n                        <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\r\n                <div *ngIf=\"files?.length > 0\">\r\n                    <div class=\"flex justify-content-center p-0 gap-5\">\r\n                        <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\r\n                            <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\r\n                                <img role=\"presentation\" [src]=\"file.objectURL\"/>\r\n                            </div>\r\n                            <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\r\n                                <div class=\"excel-details\">\r\n                                    <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\r\n                                    <span class=\"file-name\">{{ file.name }}</span>\r\n                                </div>\r\n                            </div>\r\n                            <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"file\"> </ng-template>\r\n            <ng-template pTemplate=\"empty\">\r\n                <div class=\"flex align-items-center justify-content-center flex-column\">\r\n                    <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"></i>\r\n                    <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\r\n                </div>\r\n            </ng-template>\r\n        </p-fileUpload>\r\n    </div>\r\n</ng-container>", dependencies: [{ 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$4.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, decorators: [{
             type: Component,
@@ -1682,11 +1521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        FileUploadModule,
                         RequiredComponent,
                         SpiderlyButtonComponent,
                         TranslocoDirective
-                    ], template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"flex flex-column gap-2\">\r\n        <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n            <label>{{getTranslatedLabel()}}</label>\r\n            <!-- FT: It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\r\n            <required *ngIf=\"control?.required || required\"></required>\r\n        </div>\r\n\r\n        <p-fileUpload \r\n        [files]=\"files\" \r\n        [disabled]=\"disabled\" \r\n        [name]=\"control?.label ?? label\" \r\n        [multiple]=\"multiple\" \r\n        [accept]=\"acceptedFileTypesCommaSeparated\" \r\n        [maxFileSize]=\"1000000\" \r\n        (onSelect)=\"filesSelected($event)\"\r\n        [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\r\n        >\r\n            <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\r\n                <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n                    <div class=\"flex gap-2\">\r\n                        <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\r\n                        <!-- <p-button (onClick)=\"clearCallback()\" icon=\"pi pi-times\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" [disabled]=\"!files || files.length === 0\" /> -->\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\r\n                <div *ngIf=\"files?.length > 0\">\r\n                    <div class=\"flex justify-content-center p-0 gap-5\">\r\n                        <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\r\n                            <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\r\n                                <img role=\"presentation\" [src]=\"file.objectURL\"/>\r\n                            </div>\r\n                            <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\r\n                                <div class=\"excel-details\">\r\n                                    <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\r\n                                    <span class=\"file-name\">{{ file.name }}</span>\r\n                                </div>\r\n                            </div>\r\n                            <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"file\"> </ng-template>\r\n            <ng-template pTemplate=\"empty\">\r\n                <div class=\"flex align-items-center justify-content-center flex-column\">\r\n                    <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n                    <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\r\n                </div>\r\n            </ng-template>\r\n        </p-fileUpload>\r\n    </div>\r\n</ng-container>" }]
+                    ], template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"flex flex-column gap-2\">\r\n        <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n            <label>{{getTranslatedLabel()}}</label>\r\n            <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\r\n            <required *ngIf=\"control?.required || required\"></required>\r\n        </div>\r\n\r\n        <p-fileUpload \r\n        [files]=\"files\" \r\n        [disabled]=\"disabled\" \r\n        [name]=\"control?.label ?? label\" \r\n        [multiple]=\"multiple\" \r\n        [accept]=\"acceptedFileTypesCommaSeparated\" \r\n        [maxFileSize]=\"1000000\" \r\n        (onSelect)=\"filesSelected($event)\"\r\n        [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\r\n        >\r\n            <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\r\n                <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n                    <div class=\"flex gap-2\">\r\n                        <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\r\n                <div *ngIf=\"files?.length > 0\">\r\n                    <div class=\"flex justify-content-center p-0 gap-5\">\r\n                        <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\r\n                            <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\r\n                                <img role=\"presentation\" [src]=\"file.objectURL\"/>\r\n                            </div>\r\n                            <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\r\n                                <div class=\"excel-details\">\r\n                                    <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\r\n                                    <span class=\"file-name\">{{ file.name }}</span>\r\n                                </div>\r\n                            </div>\r\n                            <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"file\"> </ng-template>\r\n            <ng-template pTemplate=\"empty\">\r\n                <div class=\"flex align-items-center justify-content-center flex-column\">\r\n                    <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"></i>\r\n                    <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\r\n                </div>\r\n            </ng-template>\r\n        </p-fileUpload>\r\n    </div>\r\n</ng-container>" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { onFileSelected: [{
                 type: Output
             }], onFileRemoved: [{
@@ -1724,14 +1563,15 @@ class SpiderlyMultiAutocompleteComponent extends BaseAutocompleteControl {
         this.onTextInput.next(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiAutocompleteComponent, isStandalone: true, selector: "spiderly-multiautocomplete", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-column gap-2\">\r\n    <div>\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n\r\n    <!-- Don't support p-inputgroup -->\r\n    <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\r\n    <p-autocomplete \r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [id]=\"label\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [suggestions]=\"options\"\r\n    (completeMethod)=\"search($event)\"\r\n    [forceSelection]=\"true\"\r\n    [multiple]=\"true\"\r\n    [dropdown]=\"false\"\r\n    [showClear]=\"true\"\r\n    (onHide)=\"dropdownMarkAsDirty()\"\r\n    [completeOnFocus]=\"true\"\r\n    dropdownIcon=\"pi pi-plus\"\r\n    [fluid]=\"true\"\r\n    [style]=\"{'width': '100%'}\"\r\n    >\r\n    </p-autocomplete>\r\n  </div>\r\n</ng-container>", 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: PrimengModule }, { kind: "directive", type: i4.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: i4$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiAutocompleteComponent, isStandalone: true, selector: "spiderly-multiautocomplete", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-column gap-2\">\r\n    <div>\r\n      <label>{{getTranslatedLabel()}}</label>\r\n      <required *ngIf=\"control?.required\"></required>\r\n    </div>\r\n\r\n    <!-- Don't support p-inputgroup -->\r\n    <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\r\n    <p-autocomplete \r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    [id]=\"label\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [suggestions]=\"options\"\r\n    (completeMethod)=\"search($event)\"\r\n    [forceSelection]=\"true\"\r\n    [multiple]=\"true\"\r\n    [dropdown]=\"false\"\r\n    [showClear]=\"true\"\r\n    (onHide)=\"dropdownMarkAsDirty()\"\r\n    [completeOnFocus]=\"true\"\r\n    dropdownIcon=\"pi pi-plus\"\r\n    [fluid]=\"true\"\r\n    [style]=\"{'width': '100%'}\"\r\n    >\r\n    </p-autocomplete>\r\n  </div>\r\n</ng-container>", 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: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "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" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spiderly-multiautocomplete', imports: [
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        AutoCompleteModule,
+                        TooltipModule,
                         CommonModule,
                         RequiredComponent,
                         TranslocoDirective,
@@ -1747,7 +1587,7 @@ class SpiderlyMultiSelectComponent extends BaseDropdownControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiSelectComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiSelectComponent, isStandalone: true, selector: "spiderly-multiselect", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n  <div>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-multiSelect\r\n  *ngIf=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n  [id]=\"label\"\r\n  [formControl]=\"control\"\r\n  [options]=\"options\"\r\n  optionLabel=\"label\"\r\n  optionValue=\"code\"\r\n  display=\"chip\"\r\n  [maxSelectedLabels]=\"20\"\r\n  [placeholder]=\"placeholder\"\r\n  [fluid]=\"true\"\r\n  appendTo=\"body\"\r\n  />\r\n  <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\r\n  <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\r\n    we need to use this and dropdown control only on the client -->\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.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: PrimengModule }, { kind: "component", type: i4$4.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: "directive", type: i4.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: SpiderlyMultiSelectComponent, isStandalone: true, selector: "spiderly-multiselect", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n  <div>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-multiSelect\r\n  *ngIf=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n  [id]=\"label\"\r\n  [formControl]=\"control\"\r\n  [options]=\"options\"\r\n  optionLabel=\"label\"\r\n  optionValue=\"code\"\r\n  display=\"chip\"\r\n  [maxSelectedLabels]=\"20\"\r\n  [placeholder]=\"placeholder\"\r\n  [fluid]=\"true\"\r\n  appendTo=\"body\"\r\n  />\r\n  <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\r\n  <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\r\n    we need to use this and dropdown control only on the client -->\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.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: 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: 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: SpiderlyMultiSelectComponent, decorators: [{
             type: Component,
@@ -1755,7 +1595,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        MultiSelectModule,
+                        TooltipModule,
                         RequiredComponent
                     ], template: "<div class=\"flex flex-column gap-2\">\r\n  <div>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-multiSelect\r\n  *ngIf=\"control\"\r\n  [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n  [id]=\"label\"\r\n  [formControl]=\"control\"\r\n  [options]=\"options\"\r\n  optionLabel=\"label\"\r\n  optionValue=\"code\"\r\n  display=\"chip\"\r\n  [maxSelectedLabels]=\"20\"\r\n  [placeholder]=\"placeholder\"\r\n  [fluid]=\"true\"\r\n  appendTo=\"body\"\r\n  />\r\n  <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\r\n  <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\r\n    we need to use this and dropdown control only on the client -->\r\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }] });
@@ -1771,7 +1612,7 @@ class SpiderlyNumberComponent extends BaseControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyNumberComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyNumberComponent, isStandalone: true, selector: "spiderly-number", inputs: { prefix: "prefix", showButtons: "showButtons", decimal: "decimal", maxFractionDigits: "maxFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"showLabel\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-inputNumber\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    (onBlur)=\"control.markAsDirty()\"\r\n    [prefix]=\"prefix\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [inputStyle]=\"{'width':'100%'}\"\r\n    [showButtons]=\"showButtons\"\r\n    buttonLayout=\"horizontal\"\r\n    [maxFractionDigits]=\"maxFractionDigits\"\r\n    />\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.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: PrimengModule }, { kind: "directive", type: i4.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: i5$4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyNumberComponent, isStandalone: true, selector: "spiderly-number", inputs: { prefix: "prefix", showButtons: "showButtons", decimal: "decimal", maxFractionDigits: "maxFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"showLabel\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-inputNumber\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    (onBlur)=\"control.markAsDirty()\"\r\n    [prefix]=\"prefix\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [inputStyle]=\"{'width':'100%'}\"\r\n    [showButtons]=\"showButtons\"\r\n    buttonLayout=\"horizontal\"\r\n    [maxFractionDigits]=\"maxFractionDigits\"\r\n    />\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.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: InputNumberModule }, { kind: "component", type: i4$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "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: SpiderlyNumberComponent, decorators: [{
             type: Component,
@@ -1779,7 +1620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        InputNumberModule,
+                        TooltipModule,
                         RequiredComponent
                     ], template: "<div class=\"flex flex-column gap-2\">\r\n  <div *ngIf=\"showLabel\">\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-inputNumber\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    (onBlur)=\"control.markAsDirty()\"\r\n    [prefix]=\"prefix\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [inputStyle]=\"{'width':'100%'}\"\r\n    [showButtons]=\"showButtons\"\r\n    buttonLayout=\"horizontal\"\r\n    [maxFractionDigits]=\"maxFractionDigits\"\r\n    />\r\n  </div>" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { prefix: [{
@@ -1802,7 +1644,7 @@ class SpiderlyPasswordComponent extends BaseControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPasswordComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPasswordComponent, isStandalone: true, selector: "spiderly-password", inputs: { showPasswordStrength: "showPasswordStrength" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n  <div>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-password\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    [toggleMask]=\"true\"\r\n    [feedback]=\"showPasswordStrength\"\r\n    (onBlur)=\"control?.markAsDirty()\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [inputStyle]=\"{'width':'100%'}\"\r\n    />\r\n  </div>\r\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: PrimengModule }, { kind: "directive", type: i4.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: i5$5.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPasswordComponent, isStandalone: true, selector: "spiderly-password", inputs: { showPasswordStrength: "showPasswordStrength" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n  <div>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-password\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    [toggleMask]=\"true\"\r\n    [feedback]=\"showPasswordStrength\"\r\n    (onBlur)=\"control?.markAsDirty()\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [inputStyle]=\"{'width':'100%'}\"\r\n    />\r\n  </div>\r\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: PasswordModule }, { kind: "component", type: i4$7.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant"], outputs: ["onFocus", "onBlur", "onClear"] }, { 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: SpiderlyPasswordComponent, decorators: [{
             type: Component,
@@ -1810,7 +1652,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        PasswordModule,
+                        TooltipModule,
                         RequiredComponent
                     ], template: "<div class=\"flex flex-column gap-2\">\r\n  <div>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <p-password\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    [toggleMask]=\"true\"\r\n    [feedback]=\"showPasswordStrength\"\r\n    (onBlur)=\"control?.markAsDirty()\"\r\n    [style]=\"{'width':'100%'}\"\r\n    [inputStyle]=\"{'width':'100%'}\"\r\n    />\r\n  </div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { showPasswordStrength: [{
@@ -1826,7 +1669,7 @@ class SpiderlyTextareaComponent extends BaseControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextareaComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextareaComponent, isStandalone: true, selector: "spiderly-textarea", 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>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <textarea\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    pTextarea\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    [autoResize]=\"true\"\r\n    [class]=\"control.disabled ? 'disabled' : ''\"\r\n    ></textarea>\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: PrimengModule }, { kind: "directive", type: i4$5.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "directive", type: i4.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: SpiderlyTextareaComponent, isStandalone: true, selector: "spiderly-textarea", 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>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <textarea\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    pTextarea\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    [autoResize]=\"true\"\r\n    [class]=\"control.disabled ? 'disabled' : ''\"\r\n    ></textarea>\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: TextareaModule }, { kind: "directive", type: i4$8.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { 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: SpiderlyTextareaComponent, decorators: [{
             type: Component,
@@ -1834,7 +1677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        TextareaModule,
+                        TooltipModule,
                         RequiredComponent
                     ], template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div class=\"flex flex-column gap-2\">\r\n  <div>\r\n    <label>{{getTranslatedLabel()}}</label>\r\n    <required *ngIf=\"control?.required\"></required>\r\n  </div>\r\n  <textarea\r\n    *ngIf=\"control\"\r\n    [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n    pTextarea\r\n    [formControl]=\"control\"\r\n    [id]=\"control.label\"\r\n    (blur)=\"control.markAsDirty()\"\r\n    [autoResize]=\"true\"\r\n    [class]=\"control.disabled ? 'disabled' : ''\"\r\n    ></textarea>\r\n  </div>" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }] });
@@ -1853,7 +1697,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: PrimengModule }, { kind: "directive", type: i4$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i4.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextboxComponent, decorators: [{
             type: Component,
@@ -1861,7 +1705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        PrimengModule,
+                        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 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>" }]
         }], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { showButton: [{
@@ -1893,11 +1738,11 @@ class PanelFooterComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PanelFooterComponent, isStandalone: false, selector: "panel-footer", ngImport: i0, template: "<div class=\"spiderly-panel-footer\">\r\n    <div class=\"buttons-wrapper\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <span class=\"p-text-secondary\">\r\n        <ng-content select=\"[footerRight]\"></ng-content>\r\n    </span>\r\n</div>", styles: [".spiderly-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #dee2e6;border-bottom-right-radius:var(--p-content-border-radius);border-bottom-left-radius:var(--p-content-border-radius);padding:18px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PanelFooterComponent, isStandalone: false, selector: "panel-footer", ngImport: i0, template: "<div class=\"spiderly-panel-footer\">\r\n    <div class=\"buttons-wrapper\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <span class=\"p-text-secondary\">\r\n        <ng-content select=\"[footerRight]\"></ng-content>\r\n    </span>\r\n</div>", styles: [".spiderly-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--p-content-border-color);border-bottom-right-radius:var(--p-content-border-radius);border-bottom-left-radius:var(--p-content-border-radius);padding:18px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'panel-footer', standalone: false, template: "<div class=\"spiderly-panel-footer\">\r\n    <div class=\"buttons-wrapper\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <span class=\"p-text-secondary\">\r\n        <ng-content select=\"[footerRight]\"></ng-content>\r\n    </span>\r\n</div>", styles: [".spiderly-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #dee2e6;border-bottom-right-radius:var(--p-content-border-radius);border-bottom-left-radius:var(--p-content-border-radius);padding:18px}\n"] }]
+            args: [{ selector: 'panel-footer', standalone: false, template: "<div class=\"spiderly-panel-footer\">\r\n    <div class=\"buttons-wrapper\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <span class=\"p-text-secondary\">\r\n        <ng-content select=\"[footerRight]\"></ng-content>\r\n    </span>\r\n</div>", styles: [".spiderly-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--p-content-border-color);border-bottom-right-radius:var(--p-content-border-radius);border-bottom-left-radius:var(--p-content-border-radius);padding:18px}\n"] }]
         }], ctorParameters: () => [] });
 
 class PanelHeaderComponent {
@@ -1968,7 +1813,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: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: i4$6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelComponent, decorators: [{
             type: Component,
@@ -2027,20 +1872,23 @@ class SpiderlyPanelsModule {
             PanelFooterComponent,
             SpiderlyPanelComponent,
             SpiderlyCardComponent], imports: [CommonModule,
-            PrimengModule], exports: [PanelHeaderComponent,
+            MenuModule,
+            PanelModule], exports: [PanelHeaderComponent,
             PanelBodyComponent,
             PanelFooterComponent,
             SpiderlyPanelComponent,
             SpiderlyCardComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelsModule, imports: [CommonModule,
-            PrimengModule] }); }
+            MenuModule,
+            PanelModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        PrimengModule,
+                        MenuModule,
+                        PanelModule
                     ],
                     exports: [
                         PanelHeaderComponent,
@@ -2204,41 +2052,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 
-// It's made like generic type because of <number>, <string> etc. not to put class like User.
-class SpiderlyFormControl extends FormControl {
-    constructor(value, opts = null, required = false) {
-        opts = opts ?? { updateOn: 'blur' };
-        super(value, opts);
-        this.required = required;
-    }
-    getRawValue() {
-        return super.getRawValue();
-    }
-    get validator() {
-        return this._spiderlyValidator;
-    }
-    set validator(validator) {
-        this._spiderlyValidator = validator;
-        this.setValidators(validator);
-    }
-}
-class SpiderlyFormGroup extends FormGroup {
-    constructor(controls) {
-        super(controls);
-        this.initSaveBody = () => null;
-        this.controlNamesFromHtml = [];
-    }
-    getRawValue() {
-        return super.getRawValue();
-    }
-}
-class SpiderlyFormArray extends FormArray {
-    constructor() {
-        super(...arguments);
-        this.controlNamesFromHtml = [];
-    }
-}
-
 class IsAuthorizedForSaveEvent extends BaseEntity {
     constructor({ isAuthorizedForSave, currentUserPermissionCodes, } = {}) {
         super('IsAuthorizedForSaveEvent');
@@ -2260,54 +2073,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class ValidatorAbstractService {
-    constructor(translocoService) {
-        this.translocoService = translocoService;
-        this.isArrayEmpty = (control) => {
-            const validator = () => {
-                const value = control.value;
-                const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
-                const arrayValid = notEmptyRule;
-                return arrayValid ? null : { _: this.translocoService.translate('NotEmpty') };
-            };
-            validator.hasNotEmptyRule = true;
-            control.required = true;
-            return validator;
-        };
-        this.notEmpty = (control) => {
-            const validator = () => {
-                const value = control.value;
-                const notEmptyRule = typeof value !== 'undefined' && value !== null && value !== '';
-                const arrayValid = notEmptyRule;
-                return arrayValid ? null : { _: this.translocoService.translate('NotEmpty') };
-            };
-            validator.hasNotEmptyRule = true;
-            control.required = true;
-            control.validator = validator;
-            control.updateValueAndValidity();
-        };
-        this.isFormArrayEmpty = (control) => {
-            const validator = () => {
-                const value = control;
-                const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
-                const arrayValid = notEmptyRule;
-                return arrayValid ? null : { _: this.translocoService.translate('NotEmpty') };
-            };
-            validator.hasNotEmptyRule = true;
-            control.required = true;
-            return validator;
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ValidatorAbstractService, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ValidatorAbstractService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ValidatorAbstractService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$2.TranslocoService }] });
-
 class BaseFormService {
     constructor(translateLabelsService, validatorService, messageService, translocoService) {
         this.translateLabelsService = translateLabelsService;
@@ -2318,14 +2083,14 @@ class BaseFormService {
             if (modelConstructor == null)
                 return null;
             if (formGroup == null)
-                console.error('FT: You need to instantiate the form group.');
+                console.error('Spiderly: You need to instantiate the form group.');
             this.initFormGroup(formGroup, modelConstructor, updateOnChangeControls);
             parentFormGroup.setControl(propertyNameInSaveBody, formGroup); // FT: Use setControl because it will update formGroup if it already exists
             return formGroup;
         };
         this.initFormGroup = (formGroup, modelConstructor, updateOnChangeControls) => {
             if (formGroup == null)
-                console.error('FT: You need to instantiate the form group.');
+                console.error('Spiderly: You need to instantiate the form group.');
             Object.keys(modelConstructor).forEach((formControlName) => {
                 let formControl;
                 const formControlValue = modelConstructor[formControlName];
@@ -2338,13 +2103,14 @@ class BaseFormService {
                 }
                 formControl.label = formControlName;
                 formControl.labelForDisplay = this.getTranslatedLabel(formControlName);
+                formControl.parentClassName = modelConstructor.typeName;
                 formGroup.setControl(formControlName, formControl); // FT: Use setControl because it will update formControl if it already exists
                 this.validatorService.setValidator(formControl, modelConstructor.typeName);
             });
             return formGroup;
         };
         //#region Helpers
-        // FT: If you want to call single method
+        // If you want to call single method
         this.checkFormGroupValidity = (formGroup) => {
             if (formGroup.invalid) {
                 Object.keys(formGroup.controls).forEach(key => {
@@ -2527,7 +2293,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: "ngmodule", type: PrimengModule }, { 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", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RoleBaseDetailsComponent, decorators: [{
             type: Component,
@@ -2535,7 +2301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        PrimengModule,
                         TranslocoDirective,
                         CardSkeletonComponent,
                         SpiderlyTextboxComponent,
@@ -2605,7 +2370,7 @@ class BaseFormCopy {
                                     formArray.clear();
                                 }
                                 else {
-                                    // FT: This is okay because when we have M2M association with additional fields, we will not give back the list because we are not checking version on the server.
+                                    // This is okay because when we have M2M association with additional fields, we will not give back the list because we are not checking version on the server.
                                     // console.error(`You returned empty array for control: ${formArray.translationKey}.`);
                                 }
                                 res[key].forEach((model) => {
@@ -2625,7 +2390,7 @@ class BaseFormCopy {
                             }
                         }
                         else {
-                            // FT: It's okay to do this.
+                            // It's okay to do this.
                             // console.error('You returned something that is not in the save DTO.');
                         }
                     });
@@ -2643,7 +2408,6 @@ class BaseFormCopy {
         };
         this.rerouteToSavedObject = (rerouteId) => {
             if (rerouteId == null) {
-                // console.error('You do not have rerouteId in your DTO.')
                 const currentUrl = this.router.url;
                 const parentUrl = getParentUrl(currentUrl);
                 this.router.navigateByUrl(parentUrl);
@@ -2833,16 +2597,17 @@ class VerificationWrapperComponent extends BaseFormCopy {
         this.onResendVerificationToken.next(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$2.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n        <div class=\"dialog\" style=\"padding: 0px;\">\r\n            @if (verificationTokenRequestFormGroup != null) {\r\n                <spiderly-panel>\r\n                    <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\r\n                    \r\n                    <panel-body>\r\n                        <form class=\"grid\">\r\n                            <div class=\"col-12\">\r\n                                <div class=\"header\">{{t('AccountVerificationTitle')}}</div>\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                {{t('AccountVerificationDescription', {email: email})}}\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                <spiderly-textbox [control]=\"control('verificationCode', verificationTokenRequestFormGroup)\"></spiderly-textbox>\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\"></spiderly-button>\r\n                            </div>\r\n                        </form>\r\n                    </panel-body>\r\n                    \r\n                    <panel-footer>\r\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n                    </panel-footer>\r\n                    <panel-footer>\r\n                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\r\n                    </panel-footer>\r\n                </spiderly-panel>\r\n            }\r\n            @else {\r\n                <!-- TODO FT: Add skeleton -->\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PrimengModule }, { 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: 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: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n        <div class=\"dialog\" style=\"padding: 0px;\">\r\n            @if (verificationTokenRequestFormGroup != null) {\r\n                <spiderly-panel>\r\n                    <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\r\n                    \r\n                    <panel-body>\r\n                        <form class=\"grid\">\r\n                            <div class=\"col-12\">\r\n                                <div class=\"header\">{{t('AccountVerificationTitle')}}</div>\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                {{t('AccountVerificationDescription', {email: email})}}\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                <spiderly-textbox [control]=\"control('verificationCode', verificationTokenRequestFormGroup)\"></spiderly-textbox>\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\"></spiderly-button>\r\n                            </div>\r\n                        </form>\r\n                    </panel-body>\r\n                    \r\n                    <panel-footer>\r\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n                    </panel-footer>\r\n                    <panel-footer>\r\n                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\r\n                    </panel-footer>\r\n                </spiderly-panel>\r\n            }\r\n            @else {\r\n                <!-- TODO FT: Add skeleton -->\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { 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: "ngmodule", type: SpiderlyPanelsModule }, { 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'verification-wrapper', imports: [
                         CommonModule,
-                        PrimengModule,
                         FormsModule,
                         ReactiveFormsModule,
                         SpiderlyControlsModule,
+                        SpiderlyPanelsModule,
+                        ButtonModule,
                         TranslocoDirective,
                     ], template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n        <div class=\"dialog\" style=\"padding: 0px;\">\r\n            @if (verificationTokenRequestFormGroup != null) {\r\n                <spiderly-panel>\r\n                    <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\r\n                    \r\n                    <panel-body>\r\n                        <form class=\"grid\">\r\n                            <div class=\"col-12\">\r\n                                <div class=\"header\">{{t('AccountVerificationTitle')}}</div>\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                {{t('AccountVerificationDescription', {email: email})}}\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                <spiderly-textbox [control]=\"control('verificationCode', verificationTokenRequestFormGroup)\"></spiderly-textbox>\r\n                            </div>\r\n                            <div class=\"col-12\">\r\n                                <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\"></spiderly-button>\r\n                            </div>\r\n                        </form>\r\n                    </panel-body>\r\n                    \r\n                    <panel-footer>\r\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n                        <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n                    </panel-footer>\r\n                    <panel-footer>\r\n                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\r\n                    </panel-footer>\r\n                </spiderly-panel>\r\n            }\r\n            @else {\r\n                <!-- TODO FT: Add skeleton -->\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-container>" }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$2.TranslocoService }, { type: BaseFormService }], propDecorators: { email: [{
@@ -3035,7 +2800,7 @@ class LoginComponent extends BaseFormCopy {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$2.TranslocoService }, { token: BaseFormService }, { token: AuthBaseService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (loginFormGroup != null) {\r\n        @if (showEmailSentDialog == false) {\r\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\r\n                <form [formGroup]=\"formGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\r\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0; margin-bottom: 32px;\">\r\n                        <spiderly-textbox [control]=\"control('email', loginFormGroup)\"></spiderly-textbox>\r\n                    </div>\r\n                    \r\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n                        <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                        <!-- TODO FT: Add possibility to change this name from the specific project -->\r\n                        <spiderly-button *ngIf=\"usersCanRegister\" [label]=\"t('NewToJoinNow', {companyName: companyName})\" routerLink=\"/registration\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                    </div>\r\n                </form>\r\n            </auth>\r\n        }\r\n        @else {\r\n            <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\r\n        }\r\n    }\r\n    @else {\r\n        <!-- TODO FT: Add skeleton -->\r\n    }\r\n</ng-container>", 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.ɵ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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: PrimengModule }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (loginFormGroup != null) {\r\n        @if (showEmailSentDialog == false) {\r\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\r\n                <form [formGroup]=\"formGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\r\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0; margin-bottom: 32px;\">\r\n                        <spiderly-textbox [control]=\"control('email', loginFormGroup)\"></spiderly-textbox>\r\n                    </div>\r\n                    \r\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n                        <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                        <!-- TODO FT: Add possibility to change this name from the specific project -->\r\n                        <spiderly-button *ngIf=\"usersCanRegister\" [label]=\"t('NewToJoinNow', {companyName: companyName})\" routerLink=\"/registration\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                    </div>\r\n                </form>\r\n            </auth>\r\n        }\r\n        @else {\r\n            <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\r\n        }\r\n    }\r\n    @else {\r\n        <!-- TODO FT: Add skeleton -->\r\n    }\r\n</ng-container>", 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.ɵ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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -3043,7 +2808,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         AuthComponent,
-                        PrimengModule,
                         SpiderlyControlsModule,
                         LoginVerificationComponent,
                         TranslocoDirective,
@@ -3221,7 +2985,7 @@ class RegistrationComponent extends BaseFormCopy {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RegistrationComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$2.TranslocoService }, { token: BaseFormService }, { token: LayoutBaseService }, { token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: RegistrationComponent, isStandalone: true, selector: "app-registration", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (registrationFormGroup != null) {\r\n        @if (showEmailSentDialog == false) {\r\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\r\n                <form [formGroup]=\"formGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\r\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\r\n                        <spiderly-textbox [control]=\"control('email', registrationFormGroup)\"></spiderly-textbox>\r\n                    </div>\r\n                    \r\n                    <div class=\"mb-4 gap-5\">\r\n                        <div class=\"text-center\" style=\"font-size: smaller;\">\r\n                            {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n                        <spiderly-button [label]=\"t('AgreeAndJoin')\" (onClick)=\"sendRegistrationVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                        <!-- TODO FT: Add possibility to change this name from the specific project -->\r\n                        <spiderly-button [label]=\"t('AlreadyHasAccount', {companyName: companyName})\" routerLink=\"/login\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                    </div>\r\n                </form>\r\n            </auth>\r\n        }\r\n        @else {\r\n            <registration-verification [email]=\"registrationFormGroup.controls.email.getRawValue()\"></registration-verification>\r\n        }\r\n    }\r\n    @else {\r\n        <!-- TODO FT: Add skeleton -->\r\n    }\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: PrimengModule }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: RegistrationVerificationComponent, selector: "registration-verification", inputs: ["email"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: RegistrationComponent, isStandalone: true, selector: "app-registration", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (registrationFormGroup != null) {\r\n        @if (showEmailSentDialog == false) {\r\n            <auth (onCompanyNameChange)=\"companyNameChange($event)\">\r\n                <form [formGroup]=\"formGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\r\n                    <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\r\n                        <spiderly-textbox [control]=\"control('email', registrationFormGroup)\"></spiderly-textbox>\r\n                    </div>\r\n                    \r\n                    <div class=\"mb-4 gap-5\">\r\n                        <div class=\"text-center\" style=\"font-size: smaller;\">\r\n                            {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n                        <spiderly-button [label]=\"t('AgreeAndJoin')\" (onClick)=\"sendRegistrationVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                        <!-- TODO FT: Add possibility to change this name from the specific project -->\r\n                        <spiderly-button [label]=\"t('AlreadyHasAccount', {companyName: companyName})\" routerLink=\"/login\" [style]=\"{width: '100%'}\"></spiderly-button>\r\n                    </div>\r\n                </form>\r\n            </auth>\r\n        }\r\n        @else {\r\n            <registration-verification [email]=\"registrationFormGroup.controls.email.getRawValue()\"></registration-verification>\r\n        }\r\n    }\r\n    @else {\r\n        <!-- TODO FT: Add skeleton -->\r\n    }\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: RegistrationVerificationComponent, selector: "registration-verification", inputs: ["email"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RegistrationComponent, decorators: [{
             type: Component,
@@ -3229,7 +2993,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         AuthComponent,
-                        PrimengModule,
                         SpiderlyControlsModule,
                         RegistrationVerificationComponent,
                         TranslocoDirective,
@@ -3267,13 +3030,12 @@ class IndexCardComponent {
         this.onRemoveIconClick.next(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IndexCardComponent, deps: [{ token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: IndexCardComponent, isStandalone: true, selector: "index-card", inputs: { last: "last", index: "index", header: "header", description: "description", showRemoveIcon: "showRemoveIcon", showCrudMenu: "showCrudMenu", crudMenu: "crudMenu" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, ngImport: i0, template: "<div [ngClass]=\"{\r\n\t'last-child-zero-margin': last,\r\n    'card-margin-bottom': true,\r\n\t}\">\r\n\t<spiderly-panel [crudMenu]=\"crudMenu\" [showCrudMenu]=\"showCrudMenu\" (onMenuIconClick)=\"menuIconClick($event)\" [showRemoveIcon]=\"showRemoveIcon\" (onRemoveIconClick)=\"removeIconClick()\" [index]=\"index\">\r\n\t\t<panel-header [title]=\"header\" [index]=\"index\" [showIcon]=\"false\"></panel-header>\r\n\t\t\r\n\t\t<panel-body>\r\n\t\t\t<ng-content>\r\n\t\t\t\t<!-- Custom things below description -->\r\n\t\t\t</ng-content>\r\n\t\t</panel-body>\r\n\t\t\r\n\t</spiderly-panel>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PrimengModule }, { 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: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: IndexCardComponent, isStandalone: true, selector: "index-card", inputs: { last: "last", index: "index", header: "header", description: "description", showRemoveIcon: "showRemoveIcon", showCrudMenu: "showCrudMenu", crudMenu: "crudMenu" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, ngImport: i0, template: "<div [ngClass]=\"{\r\n\t'last-child-zero-margin': last,\r\n    'card-margin-bottom': true,\r\n\t}\">\r\n\t<spiderly-panel [crudMenu]=\"crudMenu\" [showCrudMenu]=\"showCrudMenu\" (onMenuIconClick)=\"menuIconClick($event)\" [showRemoveIcon]=\"showRemoveIcon\" (onRemoveIconClick)=\"removeIconClick()\" [index]=\"index\">\r\n\t\t<panel-header [title]=\"header\" [index]=\"index\" [showIcon]=\"false\"></panel-header>\r\n\t\t\r\n\t\t<panel-body>\r\n\t\t\t<ng-content>\r\n\t\t\t\t<!-- Custom things below description -->\r\n\t\t\t</ng-content>\r\n\t\t</panel-body>\r\n\t\t\r\n\t</spiderly-panel>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IndexCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'index-card', imports: [
                         CommonModule,
-                        PrimengModule,
                         SpiderlyPanelsModule
                     ], template: "<div [ngClass]=\"{\r\n\t'last-child-zero-margin': last,\r\n    'card-margin-bottom': true,\r\n\t}\">\r\n\t<spiderly-panel [crudMenu]=\"crudMenu\" [showCrudMenu]=\"showCrudMenu\" (onMenuIconClick)=\"menuIconClick($event)\" [showRemoveIcon]=\"showRemoveIcon\" (onRemoveIconClick)=\"removeIconClick()\" [index]=\"index\">\r\n\t\t<panel-header [title]=\"header\" [index]=\"index\" [showIcon]=\"false\"></panel-header>\r\n\t\t\r\n\t\t<panel-body>\r\n\t\t\t<ng-content>\r\n\t\t\t\t<!-- Custom things below description -->\r\n\t\t\t</ng-content>\r\n\t\t</panel-body>\r\n\t\t\r\n\t</spiderly-panel>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i3$2.FormBuilder }], propDecorators: { last: [{
@@ -3304,13 +3066,12 @@ class InfoCardComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: InfoCardComponent, deps: [{ token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: InfoCardComponent, isStandalone: true, selector: "info-card", inputs: { header: "header", description: "description" }, ngImport: i0, template: "<div class=\"card responsive-card-padding\" style=\"background-color: var(--p-primary-100); position: relative; overflow: hidden;\">\r\n    <!-- TODO FT: Translate -->\r\n    <div style=\"display: flex; align-items: center; gap: 21px; position: relative; z-index: 2;\">\r\n      <i class=\"pi pi-info-circle\" style=\"font-size: 26px; color: var(--p-primary-color);\"></i>\r\n      <div>\r\n          <div class=\"header\" style=\"color:var(--p-primary-color); font-weight: 600; text-align: left;\">\r\n              {{header}}\r\n          </div>\r\n          <div style=\"text-align: left; margin-top: 8px;\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"card-overflow-icon\" style=\"position: absolute; overflow: hidden; right: 8px; top: -25px; z-index: 1;\">\r\n      <i class=\"pi pi-info-circle\" style=\"font-size: 270px;\"></i>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PrimengModule }, { kind: "ngmodule", type: SpiderlyPanelsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: InfoCardComponent, isStandalone: true, selector: "info-card", inputs: { header: "header", description: "description" }, ngImport: i0, template: "<div class=\"card responsive-card-padding\" style=\"background-color: var(--p-primary-100); position: relative; overflow: hidden;\">\r\n    <!-- TODO FT: Translate -->\r\n    <div style=\"display: flex; align-items: center; gap: 21px; position: relative; z-index: 2;\">\r\n      <i class=\"pi pi-info-circle\" style=\"font-size: 26px; color: var(--p-primary-color);\"></i>\r\n      <div>\r\n          <div class=\"header\" style=\"color:var(--p-primary-color); font-weight: 600; text-align: left;\">\r\n              {{header}}\r\n          </div>\r\n          <div style=\"text-align: left; margin-top: 8px;\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"card-overflow-icon\" style=\"position: absolute; overflow: hidden; right: 8px; top: -25px; z-index: 1;\">\r\n      <i class=\"pi pi-info-circle\" style=\"font-size: 270px;\"></i>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SpiderlyPanelsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: InfoCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'info-card', imports: [
                         CommonModule,
-                        PrimengModule,
                         SpiderlyPanelsModule
                     ], template: "<div class=\"card responsive-card-padding\" style=\"background-color: var(--p-primary-100); position: relative; overflow: hidden;\">\r\n    <!-- TODO FT: Translate -->\r\n    <div style=\"display: flex; align-items: center; gap: 21px; position: relative; z-index: 2;\">\r\n      <i class=\"pi pi-info-circle\" style=\"font-size: 26px; color: var(--p-primary-color);\"></i>\r\n      <div>\r\n          <div class=\"header\" style=\"color:var(--p-primary-color); font-weight: 600; text-align: left;\">\r\n              {{header}}\r\n          </div>\r\n          <div style=\"text-align: left; margin-top: 8px;\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"card-overflow-icon\" style=\"position: absolute; overflow: hidden; right: 8px; top: -25px; z-index: 1;\">\r\n      <i class=\"pi pi-info-circle\" style=\"font-size: 270px;\"></i>\r\n    </div>\r\n  </div>" }]
         }], ctorParameters: () => [{ type: i3$2.FormBuilder }], propDecorators: { header: [{
@@ -3323,16 +3084,17 @@ class NotFoundComponent {
     constructor(config) {
         this.config = config;
         this.companyName = this.config.companyName;
+        this.logoPath = this.config.logoPath;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, deps: [{ token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NotFoundComponent, isStandalone: true, selector: "not-found", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n    <div class=\"flex flex-column w-full\">\r\n        <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n            <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n                <div class=\"text-center\">\r\n                    <img \r\n                    src=\"assets/images/logo/logo.svg\" \r\n                    alt=\"{{companyName}} Logo\" \r\n                    title=\"{{companyName}} Logo\" \r\n                    height=\"60\"\r\n                    class=\"mb-2 w-6rem flex-shrink-0\"\r\n                    >\r\n                </div>\r\n                <h1 class=\"mb-4\">\r\n                    <div class=\"font-bold text-5xl lg:text-6xl gradient-title\">404</div>\r\n                    <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\r\n                </h1>\r\n                <div class=\"text-600 text-lg mb-5\">\r\n                    The page you're looking for doesn't exist or has been moved. Let's get you back on track.\r\n                </div>\r\n                <div>\r\n                    <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ 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: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NotFoundComponent, isStandalone: true, selector: "not-found", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n    <div class=\"flex flex-column w-full\">\r\n        <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n            <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n                <div class=\"text-center\">\r\n                    <img \r\n                    [src]=\"logoPath\" \r\n                    alt=\"{{companyName}} Logo\" \r\n                    title=\"{{companyName}} Logo\" \r\n                    height=\"60\"\r\n                    class=\"mb-4\"\r\n                    >\r\n                </div>\r\n                <h1 class=\"mb-4\">\r\n                    <div class=\"font-bold text-5xl lg:text-6xl gradient-title\">404</div>\r\n                    <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\r\n                </h1>\r\n                <div class=\"text-600 text-lg mb-5\">\r\n                    The page you're looking for doesn't exist or has been moved. Let's get you back on track.\r\n                </div>\r\n                <div>\r\n                    <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ 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: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'not-found', imports: [
                         RouterModule,
                         ButtonModule,
-                    ], template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n    <div class=\"flex flex-column w-full\">\r\n        <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n            <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n                <div class=\"text-center\">\r\n                    <img \r\n                    src=\"assets/images/logo/logo.svg\" \r\n                    alt=\"{{companyName}} Logo\" \r\n                    title=\"{{companyName}} Logo\" \r\n                    height=\"60\"\r\n                    class=\"mb-2 w-6rem flex-shrink-0\"\r\n                    >\r\n                </div>\r\n                <h1 class=\"mb-4\">\r\n                    <div class=\"font-bold text-5xl lg:text-6xl gradient-title\">404</div>\r\n                    <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\r\n                </h1>\r\n                <div class=\"text-600 text-lg mb-5\">\r\n                    The page you're looking for doesn't exist or has been moved. Let's get you back on track.\r\n                </div>\r\n                <div>\r\n                    <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+                    ], template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n    <div class=\"flex flex-column w-full\">\r\n        <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n            <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n                <div class=\"text-center\">\r\n                    <img \r\n                    [src]=\"logoPath\" \r\n                    alt=\"{{companyName}} Logo\" \r\n                    title=\"{{companyName}} Logo\" \r\n                    height=\"60\"\r\n                    class=\"mb-4\"\r\n                    >\r\n                </div>\r\n                <h1 class=\"mb-4\">\r\n                    <div class=\"font-bold text-5xl lg:text-6xl gradient-title\">404</div>\r\n                    <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\r\n                </h1>\r\n                <div class=\"text-600 text-lg mb-5\">\r\n                    The page you're looking for doesn't exist or has been moved. Let's get you back on track.\r\n                </div>\r\n                <div>\r\n                    <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [{ type: ConfigBaseService }] });
 
 class SpiderlySplitButtonComponent extends SpiderlyButtonBaseComponent {
@@ -3371,19 +3133,29 @@ class SpiderlyDeleteConfirmationComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDeleteConfirmationComponent, deps: [{ token: i1$6.DynamicDialogRef }, { token: i1$6.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDeleteConfirmationComponent, isStandalone: true, selector: "spiderly-delete-confirmation", providers: [
             ConfirmationService
-        ], ngImport: i0, 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", dependencies: [{ kind: "ngmodule", type: PrimengModule }, { kind: "component", type: i2$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+        ], ngImport: i0, 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", dependencies: [{ kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i2$2.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDeleteConfirmationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spiderly-delete-confirmation', imports: [
-                        PrimengModule,
                         SpiderlyButtonComponent,
                         TranslocoDirective,
+                        ConfirmDialogModule,
                     ], providers: [
                         ConfirmationService
                     ], 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 }] });
 
+var MatchModeCodes;
+(function (MatchModeCodes) {
+    MatchModeCodes[MatchModeCodes["StartsWith"] = 0] = "StartsWith";
+    MatchModeCodes[MatchModeCodes["Contains"] = 1] = "Contains";
+    MatchModeCodes[MatchModeCodes["Equals"] = 2] = "Equals";
+    MatchModeCodes[MatchModeCodes["LessThan"] = 3] = "LessThan";
+    MatchModeCodes[MatchModeCodes["GreaterThan"] = 4] = "GreaterThan";
+    MatchModeCodes[MatchModeCodes["In"] = 5] = "In";
+})(MatchModeCodes || (MatchModeCodes = {}));
+
 class SpiderlyDataTableComponent {
     constructor(router, dialogService, route, messageService, translocoService, locale) {
         this.router = router;
@@ -3394,19 +3166,19 @@ class SpiderlyDataTableComponent {
         this.locale = locale;
         this.tableIcon = 'pi pi-list';
         this.rows = 10;
-        this.showPaginator = true; // FT: Pass only when hasLazyLoad === false
-        this.showCardWrapper = true;
+        this.showPaginator = true; // Pass only when hasLazyLoad === false
+        this.showCardWrapper = false;
         this.readonly = false;
         this.onTotalRecordsChange = new EventEmitter();
         this.loading = true;
         this.newlySelectedItems = [];
-        this.fakeSelectedItems = []; // FT: Only for showing checkboxes, we will not send this to the backend
-        this.currentPageSelectedItemsFromDb = []; // FT: Made so we can add only newly selected items to the newlySelectedItems
+        this.fakeSelectedItems = []; // Only for showing checkboxes, we will not send this to the backend
+        this.currentPageSelectedItemsFromDb = []; // Made so we can add only newly selected items to the newlySelectedItems
         this.unselectedItems = [];
         this.onLazyLoad = new EventEmitter();
         this.rowsSelectedNumber = 0;
         this.isAllSelected = null;
-        this.fakeIsAllSelected = false; // FT: Only for showing checkboxes, we will not send this to the backend
+        this.fakeIsAllSelected = false; // Only for showing checkboxes, we will not send this to the backend
         this.isFirstTimeLazyLoad = true;
         this.onIsAllSelectedChange = new EventEmitter();
         this.matchModeDateOptions = [];
@@ -3415,22 +3187,22 @@ class SpiderlyDataTableComponent {
         this.showExportToExcelButton = true;
         this.showReloadTableButton = false;
         this.hasLazyLoad = true;
-        this.selectedItemIds = []; // FT: Pass only when hasLazyLoad === false, it's enough if the M2M association hasn't additional fields
-        this.selectedItems = []; // FT: Pass only when hasLazyLoad === false
+        this.selectedItemIds = []; // Pass only when hasLazyLoad === false, it's enough if the M2M association hasn't additional fields
+        this.selectedItems = []; // Pass only when hasLazyLoad === false
         this.onRowSelect = new EventEmitter();
         this.onRowUnselect = new EventEmitter();
         this.clientFilterCount = 0;
     }
     ngOnInit() {
         this.matchModeDateOptions = [
-            { label: this.translocoService.translate('OnDate'), value: 'equals' },
-            { label: this.translocoService.translate('DatesBefore'), value: 'dateBefore' },
-            { label: this.translocoService.translate('DatesAfter'), value: 'dateAfter' },
+            { label: this.translocoService.translate('OnDate'), value: MatchModeCodes.Equals },
+            { label: this.translocoService.translate('DatesBefore'), value: MatchModeCodes.LessThan },
+            { label: this.translocoService.translate('DatesAfter'), value: MatchModeCodes.GreaterThan },
         ];
         this.matchModeNumberOptions = [
-            { label: this.translocoService.translate('Equals'), value: 'equals' },
-            { label: this.translocoService.translate('MoreThan'), value: 'gte' },
-            { label: this.translocoService.translate('LessThan'), value: 'lte' },
+            { label: this.translocoService.translate('Equals'), value: MatchModeCodes.Equals },
+            { label: this.translocoService.translate('LessThan'), value: MatchModeCodes.LessThan },
+            { label: this.translocoService.translate('MoreThan'), value: MatchModeCodes.GreaterThan },
         ];
         if (this.hasLazyLoad === false) {
             this.clientLoad();
@@ -3457,10 +3229,10 @@ class SpiderlyDataTableComponent {
                     if (this.isAllSelected == true) {
                         let idsToInsert = [...this.items.map(x => x.id)];
                         idsToInsert = idsToInsert.filter(x => this.unselectedItems.includes(x) == false);
-                        this.fakeSelectedItems = [...idsToInsert]; // FT: Only for showing checkboxes, we will not send this to the backend
+                        this.fakeSelectedItems = [...idsToInsert]; // Only for showing checkboxes, we will not send this to the backend
                     }
                     else if (this.isAllSelected == false) {
-                        this.fakeSelectedItems = [...this.newlySelectedItems]; // FT: Only for showing checkboxes, we will not send this to the backend
+                        this.fakeSelectedItems = [...this.newlySelectedItems]; // Only for showing checkboxes, we will not send this to the backend
                     }
                     else if (this.isAllSelected == null) {
                         let idsToInsert = [...selectedRowsMethodResult.selectedIds, ...this.newlySelectedItems];
@@ -3491,7 +3263,7 @@ class SpiderlyDataTableComponent {
     }
     filter(event) {
         if (this.hasLazyLoad && this.selectionMode === 'multiple')
-            this.selectAll(false); // FT: We need to do it like this because: totalRecords: 1 -> selectedRecords from earlyer selection 2 -> unselect current -> all checkbox is set to true
+            this.selectAll(false); // We need to do it like this because: totalRecords: 1 -> selectedRecords from earlyer selection 2 -> unselect current -> all checkbox is set to true
         if (this.hasLazyLoad === false && this.selectionMode === 'multiple') {
             if (this.clientFilterCount === 0) {
                 this.loadFormArrayItems();
@@ -3543,15 +3315,15 @@ class SpiderlyDataTableComponent {
     getColMatchMode(filterType) {
         switch (filterType) {
             case 'text':
-                return 'contains';
+                return MatchModeCodes.Contains;
             case 'date':
-                return null;
+                return MatchModeCodes.Equals;
             case 'multiselect':
-                return 'in';
+                return MatchModeCodes.In;
             case 'boolean':
-                return 'equals';
+                return MatchModeCodes.Equals;
             case 'numeric':
-                return null;
+                return MatchModeCodes.Equals;
             default:
                 return null;
         }
@@ -3632,7 +3404,7 @@ class SpiderlyDataTableComponent {
             case 'boolean':
                 return rowData[col.field] == true ? this.translocoService.translate('Yes') : this.translocoService.translate('No');
             case 'numeric':
-                // TODO FT: make decimal pipe
+                // TODO make decimal pipe
                 return rowData[col.field];
             default:
                 return null;
@@ -3710,7 +3482,7 @@ class SpiderlyDataTableComponent {
         this.rowsSelectedNumber++;
         const index = this.unselectedItems.indexOf(id);
         if (index !== -1) {
-            this.unselectedItems.splice(index, 1); // FT: Splice is mutating the array
+            this.unselectedItems.splice(index, 1); // Splice is mutating the array
         }
         this.setFakeIsAllSelected();
     }
@@ -3723,19 +3495,19 @@ class SpiderlyDataTableComponent {
         const fakeIndex = this.fakeSelectedItems.indexOf(id);
         const nonLazyLoadIndex = this.selectedItemIds.indexOf(id);
         if (index !== -1) {
-            this.newlySelectedItems.splice(index, 1); // FT: Splice is mutating the array
+            this.newlySelectedItems.splice(index, 1); // Splice is mutating the array
         }
         if (fakeIndex !== -1) {
-            this.fakeSelectedItems.splice(fakeIndex, 1); // FT: Splice is mutating the array
+            this.fakeSelectedItems.splice(fakeIndex, 1); // Splice is mutating the array
         }
         if (nonLazyLoadIndex !== -1) {
-            this.selectedItemIds.splice(nonLazyLoadIndex, 1); // FT: Splice is mutating the array
+            this.selectedItemIds.splice(nonLazyLoadIndex, 1); // Splice is mutating the array
         }
         this.setFakeIsAllSelected();
     }
     //#endregion
     //#region Client side table
-    // FT: Can do it with Id also, because we are never adding the new record in the table at the same page.
+    // Can do it with Id also, because we are never adding the new record in the table at the same page.
     getFormArrayControlByIndex(formControlName, index) {
         if (this.getFormControl) {
             return this.getFormControl(formControlName, index, this.additionalIndexes);
@@ -3745,17 +3517,21 @@ 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 remove-button-border-focus\" 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 remove-button-border-focus\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined remove-button-border-focus\" 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-sortIcon field=\"\"></p-sortIcon> -->\r\n                <!-- <p-columnFilter type=\"date\" field=\"date\" display=\"menu\"></p-columnFilter> -->\r\n                <p-columnFilter *ngIf=\"col.filterType != null\" [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]=\"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              {{getRowData(rowData, col)}}\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", ":is() .remove-button-border-focus:focus,:is() .remove-button-border-focus:enabled:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;background-color:var(--gray-200)}\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: "ngmodule", type: PrimengModule }, { kind: "component", type: i7.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: i7.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: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4$4.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: "directive", type: i4.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: i5$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: "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"] }] }); }
+    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\" [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]=\"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              {{getRowData(rowData, col)}}\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,
             args: [{ selector: 'spiderly-data-table', imports: [
                         FormsModule,
                         CommonModule,
-                        PrimengModule,
                         TranslocoDirective,
                         SpiderlyControlsModule,
-                    ], 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 remove-button-border-focus\" 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 remove-button-border-focus\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined remove-button-border-focus\" 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-sortIcon field=\"\"></p-sortIcon> -->\r\n                <!-- <p-columnFilter type=\"date\" field=\"date\" display=\"menu\"></p-columnFilter> -->\r\n                <p-columnFilter *ngIf=\"col.filterType != null\" [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]=\"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              {{getRowData(rowData, col)}}\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", ":is() .remove-button-border-focus:focus,:is() .remove-button-border-focus:enabled:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;background-color:var(--gray-200)}\n"] }]
+                        TableModule,
+                        ButtonModule,
+                        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\" [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]=\"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              {{getRowData(rowData, col)}}\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]
@@ -3861,6 +3637,158 @@ class AllClickEvent {
     }
 }
 
+class SpiderlyDataViewComponent {
+    constructor(router, route, translocoService, locale) {
+        this.router = router;
+        this.route = route;
+        this.translocoService = translocoService;
+        this.locale = locale;
+        this.rows = 10;
+        this.filters = [];
+        this.showCardWrapper = true;
+        this.onLazyLoad = new EventEmitter();
+        this.loading = true;
+        this.matchModeDateOptions = [];
+        this.matchModeNumberOptions = [];
+        this.applyFilters = () => {
+            this.table._filter();
+        };
+    }
+    ngOnInit() {
+        this.matchModeDateOptions = [
+            { label: this.translocoService.translate('OnDate'), value: MatchModeCodes.Equals },
+            { label: this.translocoService.translate('DatesBefore'), value: MatchModeCodes.LessThan },
+            { label: this.translocoService.translate('DatesAfter'), value: MatchModeCodes.GreaterThan },
+        ];
+        this.matchModeNumberOptions = [
+            { label: this.translocoService.translate('Equals'), value: MatchModeCodes.Equals },
+            { label: this.translocoService.translate('LessThan'), value: MatchModeCodes.LessThan },
+            { label: this.translocoService.translate('MoreThan'), value: MatchModeCodes.GreaterThan },
+        ];
+    }
+    lazyLoad(event) {
+        this.lastLazyLoadEvent = event;
+        const transformedFilter = {};
+        for (const key in event.filters) {
+            const filterMeta = event.filters[key];
+            if (Array.isArray(filterMeta)) {
+                transformedFilter[key] = filterMeta;
+            }
+            else {
+                transformedFilter[key] = [{
+                        value: filterMeta.value,
+                        matchMode: filterMeta.matchMode
+                    }];
+            }
+        }
+        let tableFilter = event;
+        tableFilter.filters = transformedFilter;
+        this.onLazyLoad.next(tableFilter);
+        this.getTableDataObservableMethod(tableFilter).subscribe({
+            next: async (res) => {
+                this.items = res.data;
+                this.totalRecords = res.totalRecords;
+                this.loading = false;
+            },
+            error: () => {
+                this.loading = false;
+            },
+        });
+    }
+    filter(event) {
+    }
+    getDefaultMatchMode(filterType) {
+        switch (filterType) {
+            case 'text':
+                return MatchModeCodes.Contains;
+            case 'date':
+                return MatchModeCodes.Equals;
+            case 'multiselect':
+                return MatchModeCodes.In;
+            case 'boolean':
+                return MatchModeCodes.Equals;
+            case 'numeric':
+                return MatchModeCodes.Equals;
+            default:
+                return null;
+        }
+    }
+    getMatchModeOptions(filterType) {
+        switch (filterType) {
+            case 'text':
+                return [];
+            case 'date':
+                return this.matchModeDateOptions;
+            case 'multiselect':
+                return [];
+            case 'boolean':
+                return [];
+            case 'numeric':
+                return this.matchModeNumberOptions;
+            default:
+                return [];
+        }
+    }
+    navigateToDetails(rowId) {
+        this.router.navigate([rowId], { relativeTo: this.route });
+    }
+    reload() {
+        this.loading = true;
+        this.items = null;
+        this.lazyLoad(this.lastLazyLoadEvent);
+    }
+    colTrackByFn(index, item) {
+        return item.field;
+    }
+    actionTrackByFn(index, item) {
+        return `${index}${item.field}`;
+    }
+    clearFilters() {
+        this.table.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, deps: [{ token: i3.Router }, { token: i3.ActivatedRoute }, { 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", 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]=\"true\" \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    > \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                    <!-- Multiselect -->\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=\"pi pi-search\"></spiderly-button>\r\n            <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" icon=\"pi pi-filter-slash\"></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 class=\"card\" style=\"padding: 0; margin-bottom: 0;\">\r\n          <td (click)=\"navigateToDetails(rowData.id)\" style=\"display: block; border: 0; cursor: pointer;\">\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    </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-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,
+            args: [{ selector: 'spiderly-data-view', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TranslocoDirective,
+                        SpiderlyControlsModule,
+                        TableModule,
+                        ButtonModule,
+                        MultiSelectModule,
+                        CheckboxModule,
+                        TooltipModule,
+                        DatePickerModule,
+                        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]=\"true\" \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    > \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                    <!-- Multiselect -->\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=\"pi pi-search\"></spiderly-button>\r\n            <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" icon=\"pi pi-filter-slash\"></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 class=\"card\" style=\"padding: 0; margin-bottom: 0;\">\r\n          <td (click)=\"navigateToDetails(rowData.id)\" style=\"display: block; border: 0; cursor: pointer;\">\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    </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-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: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$2.TranslocoService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }], propDecorators: { table: [{
+                type: ViewChild,
+                args: ['dt']
+            }], items: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], showCardWrapper: [{
+                type: Input
+            }], onLazyLoad: [{
+                type: Output
+            }], getTableDataObservableMethod: [{
+                type: Input
+            }], cardBody: [{
+                type: ContentChild,
+                args: ['cardBody', { read: TemplateRef }]
+            }] } });
+
 class SidebarMenuService {
     constructor() {
         this.menuSource = new Subject();
@@ -3961,7 +3889,7 @@ class MenuitemComponent {
     get activeClass() {
         return this.active && !this.root;
     }
-    //#region FT HACK: Partner
+    //#region HACK: Partner
     searchPartners(event) {
         this.layoutService.searchPartners(event).subscribe(po => {
             this.partnerOptions = po;
@@ -3980,7 +3908,7 @@ class MenuitemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: MenuitemComponent, deps: [{ token: LayoutBaseService }, { token: i0.ChangeDetectorRef }, { token: i3.Router }, { token: SidebarMenuService }, { token: AuthBaseService }, { token: ApiSecurityService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: MenuitemComponent, isStandalone: true, selector: "[menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\r\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\r\n       [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n    </a>\r\n    <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\r\n    [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\r\n    [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\r\n    [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\r\n    [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n    </a>\r\n\r\n    <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\r\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\r\n            <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\r\n        </ng-template>\r\n    </ul>\r\n\r\n    <!-- Delete this in the future iterations, make link to partner in /partners page -->\r\n    <spiderly-autocomplete\r\n    *ngIf=\"item.showPartnerDialog\"\r\n    [control]=\"selectedPartner\"\r\n    [options]=\"partnerOptions\"\r\n    (onTextInput)=\"searchPartners($event)\"\r\n    label=\"\"\r\n    [placeholder]=\"t('SelectThePartner')\"\r\n    [showAddon]=\"true\"\r\n    (onButtonClick)=\"partnersAutocompleteButtonClick()\"\r\n    addonIcon=\"pi pi-check\"\r\n    [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\r\n    class=\"mobile-stay-open\"\r\n    ></spiderly-autocomplete>\r\n     \r\n</ng-container>", dependencies: [{ kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: PrimengModule }, { kind: "directive", type: i8.Ripple, selector: "[pRipple]" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyAutocompleteComponent, selector: "spiderly-autocomplete", inputs: ["appendTo", "showClear", "emptyMessage", "displayName"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: MenuitemComponent, isStandalone: true, selector: "[menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\r\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\r\n       [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n    </a>\r\n    <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\r\n    [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\r\n    [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\r\n    [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\r\n    [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n    </a>\r\n\r\n    <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\r\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\r\n            <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\r\n        </ng-template>\r\n    </ul>\r\n\r\n    <!-- Delete this in the future iterations, make link to partner in /partners page -->\r\n    <spiderly-autocomplete\r\n    *ngIf=\"item.showPartnerDialog\"\r\n    [control]=\"selectedPartner\"\r\n    [options]=\"partnerOptions\"\r\n    (onTextInput)=\"searchPartners($event)\"\r\n    label=\"\"\r\n    [placeholder]=\"t('SelectThePartner')\"\r\n    [showAddon]=\"true\"\r\n    (onButtonClick)=\"partnersAutocompleteButtonClick()\"\r\n    addonIcon=\"pi pi-check\"\r\n    [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\r\n    class=\"mobile-stay-open\"\r\n    ></spiderly-autocomplete>\r\n     \r\n</ng-container>", dependencies: [{ kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyAutocompleteComponent, selector: "spiderly-autocomplete", inputs: ["appendTo", "showClear", "emptyMessage", "displayName"] }], animations: [
             trigger('children', [
                 state('collapsed', style({
                     height: '0'
@@ -4007,7 +3935,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                     ], imports: [
                         CommonModule,
                         RouterModule,
-                        PrimengModule,
                         TranslocoDirective,
                         SpiderlyControlsModule,
                     ], template: "<ng-container *transloco=\"let t\">\r\n    <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\r\n    <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\r\n       [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n    </a>\r\n    <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\r\n    [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\r\n    [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\r\n    [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\r\n    [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n        <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n        <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n        <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n    </a>\r\n\r\n    <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\r\n        <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\r\n            <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\r\n        </ng-template>\r\n    </ul>\r\n\r\n    <!-- Delete this in the future iterations, make link to partner in /partners page -->\r\n    <spiderly-autocomplete\r\n    *ngIf=\"item.showPartnerDialog\"\r\n    [control]=\"selectedPartner\"\r\n    [options]=\"partnerOptions\"\r\n    (onTextInput)=\"searchPartners($event)\"\r\n    label=\"\"\r\n    [placeholder]=\"t('SelectThePartner')\"\r\n    [showAddon]=\"true\"\r\n    (onButtonClick)=\"partnersAutocompleteButtonClick()\"\r\n    addonIcon=\"pi pi-check\"\r\n    [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\r\n    class=\"mobile-stay-open\"\r\n    ></spiderly-autocomplete>\r\n     \r\n</ng-container>" }]
@@ -4069,14 +3996,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 
-class AppTopBarComponent {
-    constructor(layoutService, authService, apiService, router, translocoService, config) {
+class ProfileAvatarComponent {
+    constructor(layoutService, authService, router, translocoService, config) {
         this.layoutService = layoutService;
         this.authService = authService;
-        this.apiService = apiService;
         this.router = router;
         this.translocoService = translocoService;
         this.config = config;
+        this.isSideMenuLayout = true;
         this.initTopBarSubscription = null;
         this.menuItems = [];
         this.showProfileIcon = false;
@@ -4091,7 +4018,6 @@ class AppTopBarComponent {
         this.onAfterNgOnInit = () => {
             this.initTopBarSubscription = this.layoutService.initTopBarData().subscribe(initTopBarData => {
                 this.userProfilePath = initTopBarData.userProfilePath;
-                this.companyName = initTopBarData.companyName;
                 this.unreadNotificationsCount = initTopBarData.unreadNotificationsCount;
                 this.notificationMenuItem.showNotificationBadge = initTopBarData.unreadNotificationsCount > 0;
                 this.showProfileIcon = initTopBarData.showProfileIcon;
@@ -4111,13 +4037,6 @@ class AppTopBarComponent {
                 }
             },
             this.notificationMenuItem,
-            // {
-            //   label: this.translocoService.translate('Settings'),
-            //   icon: 'pi-cog',
-            //   onClick: () => {
-            //     this.router.navigateByUrl(`/administration/users`);
-            //   }
-            // },
             {
                 label: this.translocoService.translate('Logout'),
                 icon: 'pi-sign-out',
@@ -4149,19 +4068,21 @@ class AppTopBarComponent {
             this.initTopBarSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AppTopBarComponent, deps: [{ token: LayoutBaseService }, { token: AuthBaseService }, { token: ApiSecurityService }, { token: i3.Router }, { token: i1$2.TranslocoService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AppTopBarComponent, isStandalone: true, selector: "topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\r\n  <a class=\"layout-topbar-logo\" routerLink=\"/\">\r\n    <span>{{companyName?.toLocaleUpperCase()}}</span>\r\n  </a>\r\n\r\n  <button\r\n    #menubutton\r\n    class=\"p-link layout-menu-button layout-topbar-button\"\r\n    (click)=\"layoutService.onMenuToggle()\"\r\n  >\r\n    <i class=\"pi pi-bars\"></i>\r\n  </button>\r\n\r\n  <div\r\n    #topbarmenu\r\n    class=\"profile-button\"\r\n    >\r\n    <div\r\n      #topbarprofiledropdownmenubutton\r\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\r\n    >\r\n    <p-avatar\r\n        *ngIf=\"showProfileIcon\"\r\n        [label]=\"avatarLabel\"\r\n        [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\r\n        pBadge \r\n        [badgeStyleClass]=\"'p-badge-danger'\"\r\n        [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\r\n        [value]=\"unreadNotificationsCount\"\r\n        />\r\n    </div>\r\n    <div\r\n      #topbarprofiledropdownmenu\r\n      (document:click)=\"onDocumentClick($event)\"\r\n    >\r\n    <div *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" style=\"width: 280px; position: absolute; right: 26px; top: 60px; padding: 15px;\" class=\"card\">\r\n      <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\r\n        <p-avatar\r\n          [label]=\"avatarLabel\"\r\n          size=\"xlarge\"\r\n          [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'margin': 'auto' }\"\r\n          (click)=\"routeToUserPage()\"\r\n          />\r\n        <div>{{currentUser?.email}}</div>\r\n      </div>\r\n      <div style=\"margin-top: 15px;\">\r\n        <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\r\n          <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\r\n          <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 5px; margin-top: 5px;\">\r\n            <i \r\n              class=\"pi pi-fw {{item.icon}} primary-color\" \r\n              style=\"font-size: 16px; position: relative;\"\r\n              >\r\n              <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\r\n            </i>\r\n            <div> {{item.label}} </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n  ", dependencies: [{ 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: "ngmodule", type: PrimengModule }, { kind: "directive", type: i8$1.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: i9.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, deps: [{ token: LayoutBaseService }, { token: AuthBaseService }, { token: i3.Router }, { token: i1$2.TranslocoService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n  *ngIf=\"this.currentUser != null\"\r\n  #topbarmenu\r\n  >\r\n    <div\r\n      #topbarprofiledropdownmenubutton\r\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\r\n    >\r\n    <p-avatar\r\n        *ngIf=\"showProfileIcon\"\r\n        [label]=\"avatarLabel\"\r\n        [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\r\n        pBadge \r\n        [badgeStyleClass]=\"'p-badge-danger'\"\r\n        [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\r\n        [value]=\"unreadNotificationsCount\"\r\n        />\r\n    </div>\r\n    <div\r\n      #topbarprofiledropdownmenu\r\n      (document:click)=\"onDocumentClick($event)\"\r\n    >\r\n    <div \r\n    *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \r\n    [ngStyle]=\"{'right': isSideMenuLayout ? '26px' : '0', 'top': isSideMenuLayout ? '60px' : '40px'}\" \r\n    style=\"width: 280px; position: absolute; padding: 15px;\" \r\n    class=\"card\">\r\n      <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\r\n        <p-avatar\r\n          [label]=\"avatarLabel\"\r\n          size=\"xlarge\"\r\n          [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'margin': 'auto' }\"\r\n          (click)=\"routeToUserPage()\"\r\n          />\r\n        <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\r\n      </div>\r\n      <div style=\"margin-top: 15px;\">\r\n        <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\r\n          <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\r\n          <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 5px; margin-top: 5px;\">\r\n            <i \r\n              class=\"pi pi-fw {{item.icon}} primary-color\" \r\n              style=\"font-size: 16px; position: relative;\"\r\n              >\r\n              <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\r\n            </i>\r\n            <div style=\"font-size: 15px;\"> {{item.label}} </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"this.currentUser == null\">\r\n    <spiderly-button [label]=\"t('Login')\" icon=\"pi pi-sign-in\" [routerLink]=\"this.config.loginSlug\"></spiderly-button>\r\n  </div>\r\n</ng-container>", dependencies: [{ 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: AvatarModule }, { kind: "component", type: i7.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i8.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AppTopBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'topbar', imports: [
+            args: [{ selector: 'spiderly-profile-avatar', imports: [
                         CommonModule,
-                        PrimengModule,
-                        RouterModule
-                    ], template: "<div class=\"layout-topbar\">\r\n  <a class=\"layout-topbar-logo\" routerLink=\"/\">\r\n    <span>{{companyName?.toLocaleUpperCase()}}</span>\r\n  </a>\r\n\r\n  <button\r\n    #menubutton\r\n    class=\"p-link layout-menu-button layout-topbar-button\"\r\n    (click)=\"layoutService.onMenuToggle()\"\r\n  >\r\n    <i class=\"pi pi-bars\"></i>\r\n  </button>\r\n\r\n  <div\r\n    #topbarmenu\r\n    class=\"profile-button\"\r\n    >\r\n    <div\r\n      #topbarprofiledropdownmenubutton\r\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\r\n    >\r\n    <p-avatar\r\n        *ngIf=\"showProfileIcon\"\r\n        [label]=\"avatarLabel\"\r\n        [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\r\n        pBadge \r\n        [badgeStyleClass]=\"'p-badge-danger'\"\r\n        [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\r\n        [value]=\"unreadNotificationsCount\"\r\n        />\r\n    </div>\r\n    <div\r\n      #topbarprofiledropdownmenu\r\n      (document:click)=\"onDocumentClick($event)\"\r\n    >\r\n    <div *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" style=\"width: 280px; position: absolute; right: 26px; top: 60px; padding: 15px;\" class=\"card\">\r\n      <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\r\n        <p-avatar\r\n          [label]=\"avatarLabel\"\r\n          size=\"xlarge\"\r\n          [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'margin': 'auto' }\"\r\n          (click)=\"routeToUserPage()\"\r\n          />\r\n        <div>{{currentUser?.email}}</div>\r\n      </div>\r\n      <div style=\"margin-top: 15px;\">\r\n        <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\r\n          <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\r\n          <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 5px; margin-top: 5px;\">\r\n            <i \r\n              class=\"pi pi-fw {{item.icon}} primary-color\" \r\n              style=\"font-size: 16px; position: relative;\"\r\n              >\r\n              <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\r\n            </i>\r\n            <div> {{item.label}} </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n  " }]
-        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: AuthBaseService }, { type: ApiSecurityService }, { type: i3.Router }, { type: i1$2.TranslocoService }, { type: ConfigBaseService }], propDecorators: { menuButton: [{
-                type: ViewChild,
-                args: ['menubutton']
+                        RouterModule,
+                        AvatarModule,
+                        BadgeModule,
+                        SpiderlyButtonComponent,
+                        TranslocoDirective,
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n  *ngIf=\"this.currentUser != null\"\r\n  #topbarmenu\r\n  >\r\n    <div\r\n      #topbarprofiledropdownmenubutton\r\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\r\n    >\r\n    <p-avatar\r\n        *ngIf=\"showProfileIcon\"\r\n        [label]=\"avatarLabel\"\r\n        [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\r\n        pBadge \r\n        [badgeStyleClass]=\"'p-badge-danger'\"\r\n        [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\r\n        [value]=\"unreadNotificationsCount\"\r\n        />\r\n    </div>\r\n    <div\r\n      #topbarprofiledropdownmenu\r\n      (document:click)=\"onDocumentClick($event)\"\r\n    >\r\n    <div \r\n    *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \r\n    [ngStyle]=\"{'right': isSideMenuLayout ? '26px' : '0', 'top': isSideMenuLayout ? '60px' : '40px'}\" \r\n    style=\"width: 280px; position: absolute; padding: 15px;\" \r\n    class=\"card\">\r\n      <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\r\n        <p-avatar\r\n          [label]=\"avatarLabel\"\r\n          size=\"xlarge\"\r\n          [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'margin': 'auto' }\"\r\n          (click)=\"routeToUserPage()\"\r\n          />\r\n        <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\r\n      </div>\r\n      <div style=\"margin-top: 15px;\">\r\n        <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\r\n          <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\r\n          <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 5px; margin-top: 5px;\">\r\n            <i \r\n              class=\"pi pi-fw {{item.icon}} primary-color\" \r\n              style=\"font-size: 16px; position: relative;\"\r\n              >\r\n              <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\r\n            </i>\r\n            <div style=\"font-size: 15px;\"> {{item.label}} </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"this.currentUser == null\">\r\n    <spiderly-button [label]=\"t('Login')\" icon=\"pi pi-sign-in\" [routerLink]=\"this.config.loginSlug\"></spiderly-button>\r\n  </div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: AuthBaseService }, { type: i3.Router }, { type: i1$2.TranslocoService }, { type: ConfigBaseService }], propDecorators: { isSideMenuLayout: [{
+                type: Input
             }], menu: [{
                 type: ViewChild,
                 args: ['topbarmenu']
@@ -4170,19 +4091,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 args: ['topbarprofiledropdownmenubutton']
             }] } });
 
-class LayoutBaseComponent {
+class SideMenuTopBarComponent {
+    constructor(layoutService, router, config, translocoService) {
+        this.layoutService = layoutService;
+        this.router = router;
+        this.config = config;
+        this.translocoService = translocoService;
+        this.companyName = this.config.companyName;
+    }
+    async ngOnInit() {
+        this.router.events
+            .pipe(filter$1(event => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            this.layoutService.state.profileDropdownSidebarVisible = false;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SideMenuTopBarComponent, deps: [{ token: LayoutBaseService }, { token: i3.Router }, { token: ConfigBaseService }, { token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SideMenuTopBarComponent, isStandalone: true, selector: "spiderly-sidemenu-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\r\n  <a class=\"layout-topbar-logo\" routerLink=\"/\">\r\n    <span>{{companyName?.toLocaleUpperCase()}}</span>\r\n  </a>\r\n\r\n  <button\r\n    #menubutton\r\n    class=\"p-link layout-menu-button layout-topbar-button\"\r\n    (click)=\"layoutService.onMenuToggle()\"\r\n  >\r\n    <i class=\"pi pi-bars\"></i>\r\n  </button>\r\n\r\n  <div class=\"profile-button\">\r\n    <spiderly-profile-avatar\r\n    ></spiderly-profile-avatar>\r\n  </div>\r\n\r\n</div>\r\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: AvatarModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SideMenuTopBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-sidemenu-topbar', imports: [
+                        CommonModule,
+                        RouterModule,
+                        AvatarModule,
+                        BadgeModule,
+                        ProfileAvatarComponent,
+                    ], template: "<div class=\"layout-topbar\">\r\n  <a class=\"layout-topbar-logo\" routerLink=\"/\">\r\n    <span>{{companyName?.toLocaleUpperCase()}}</span>\r\n  </a>\r\n\r\n  <button\r\n    #menubutton\r\n    class=\"p-link layout-menu-button layout-topbar-button\"\r\n    (click)=\"layoutService.onMenuToggle()\"\r\n  >\r\n    <i class=\"pi pi-bars\"></i>\r\n  </button>\r\n\r\n  <div class=\"profile-button\">\r\n    <spiderly-profile-avatar\r\n    ></spiderly-profile-avatar>\r\n  </div>\r\n\r\n</div>\r\n  " }]
+        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i3.Router }, { type: ConfigBaseService }, { type: i1$2.TranslocoService }], propDecorators: { menuButton: [{
+                type: ViewChild,
+                args: ['menubutton']
+            }] } });
+
+class TopBarComponent {
+    constructor(config) {
+        this.config = config;
+        this.companyName = this.config.companyName;
+        this.logoPath = this.config.logoPath;
+        this.isSideMenuActive = false;
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ 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" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\r\n  <nav class=\"topbar\">\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 .p-menubar-item-link{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: i3$5.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,
+            args: [{ selector: 'spiderly-topbar', imports: [
+                        CommonModule,
+                        RouterModule,
+                        MenubarModule,
+                        AvatarModule,
+                        ProfileAvatarComponent,
+                    ], template: "<div class=\"topbar-wrapper\">\r\n  <nav class=\"topbar\">\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 .p-menubar-item-link{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"] }]
+        }], ctorParameters: () => [{ type: ConfigBaseService }], propDecorators: { menu: [{
+                type: Input
+            }] } });
+
+class SpiderlyLayoutComponent {
     constructor(layoutService, renderer, router) {
         this.layoutService = layoutService;
         this.renderer = renderer;
         this.router = router;
+        this.menu = [];
+        this.sideMenu = [];
+        this.topMenu = [];
+        this.isSideMenuLayout = true;
         this.onAfterNgDestroy = () => { };
         this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
             if (!this.menuOutsideClickListener) {
                 this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
-                    const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) ||
-                        this.appSidebar.el.nativeElement.contains(event.target) ||
-                        this.appTopbar.menuButton.nativeElement.isSameNode(event.target) ||
-                        this.appTopbar.menuButton.nativeElement.contains(event.target) ||
+                    const isOutsideClicked = !(this.appSidebar?.el.nativeElement.isSameNode(event.target) ||
+                        this.appSidebar?.el.nativeElement.contains(event.target) ||
+                        this.sidemenuTopbar?.menuButton?.nativeElement.isSameNode(event.target) ||
+                        this.sidemenuTopbar?.menuButton?.nativeElement.contains(event.target) ||
                         (event.target.closest('.p-autocomplete-items')) ||
                         (event.target.closest('.p-autocomplete-clear-icon')));
                     if (isOutsideClicked) {
@@ -4192,8 +4174,8 @@ class LayoutBaseComponent {
             }
             if (!this.profileMenuOutsideClickListener) {
                 this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
-                    const isOutsideClicked = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) ||
-                        this.appTopbar.menu.nativeElement.contains(event.target));
+                    const isOutsideClicked = !(this.topbarmenu?.nativeElement.isSameNode(event.target) ||
+                        this.topbarmenu?.nativeElement.contains(event.target));
                     if (isOutsideClicked) {
                         this.hideProfileMenu();
                     }
@@ -4209,6 +4191,14 @@ class LayoutBaseComponent {
             this.hideProfileMenu();
         });
     }
+    ngOnInit() {
+        if (this.isSideMenuLayout) {
+            this.sideMenu = [...this.menu];
+        }
+        else {
+            this.topMenu = [...this.menu[0].items];
+        }
+    }
     hideMenu() {
         this.layoutService.state.overlayMenuActive = false;
         this.layoutService.state.staticMenuMobileActive = false;
@@ -4265,22 +4255,32 @@ class LayoutBaseComponent {
         }
         this.onAfterNgDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutBaseComponent, deps: [{ token: LayoutBaseService }, { token: i0.Renderer2 }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: LayoutBaseComponent, isStandalone: true, selector: "layout-base", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "appTopbar", first: true, predicate: AppTopBarComponent, descendants: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, deps: [{ token: LayoutBaseService }, { token: i0.Renderer2 }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n    <div class=\"layout-sidebar\">\r\n        <sidebar [menu]=\"sideMenu\"></sidebar>\r\n    </div>\r\n    <div class=\"layout-main-container\">\r\n        <div class=\"layout-main\">\r\n            <router-outlet></router-outlet>\r\n        </div>\r\n        <footer></footer>\r\n    </div>\r\n    <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n    <spiderly-topbar [menu]=\"topMenu\">\r\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n    </spiderly-topbar>\r\n    <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n        <router-outlet></router-outlet>\r\n    </main>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LayoutBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'layout-base',
-                    template: '',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.Renderer2 }, { type: i3.Router }], propDecorators: { appSidebar: [{
+            args: [{ selector: 'spiderly-layout', imports: [
+                        CommonModule,
+                        RouterModule,
+                        AppSidebarComponent,
+                        FooterComponent,
+                        SideMenuTopBarComponent,
+                        TopBarComponent,
+                    ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n    <div class=\"layout-sidebar\">\r\n        <sidebar [menu]=\"sideMenu\"></sidebar>\r\n    </div>\r\n    <div class=\"layout-main-container\">\r\n        <div class=\"layout-main\">\r\n            <router-outlet></router-outlet>\r\n        </div>\r\n        <footer></footer>\r\n    </div>\r\n    <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n    <spiderly-topbar [menu]=\"topMenu\">\r\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n    </spiderly-topbar>\r\n    <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n        <router-outlet></router-outlet>\r\n    </main>\r\n</div>" }]
+        }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.Renderer2 }, { type: i3.Router }], propDecorators: { menu: [{
+                type: Input
+            }], isSideMenuLayout: [{
+                type: Input
+            }], appSidebar: [{
                 type: ViewChild,
                 args: [AppSidebarComponent]
-            }], appTopbar: [{
+            }], sidemenuTopbar: [{
+                type: ViewChild,
+                args: [SideMenuTopBarComponent]
+            }], topbarmenu: [{
                 type: ViewChild,
-                args: [AppTopBarComponent]
+                args: ['topbarmenu']
             }] } });
 
 // FT HACK: Fake class, because of api imports
@@ -4600,6 +4600,22 @@ const unauthorizedInterceptor = (req, next) => {
     }));
 };
 
+class SpiderlyTemplateTypeDirective {
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTemplateTypeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTemplateTypeDirective, isStandalone: true, selector: "[templateType]", inputs: { templateType: "templateType" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTemplateTypeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[templateType]',
+                }]
+        }], propDecorators: { templateType: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of spiderly
  */
@@ -4608,5 +4624,5 @@ const unauthorizedInterceptor = (req, next) => {
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiSecurityService, AppSidebarComponent, AppTopBarComponent, AuthBaseService, AuthGuard, AuthResult, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormCopy, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigBaseService, ExternalProvider, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, JwtAuthResult, LastMenuIconIndexClicked, LayoutBaseComponent, LayoutBaseService, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationResultStatusCodes, LoginVerificationToken, MenuChangeEvent, MenuitemComponent, MimeTypes, Namebook, NotAuthGuard, NotFoundComponent, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, Permission, PermissionSaveBody, PipedProperty, PrimengModule, PrimengOption, PropertyPipes, RefreshToken, RefreshTokenRequest, Registration, RegistrationComponent, RegistrationVerificationComponent, RegistrationVerificationResult, RegistrationVerificationResultStatusCodes, RegistrationVerificationToken, RequiredComponent, Role, RoleBaseDetailsComponent, RoleMainUIForm, RolePermission, RolePermissionSaveBody, RoleSaveBody, RowClickEvent, SecurityPermissionCodes, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButton, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorpickComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoFallbackStrategy, SpiderlyTranslocoLoader, SpiderlyTranslocoMissingHandler, SpiderlyTranslocoModule, TableFilter, TableFilterContext, TableFilterSortMeta, TableResponse, 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, 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 };
 //# sourceMappingURL=spiderly.mjs.map