@fuentis/phoenix-ui 0.0.9-alpha.154 → 0.0.9-alpha.156

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Pipe, inject, DestroyRef, input, CUSTOM_ELEMENTS_SCHEMA, signal, Injectable, Directive, forwardRef, computed } from '@angular/core';
+import { Input, ViewEncapsulation, Component, EventEmitter, Output, inject, input, computed, output, effect, ViewChild, ChangeDetectionStrategy, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, signal, Injectable, Directive, forwardRef } from '@angular/core';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$1 from '@angular/common';
@@ -10,39 +10,43 @@ import * as i3$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i3 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i3$2 from 'primeng/drawer';
+import * as i3$4 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i2$1 from '@angular/forms';
-import { FormsModule, FormBuilder, FormGroup, FormControl, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i13 from 'primeng/iconfield';
-import { IconField, IconFieldModule } from 'primeng/iconfield';
-import * as i14 from 'primeng/inputicon';
-import { InputIcon, InputIconModule } from 'primeng/inputicon';
-import * as i5 from 'primeng/inputtext';
+import * as i3$2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i4$3 from 'primeng/overlaypanel';
-import { OverlayPanelModule } from 'primeng/overlaypanel';
-import * as i4 from 'primeng/popover';
+import { MessageModule } from 'primeng/message';
+import * as i4$1 from 'primeng/popover';
 import { PopoverModule, Popover } from 'primeng/popover';
-import * as i1$2 from 'primeng/tabs';
-import { TabsModule } from 'primeng/tabs';
-import * as i6 from 'primeng/avatar';
-import { Avatar, AvatarModule } from 'primeng/avatar';
-import * as i4$1 from 'primeng/divider';
+import * as i6 from 'primeng/tabview';
+import { TabViewModule } from 'primeng/tabview';
+import * as i2$1 from '@angular/forms';
+import { FormsModule, FormBuilder, FormGroup, FormControl, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i5 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i4 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
+import * as i7 from 'primeng/image';
+import { ImageModule } from 'primeng/image';
+import { Subject, debounceTime, switchMap, of, BehaviorSubject, combineLatestWith, distinctUntilChanged, combineLatest } from 'rxjs';
+import * as i7$1 from 'primeng/iconfield';
+import { IconFieldModule } from 'primeng/iconfield';
+import * as i8 from 'primeng/inputicon';
+import { InputIconModule } from 'primeng/inputicon';
+import * as i3$3 from 'primeng/api';
+import { FilterMatchMode } from 'primeng/api';
+import * as i6$1 from 'primeng/avatar';
+import { Avatar, AvatarModule } from 'primeng/avatar';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import { TieredMenuModule } from 'primeng/tieredmenu';
 import * as i2$3 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3$3 from 'primeng/api';
-import { FilterMatchMode } from 'primeng/api';
-import * as i3$6 from 'primeng/multiselect';
+import * as i3$7 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i9 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i7 from 'primeng/tag';
+import * as i7$2 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import * as i2$2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
@@ -50,37 +54,34 @@ import * as i5$1 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import * as i17 from 'primeng/listbox';
 import { ListboxModule } from 'primeng/listbox';
-import * as i11 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
 import * as i12 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i1$4 from 'primeng/calendar';
+import * as i1$3 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
-import * as i3$8 from 'primeng/dropdown';
+import * as i3$9 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import * as i2$4 from 'primeng/editor';
 import { EditorModule } from 'primeng/editor';
 import { PanelModule } from 'primeng/panel';
-import { Subject, BehaviorSubject, combineLatestWith, debounceTime, switchMap, of, distinctUntilChanged, combineLatest } from 'rxjs';
 import * as i4$2 from '@angular/common/http';
-import * as i1$3 from 'primeng/dynamicdialog';
+import * as i4$3 from 'primeng/overlaypanel';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import * as i1$2 from 'primeng/dynamicdialog';
 import { DialogService } from 'primeng/dynamicdialog';
-import * as i3$4 from 'primeng/colorpicker';
+import * as i3$5 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
-import * as i3$5 from 'primeng/inputnumber';
+import * as i3$6 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i5$3 from 'primeng/keyfilter';
+import * as i5$2 from 'primeng/keyfilter';
 import { KeyFilterModule } from 'primeng/keyfilter';
-import * as i3$9 from 'primeng/inputswitch';
+import * as i3$a from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i3$7 from 'primeng/password';
+import * as i3$8 from 'primeng/password';
 import { PasswordModule } from 'primeng/password';
-import * as i5$2 from 'primeng/image';
-import { ImageModule } from 'primeng/image';
-import * as i3$a from 'primeng/textarea';
+import * as i3$b from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i1$5 from '@angular/platform-browser';
+import * as i1$4 from '@angular/platform-browser';
 import { MessagesModule } from 'primeng/messages';
 import * as i4$4 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
@@ -188,107 +189,472 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 type: Input
             }] } });
 
+class SearchCardComponent {
+    translate = inject(TranslateService);
+    searchData;
+    tab;
+    mocekedFilters;
+    checkboxes;
+    onScrollEvent = new EventEmitter();
+    onSelectLinkEvent = new EventEmitter();
+    onSelectFilterEvent = new EventEmitter();
+    language = input('en');
+    capitalizedLanguage = computed(() => {
+        if (!this.language())
+            return '';
+        return this.language().charAt(0).toUpperCase() + this.language().slice(1);
+    });
+    onScroll(scrollObj) {
+        this.onScrollEvent.emit(scrollObj);
+    }
+    setLinkUrl(link) {
+        this.onSelectLinkEvent.emit(link);
+    }
+    onClick(event, name) {
+        event?.originalEvent?.stopPropagation();
+        const data = {
+            event: event,
+            value: { checked: event.checked },
+            name: name,
+        };
+        this.onSelectFilterEvent.emit(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: { classPropertyName: "searchData", publicName: "searchData", isSignal: false, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: false, isRequired: false, transformFunction: null }, mocekedFilters: { classPropertyName: "mocekedFilters", publicName: "mocekedFilters", isSignal: false, isRequired: false, transformFunction: null }, checkboxes: { classPropertyName: "checkboxes", publicName: "checkboxes", isSignal: false, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScrollEvent: "onScrollEvent", onSelectLinkEvent: "onSelectLinkEvent", onSelectFilterEvent: "onSelectFilterEvent" }, ngImport: i0, template: "<ng-container>\n  <div class=\"flex h-20rem\">\n    <div\n      class=\"overflow-y-auto\"\n      [style.width.vw]=\"35\"\n      (scroll)=\"onScroll($event)\"\n      *ngIf=\"searchData?.length > 0; else message\"\n    >\n      <ng-container *ngFor=\"let link of searchData\">\n        <div\n          class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n          (click)=\"setLinkUrl(link)\"\n        >\n          <p-image\n            class=\"border-round-sm p-2 mt-1\"\n            [src]=\"\n              'assets/layout/images/object_types/pink/full/' +\n              link.type.labelKey +\n              '.svg'\n            \"\n            height=\"24\"\n            width=\"27\"\n          ></p-image>\n          <div class=\"flex flex-column justify-content-around ml-2\">\n            <span\n              [pTooltip]=\"link.name\"\n              tooltipPosition=\"bottom\"\n              class=\"mt-1 font-light text-lg\"\n            >\n              <small class=\"mr-2 font-light text-lg\"\n                >{{ link.title | slice : 0 : 50\n                }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n              >\n\n              {{ link.name | slice : 0 : 50\n              }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n              <small class=\"font-light text-base text-400\">{{\n                link.type?.['labelKeyVal'+capitalizedLanguage] | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"COMMON.ENTITY\" | translate }}:&nbsp;{{\n                  link.entity.name | slice : 0 : 50\n                }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n              <span\n                [pTooltip]=\"link.asset.name\"\n                *ngIf=\"link?.asset?.name\"\n                class=\"ml-2 mb-1 text-sm\"\n                >{{ \"COMMON.ASSET\" | translate }}:&nbsp;{{\n                  link.asset.name | slice : 0 : 50\n                }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container\n      *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n    >\n      <p-divider layout=\"vertical\"></p-divider>\n      <div\n        class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n      >\n        <ng-container *ngFor=\"let item of mocekedFilters\">\n          <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n            >{{ item.title | translate }}\n          </span>\n          <div class=\"h-25rem flex flex-column justify-content-start\">\n            <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n              <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n                <p-checkbox\n                  [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n                  [binary]=\"true\"\n                  [inputId]=\"checkbox?.name\"\n                  (onChange)=\"onClick($event, checkbox?.labelKey)\"\n                ></p-checkbox>\n\n                <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n                  \"LABELS.\" + checkbox.name | translate\n                }}</label>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n<ng-template #message>\n  <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n    {{ \"MESSAGE.NO_RESULTS_FOUND\" | translate }}\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: DividerModule }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.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: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i7.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pho-serach-card', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        TooltipModule,
+                        DividerModule,
+                        CheckboxModule,
+                        FormsModule,
+                        ImageModule,
+                    ], template: "<ng-container>\n  <div class=\"flex h-20rem\">\n    <div\n      class=\"overflow-y-auto\"\n      [style.width.vw]=\"35\"\n      (scroll)=\"onScroll($event)\"\n      *ngIf=\"searchData?.length > 0; else message\"\n    >\n      <ng-container *ngFor=\"let link of searchData\">\n        <div\n          class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n          (click)=\"setLinkUrl(link)\"\n        >\n          <p-image\n            class=\"border-round-sm p-2 mt-1\"\n            [src]=\"\n              'assets/layout/images/object_types/pink/full/' +\n              link.type.labelKey +\n              '.svg'\n            \"\n            height=\"24\"\n            width=\"27\"\n          ></p-image>\n          <div class=\"flex flex-column justify-content-around ml-2\">\n            <span\n              [pTooltip]=\"link.name\"\n              tooltipPosition=\"bottom\"\n              class=\"mt-1 font-light text-lg\"\n            >\n              <small class=\"mr-2 font-light text-lg\"\n                >{{ link.title | slice : 0 : 50\n                }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n              >\n\n              {{ link.name | slice : 0 : 50\n              }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n              <small class=\"font-light text-base text-400\">{{\n                link.type?.['labelKeyVal'+capitalizedLanguage] | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"COMMON.ENTITY\" | translate }}:&nbsp;{{\n                  link.entity.name | slice : 0 : 50\n                }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n              <span\n                [pTooltip]=\"link.asset.name\"\n                *ngIf=\"link?.asset?.name\"\n                class=\"ml-2 mb-1 text-sm\"\n                >{{ \"COMMON.ASSET\" | translate }}:&nbsp;{{\n                  link.asset.name | slice : 0 : 50\n                }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container\n      *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n    >\n      <p-divider layout=\"vertical\"></p-divider>\n      <div\n        class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n      >\n        <ng-container *ngFor=\"let item of mocekedFilters\">\n          <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n            >{{ item.title | translate }}\n          </span>\n          <div class=\"h-25rem flex flex-column justify-content-start\">\n            <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n              <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n                <p-checkbox\n                  [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n                  [binary]=\"true\"\n                  [inputId]=\"checkbox?.name\"\n                  (onChange)=\"onClick($event, checkbox?.labelKey)\"\n                ></p-checkbox>\n\n                <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n                  \"LABELS.\" + checkbox.name | translate\n                }}</label>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n<ng-template #message>\n  <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n    {{ \"MESSAGE.NO_RESULTS_FOUND\" | translate }}\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { searchData: [{
+                type: Input
+            }], tab: [{
+                type: Input
+            }], mocekedFilters: [{
+                type: Input
+            }], checkboxes: [{
+                type: Input
+            }], onScrollEvent: [{
+                type: Output
+            }], onSelectLinkEvent: [{
+                type: Output
+            }], onSelectFilterEvent: [{
+                type: Output
+            }] } });
+
+var ComplItems;
+(function (ComplItems) {
+    ComplItems["COMPL_APPLIED_MODULES"] = "COMPL_APPLIED_MODULES";
+    ComplItems["COMPL_APPLIED_MEASURE"] = "COMPL_APPLIED_MEASURE";
+    ComplItems["COMPL_APPLIED_REQUIREMENT"] = "COMPL_APPLIED_REQUIREMENT";
+    ComplItems["COMPL_APPLIED_THREAT"] = "COMPL_APPLIED_THREAT";
+    ComplItems["COMPL_APPLIED_CONTROL"] = "COMPL_APPLIED_CONTROL";
+    ComplItems["COMPL_SCOPE"] = "COMPL_SCOPE";
+    ComplItems["COMPL_TOT_BUILDING"] = "COMPL_TOT_BUILDING";
+    ComplItems["COMPL_TOT_DOMAIN"] = "COMPL_TOT_DOMAIN";
+    ComplItems["COMPL_TOT_INFORMATION"] = "COMPL_TOT_INFORMATION";
+    ComplItems["COMPL_TOT_BUSINESS"] = "COMPL_TOT_BUSINESS_PROCESS";
+    ComplItems["COMPL_TOT_APPLICATION"] = "COMPL_TOT_APPLICATION";
+    ComplItems["COMPL_TOT_ITSYSETEM"] = "COMPL_TOT_IT_SYSTEM";
+    ComplItems["COMPL_TOT_NETWORK"] = "COMPL_TOT_NETWORK";
+    ComplItems["COMPL_TOT_EMPLOYEE"] = "COMPL_TOT_EMPLOYEE";
+    ComplItems["COMPL_TOT_INFRASTRUCTURE"] = "COMPL_TOT_INFRASTRUCTURE";
+    ComplItems["COMPL_TOT_OUTSORCING"] = "COMPL_TOT_OUTSORCING";
+    ComplItems["COMPL_TOT_PHYSICAL_FACILITY"] = "COMPL_TOT_PHYSICAL_FACILITY";
+    ComplItems["COMPL_TOT_ROOM"] = "COMPL_TOT_ROOM";
+    ComplItems["COMPL_TOGS"] = "COMPL_TOGS";
+    ComplItems["RISK"] = "RISK";
+})(ComplItems || (ComplItems = {}));
+
+class SoTypes {
+    static COMPL_APPLIED_MODULE = 'COMPL_APPLIED_MODULE';
+    static COMPL_APPLIED_MEASURE = 'COMPL_APPLIED_MEASURE';
+    static COMPL_APPLIED_REQUIREMENT = 'COMPL_APPLIED_REQUIREMENT';
+    static COMPL_APPLIED_THREAT = 'COMPL_APPLIED_THREAT';
+    static COMPL_APPLIED_RISK = 'COMPL_APPLIED_RISK';
+    static COMPL_APPLIED_CONTROL = 'COMPL_APPLIED_CONTROL';
+    static resolveUrlType(typeLabelKey) {
+        switch (typeLabelKey) {
+            case SoTypes.COMPL_APPLIED_MODULE:
+                return SoTypesString.MODULES;
+            case SoTypes.COMPL_APPLIED_CONTROL:
+                return SoTypesString.CONTROLS;
+            case SoTypes.COMPL_APPLIED_REQUIREMENT:
+                return SoTypesString.REQUIREMENTS;
+            case SoTypes.COMPL_APPLIED_MEASURE:
+                return SoTypesString.MEASURES;
+            case SoTypes.COMPL_APPLIED_THREAT:
+                return SoTypesString.THREATS;
+            case SoTypes.COMPL_APPLIED_RISK:
+                return SoTypesString.RISKS;
+            case 'COMPL_RISK_OBJECT':
+                return SoTypesString.RISKS;
+            default:
+                return SoTypesString.MODULES;
+        }
+    }
+    static resolveUrlTypeByString(stringType) {
+        switch (stringType) {
+            case SoTypesString.MODULES:
+                return SoTypes.COMPL_APPLIED_MODULE;
+            case SoTypesString.CONTROLS:
+                return SoTypes.COMPL_APPLIED_CONTROL;
+            case SoTypesString.REQUIREMENTS:
+                return SoTypes.COMPL_APPLIED_REQUIREMENT;
+            case SoTypesString.MEASURES:
+                return SoTypes.COMPL_APPLIED_MEASURE;
+            case SoTypesString.THREATS:
+                return SoTypes.COMPL_APPLIED_THREAT;
+            case SoTypesString.RISKS:
+                return SoTypes.COMPL_APPLIED_RISK;
+            default:
+                return SoTypes.COMPL_APPLIED_MODULE;
+        }
+    }
+}
+var SoTypesString;
+(function (SoTypesString) {
+    SoTypesString["MODULES"] = "modules";
+    SoTypesString["REQUIREMENTS"] = "requirements";
+    SoTypesString["MEASURES"] = "measures";
+    SoTypesString["THREATS"] = "threats";
+    SoTypesString["RISKS"] = "risks";
+    SoTypesString["VULNERABILITIES"] = "vulnerabilities";
+    SoTypesString["DAMAGE_SCENARIO"] = "damagescenarios";
+    SoTypesString["RISK_TREATMENT"] = "risktreatments";
+    SoTypesString["CONTROLS"] = "controls";
+    SoTypesString["ADDITIONAL_MEASURES"] = "additionalmeasures";
+})(SoTypesString || (SoTypesString = {}));
+
 class SearchBarComponent {
-    isExpanded = false;
-    searchQuery = '';
+    translate;
+    set nes(nes) {
+        if (nes) {
+            this.op = nes;
+        }
+    }
+    elm;
     op;
-    expandable = true;
-    placeholder = 'Global Search...';
-    message = 'Start typing to see data';
-    searchQueryChange = new EventEmitter();
-    // TODO: remove this when done
+    isOpen = false;
+    valueChanges = new Subject();
+    inputEvent;
+    clonedData;
+    searchData;
+    size = 10;
+    textValue;
+    checkboxes;
+    valueSub$;
     tabIndex = 0;
-    assetActive = false;
-    ismsActive = false;
-    tabChange(event) {
-        this.tabIndex = event.index;
-    }
-    members = [
+    trigg = true;
+    mocekedFilters = [
         {
-            name: 'Amy Elsner',
-            image: 'amyelsner.png',
-            email: 'amy@email.com',
-            role: 'Owner',
+            title: 'LABELS.FILTER_BY_TYPE',
+            checkboxes: [],
         },
     ];
-    toggleExpand() {
-        this.isExpanded = !this.isExpanded;
+    treeCollectionMap;
+    reloadSubscription$;
+    inputText;
+    ismsActive = input(true);
+    assetActive = input(true);
+    language = input('en');
+    data = input();
+    searchInputEvent = output();
+    linkClikEvent = output();
+    constructor(translate) {
+        this.translate = translate;
+        this.valueSub$ = this.valueChanges
+            .pipe(debounceTime(400), switchMap((value) => {
+            this.inputEvent = value;
+            const target = value?.target;
+            this.size = 10;
+            this.inputText = target?.value;
+            if (target?.value) {
+                this.textValue = target.value;
+                switch (this.tabIndex) {
+                    case 1:
+                        return of({
+                            inputData: target.value,
+                            size: this.size,
+                            tabIndex: 1,
+                        });
+                    default:
+                        return of({
+                            inputData: target.value,
+                            size: this.size,
+                            tabIndex: 0,
+                        });
+                }
+            }
+            else {
+                return of(null);
+            }
+        }))
+            .subscribe((event) => {
+            if (event) {
+                this.searchInputEvent.emit(event);
+            }
+        });
+        effect(() => {
+            if (this.data()) {
+                this.searchData = [...this.data()];
+                this.clonedData = [...this.data()];
+                this.populateFilters(this.data());
+                this.trigg = true;
+                this.filterData();
+            }
+        });
+    }
+    populateFilters(data) {
+        this.checkboxes = {};
+        if (this.tabIndex === 0) {
+            this.checkboxes = {
+                COMPL_APPLIED_MODULES: false,
+                COMPL_APPLIED_REQUIREMENT: false,
+                COMPL_APPLIED_MEASURE: false,
+                COMPL_APPLIED_THREAT: false,
+                COMPL_APPLIED_RISKS: false,
+                COMPL_SCOPE: false,
+                COMPL_TOGS: false,
+                RISK: false,
+            };
+        }
+        else {
+            if (data !== undefined) {
+                data.forEach((item) => {
+                    if (item?.type?.labelKey) {
+                        this.checkboxes[item.type.labelKey] = false;
+                    }
+                });
+            }
+            else {
+                this.checkboxes = {};
+            }
+        }
     }
-    onInputFocus(event) {
-        this.isExpanded = true;
-        if (this.op) {
-            this.op.show(event);
+    expand() {
+        if (this.ismsActive() || this.assetActive()) {
+            this.isOpen = true;
+            if (!this.ismsActive()) {
+                this.tabChange({ index: 1 });
+            }
         }
     }
-    clickInside(event) {
-        console.log('clickInside', event);
+    setLinkUrl(data) {
+        this.linkClikEvent.emit(data);
+    }
+    onScroll(scrollObj) {
+        if (scrollObj?.target &&
+            scrollObj.target.offsetHeight +
+                scrollObj.target.scrollTop >=
+                scrollObj.target.scrollHeight) {
+            if (this.size <= 100) {
+                this.size = this.size + 10;
+                this.searchInputEvent.emit({
+                    inputData: this.textValue,
+                    size: this.size,
+                    tabIndex: this.tabIndex,
+                });
+            }
+        }
+    }
+    onClick(data) {
+        this.checkboxes[data.name] = data.value.checked;
+        this.filterData();
+    }
+    filterData() {
+        let arr = [];
+        for (const key in this.checkboxes) {
+            if (this.checkboxes[key]) {
+                arr.push(key);
+            }
+            if (this.checkboxes[ComplItems.COMPL_TOGS]) {
+                arr = arr.concat([
+                    ComplItems.COMPL_TOT_BUILDING,
+                    ComplItems.COMPL_TOT_DOMAIN,
+                    ComplItems.COMPL_TOT_INFORMATION,
+                    ComplItems.COMPL_TOT_BUSINESS,
+                    ComplItems.COMPL_TOT_APPLICATION,
+                    ComplItems.COMPL_TOT_ITSYSETEM,
+                    ComplItems.COMPL_TOT_NETWORK,
+                    ComplItems.COMPL_TOT_EMPLOYEE,
+                    ComplItems.COMPL_TOT_INFRASTRUCTURE,
+                    ComplItems.COMPL_TOT_OUTSORCING,
+                    ComplItems.COMPL_TOT_PHYSICAL_FACILITY,
+                    ComplItems.COMPL_TOT_ROOM,
+                ]);
+            }
+        }
+        if (arr.length === 0) {
+            this.searchData = this.clonedData;
+        }
+        else {
+            this.searchData = this.clonedData?.filter((item) => {
+                if (arr.includes(item.type.labelKey)) {
+                    return item;
+                }
+                else {
+                    return null;
+                }
+            });
+        }
+        this.setCheckBoxes();
+    }
+    onParentClick(event) {
+        setTimeout(() => {
+            this.op?.show(event, this.elm.nativeElement);
+        }, 120);
+    }
+    tabChange(data) {
+        this.searchData = [];
+        this.clonedData = [];
+        this.filterData();
+        this.tabIndex = data.index;
+        this.searchInputEvent.emit({
+            inputData: this.textValue,
+            size: this.size,
+            tabIndex: this.tabIndex,
+        });
     }
-    onInputBlur(event) {
-        if (this.op) {
-            console.log(event);
-            setTimeout(() => {
-                this.op.hide();
-                this.isExpanded = false;
-            }, 200);
+    setCheckBoxes() {
+        if (this.trigg) {
+            this.mocekedFilters[0].checkboxes = [];
+            const lablesArr = [];
+            if (this.tabIndex === 0) {
+                this.mocekedFilters[0].checkboxes = [
+                    {
+                        name: 'MODULES',
+                        labelKey: ComplItems.COMPL_APPLIED_MODULES,
+                        value: false,
+                    },
+                    {
+                        name: 'REQUIREMENTS',
+                        labelKey: ComplItems.COMPL_APPLIED_REQUIREMENT,
+                        value: false,
+                    },
+                    {
+                        name: 'MEASURES',
+                        labelKey: ComplItems.COMPL_APPLIED_MEASURE,
+                        value: false,
+                    },
+                    {
+                        name: 'CONTROLS',
+                        labelKey: ComplItems.COMPL_APPLIED_CONTROL,
+                        value: false,
+                    },
+                    {
+                        name: 'THREATS',
+                        labelKey: ComplItems.COMPL_APPLIED_THREAT,
+                        value: false,
+                    },
+                    {
+                        name: 'RISKS',
+                        labelKey: ComplItems.RISK,
+                        value: false,
+                    },
+                    {
+                        name: 'COMPL_SCOPE',
+                        labelKey: ComplItems.COMPL_SCOPE,
+                        value: false,
+                    },
+                    {
+                        name: 'COMPL_TOGS',
+                        labelKey: ComplItems.COMPL_TOGS,
+                        value: false,
+                    },
+                ];
+            }
+            else {
+                this.searchData?.forEach((item) => {
+                    if (!lablesArr.includes(item.type.labelKey)) {
+                        const str = this.translate.currentLang;
+                        const label = 'labelKeyVal' + str.charAt(0).toUpperCase() + str.slice(1);
+                        this.mocekedFilters[0].checkboxes.push({
+                            name: item.type[label],
+                            labelKey: item.type.labelKey,
+                            value: false,
+                        });
+                        lablesArr.push(item.type.labelKey);
+                    }
+                });
+            }
+            // this.trigg = false;
         }
     }
-    clickOutside(event) {
-        console.log('clickOutside', event);
+    resolvePhase(type) {
+        switch (type) {
+            case SoTypes.COMPL_APPLIED_THREAT:
+            case SoTypes.COMPL_APPLIED_MEASURE:
+            case SoTypes.COMPL_APPLIED_MODULE:
+            case SoTypes.COMPL_APPLIED_REQUIREMENT:
+            case SoTypes.COMPL_APPLIED_CONTROL:
+                return 'sc';
+            case SoTypes.COMPL_APPLIED_THREAT:
+            case 'COMPL_RISK_OBJECT':
+                return 'ra';
+            default:
+                return 'ia';
+        }
     }
-    onSearchQueryChange() {
-        this.searchQueryChange.emit(this.searchQuery);
+    ngOnDestroy() {
+        if (this.valueSub$)
+            this.valueSub$.unsubscribe();
+        if (this.reloadSubscription$)
+            this.reloadSubscription$.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { expandable: "expandable", placeholder: "placeholder", message: "message" }, outputs: { searchQueryChange: "searchQueryChange" }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }], ngImport: i0, template: "<p-iconfield [@openClose]=\"isExpanded ? 'open' : 'closed'\" style=\"width: 100%\">\n  <p-inputicon styleClass=\"pi pi-search\" />\n  <input\n    pInputText\n    type=\"text\"\n    style=\"width: 100%\"\n    [ngStyle]=\"{ 'font-size': '14px' }\"\n    [(ngModel)]=\"searchQuery\"\n    [placeholder]=\"placeholder\"\n    (focus)=\"onInputFocus($event)\"\n    (blur)=\"onInputBlur($event)\"\n  />\n</p-iconfield>\n<p-popover\n  #op\n  [dismissable]=\"false\"\n  [style]=\"{ width: '50vw' }\"\n  (click)=\"clickInside($event)\"\n  [showTransitionOptions]=\"'.2s ease-in'\"\n  [hideTransitionOptions]=\"'.2s ease-in-out'\"\n>\n  <div\n    role=\"banner\"\n    *ngIf=\"!searchQuery\"\n    style=\"border-radius: 3px\"\n    class=\"text-center text-blue-900 p-inline-message-text p-2 bg-pho-secondary\"\n  >\n    <i class=\"pi pi-info-circle mr-2\"></i>\n    <p class=\"inline\">{{ message }}</p>\n  </div>\n\n  <ng-content></ng-content>\n\n  <div\n    *ngIf=\"searchQuery\"\n    class=\"flex fit-content flex-wrap\"\n    style=\"width: 100%\"\n  >\n    <div\n      class=\"overflow-container\"\n      style=\"\n        overflow-y: auto;\n        max-height: 70vh;\n        width: 100%;\n        word-wrap: break-word;\n      \"\n    >\n      <p-tabs value=\"ISMS\">\n        <p-tablist>\n          <p-tab value=\"ISMS\">ISMS</p-tab>\n          <p-tab value=\"BCMS\">BCMS</p-tab>\n        </p-tablist>\n        <p-tabpanels>\n          <p-tabpanel value=\"ISMS\">\n            <div>\n              <h3>Isms</h3>\n              <p>Searching for: {{ searchQuery }}</p>\n            </div>\n          </p-tabpanel>\n\n          <p-tabpanel value=\"BCMS\">\n            <div>\n              <h3>People Results</h3>\n              <p>People matching: {{ searchQuery }}</p>\n            </div>\n          </p-tabpanel>\n        </p-tabpanels>\n      </p-tabs>\n    </div>\n  </div>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"], dependencies: [{ kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1$2.TabList, selector: "p-tablist" }, { kind: "component", type: i1$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: OverlayPanelModule }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchBarComponent, deps: [{ token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { ismsActive: { classPropertyName: "ismsActive", publicName: "ismsActive", isSignal: true, isRequired: false, transformFunction: null }, assetActive: { classPropertyName: "assetActive", publicName: "assetActive", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchInputEvent: "searchInputEvent", linkClikEvent: "linkClikEvent" }, viewQueries: [{ propertyName: "nes", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"onParentClick($event)\" class=\"p-input-icon-left ml-1\" #elm>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"expand(); onParentClick($event)\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw' }\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGE.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    <p-tabView\n      [(activeIndex)]=\"tabIndex\"\n      *ngIf=\"searchData\"\n      (onChange)=\"tabChange($event)\"\n    >\n      <p-tabPanel header=\"ISMS\" [disabled]=\"!ismsActive\">\n        <pho-serach-card\n          [language]=\"language()\"\n          [tab]=\"tabIndex\"\n          [mocekedFilters]=\"mocekedFilters\"\n          [searchData]=\"searchData\"\n          [checkboxes]=\"checkboxes\"\n          (onScrollEvent)=\"onScroll($event)\"\n          (onSelectLinkEvent)=\"setLinkUrl($event)\"\n          (onSelectFilterEvent)=\"onClick($event)\"\n        >\n        </pho-serach-card> </p-tabPanel\n      ><p-tabPanel header=\"ASSM\" [disabled]=\"!assetActive\">\n        <pho-serach-card\n          [language]=\"language()\"\n          [tab]=\"tabIndex\"\n          [mocekedFilters]=\"mocekedFilters\"\n          [searchData]=\"searchData\"\n          [checkboxes]=\"checkboxes\"\n          (onScrollEvent)=\"onScroll($event)\"\n          (onSelectLinkEvent)=\"setLinkUrl($event)\"\n          (onSelectFilterEvent)=\"onClick($event)\"\n        >\n        </pho-serach-card> </p-tabPanel\n    ></p-tabView>\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabViewModule }, { kind: "component", type: i6.TabView, selector: "p-tabView, p-tabview", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i6.TabPanel, selector: "p-tabPanel, p-tabpanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes", "language"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
             trigger('openClose', [
-                state('closed', style({
-                    width: '13vw',
-                    opacity: 0.8,
-                })),
                 state('open', style({
                     width: '50vw',
                     opacity: 1,
                 })),
-                transition('closed <=> open', [animate('300ms ease-in-out')]),
+                state('closed', style({
+                    width: '13vw',
+                    opacity: 0.8,
+                })),
+                transition('* <=> *', [animate('0.1s ease-in-out')]),
             ]),
         ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pho-search-bar', standalone: true, imports: [
-                        IconField,
-                        InputIcon,
-                        TabsModule,
-                        FormsModule,
                         CommonModule,
+                        InputTextModule,
                         PopoverModule,
+                        TabViewModule,
+                        MessageModule,
                         TranslateModule,
-                        InputTextModule,
-                        OverlayPanelModule,
+                        SearchCardComponent,
+                        IconFieldModule,
+                        InputIconModule,
                     ], animations: [
                         trigger('openClose', [
-                            state('closed', style({
-                                width: '13vw',
-                                opacity: 0.8,
-                            })),
                             state('open', style({
                                 width: '50vw',
                                 opacity: 1,
                             })),
-                            transition('closed <=> open', [animate('300ms ease-in-out')]),
+                            state('closed', style({
+                                width: '13vw',
+                                opacity: 0.8,
+                            })),
+                            transition('* <=> *', [animate('0.1s ease-in-out')]),
                         ]),
-                    ], template: "<p-iconfield [@openClose]=\"isExpanded ? 'open' : 'closed'\" style=\"width: 100%\">\n  <p-inputicon styleClass=\"pi pi-search\" />\n  <input\n    pInputText\n    type=\"text\"\n    style=\"width: 100%\"\n    [ngStyle]=\"{ 'font-size': '14px' }\"\n    [(ngModel)]=\"searchQuery\"\n    [placeholder]=\"placeholder\"\n    (focus)=\"onInputFocus($event)\"\n    (blur)=\"onInputBlur($event)\"\n  />\n</p-iconfield>\n<p-popover\n  #op\n  [dismissable]=\"false\"\n  [style]=\"{ width: '50vw' }\"\n  (click)=\"clickInside($event)\"\n  [showTransitionOptions]=\"'.2s ease-in'\"\n  [hideTransitionOptions]=\"'.2s ease-in-out'\"\n>\n  <div\n    role=\"banner\"\n    *ngIf=\"!searchQuery\"\n    style=\"border-radius: 3px\"\n    class=\"text-center text-blue-900 p-inline-message-text p-2 bg-pho-secondary\"\n  >\n    <i class=\"pi pi-info-circle mr-2\"></i>\n    <p class=\"inline\">{{ message }}</p>\n  </div>\n\n  <ng-content></ng-content>\n\n  <div\n    *ngIf=\"searchQuery\"\n    class=\"flex fit-content flex-wrap\"\n    style=\"width: 100%\"\n  >\n    <div\n      class=\"overflow-container\"\n      style=\"\n        overflow-y: auto;\n        max-height: 70vh;\n        width: 100%;\n        word-wrap: break-word;\n      \"\n    >\n      <p-tabs value=\"ISMS\">\n        <p-tablist>\n          <p-tab value=\"ISMS\">ISMS</p-tab>\n          <p-tab value=\"BCMS\">BCMS</p-tab>\n        </p-tablist>\n        <p-tabpanels>\n          <p-tabpanel value=\"ISMS\">\n            <div>\n              <h3>Isms</h3>\n              <p>Searching for: {{ searchQuery }}</p>\n            </div>\n          </p-tabpanel>\n\n          <p-tabpanel value=\"BCMS\">\n            <div>\n              <h3>People Results</h3>\n              <p>People matching: {{ searchQuery }}</p>\n            </div>\n          </p-tabpanel>\n        </p-tabpanels>\n      </p-tabs>\n    </div>\n  </div>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"] }]
-        }], propDecorators: { op: [{
+                    ], template: "<div (click)=\"onParentClick($event)\" class=\"p-input-icon-left ml-1\" #elm>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"expand(); onParentClick($event)\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw' }\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGE.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    <p-tabView\n      [(activeIndex)]=\"tabIndex\"\n      *ngIf=\"searchData\"\n      (onChange)=\"tabChange($event)\"\n    >\n      <p-tabPanel header=\"ISMS\" [disabled]=\"!ismsActive\">\n        <pho-serach-card\n          [language]=\"language()\"\n          [tab]=\"tabIndex\"\n          [mocekedFilters]=\"mocekedFilters\"\n          [searchData]=\"searchData\"\n          [checkboxes]=\"checkboxes\"\n          (onScrollEvent)=\"onScroll($event)\"\n          (onSelectLinkEvent)=\"setLinkUrl($event)\"\n          (onSelectFilterEvent)=\"onClick($event)\"\n        >\n        </pho-serach-card> </p-tabPanel\n      ><p-tabPanel header=\"ASSM\" [disabled]=\"!assetActive\">\n        <pho-serach-card\n          [language]=\"language()\"\n          [tab]=\"tabIndex\"\n          [mocekedFilters]=\"mocekedFilters\"\n          [searchData]=\"searchData\"\n          [checkboxes]=\"checkboxes\"\n          (onScrollEvent)=\"onScroll($event)\"\n          (onSelectLinkEvent)=\"setLinkUrl($event)\"\n          (onSelectFilterEvent)=\"onClick($event)\"\n        >\n        </pho-serach-card> </p-tabPanel\n    ></p-tabView>\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i3$1.TranslateService }], propDecorators: { nes: [{
                 type: ViewChild,
                 args: ['op']
-            }], expandable: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], searchQueryChange: [{
-                type: Output
+            }], elm: [{
+                type: ViewChild,
+                args: ['elm', { static: true }]
             }] } });
 
 class UserComponent {
@@ -330,29 +696,29 @@ class UserComponent {
             <div>{{ user?.username }}</div>
             <div>{{ user?.email }}</div>
           </div>
-          <div
-            class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
-          ></div>
-          <div class="flex flex-row justify-content-between mt-2 pt-1">
-            <a
-              class="flex flex-row align-items-center cursor-pointer ml-2"
-              (click)="editSettings.emit()"
-              pRipple
-            >
-              <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
-              <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
-            </a>
+        </div>
+        <div
+          class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
+        ></div>
+        <div class="flex flex-row justify-content-between mt-2 pt-1">
+          <a
+            class="flex flex-row align-items-center cursor-pointer ml-2"
+            (click)="editSettings.emit()"
+            pRipple
+          >
+            <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
+            <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
+          </a>
 
-            <a
-              style="color: red"
-              class="flex flex-row align-items-center cursor-pointer mr-3"
-              (click)="logout.emit()"
-              pRipple
-            >
-              <i class="pi pi-power-off p-2"></i>
-              <span>{{ 'ACTION.LOGOUT' | translate }}</span>
-            </a>
-          </div>
+          <a
+            style="color: red"
+            class="flex flex-row align-items-center cursor-pointer mr-3"
+            (click)="logout.emit()"
+            pRipple
+          >
+            <i class="pi pi-power-off p-2"></i>
+            <span>{{ 'ACTION.LOGOUT' | translate }}</span>
+          </a>
         </div>
       </div>
       }
@@ -407,29 +773,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             <div>{{ user?.username }}</div>
             <div>{{ user?.email }}</div>
           </div>
-          <div
-            class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
-          ></div>
-          <div class="flex flex-row justify-content-between mt-2 pt-1">
-            <a
-              class="flex flex-row align-items-center cursor-pointer ml-2"
-              (click)="editSettings.emit()"
-              pRipple
-            >
-              <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
-              <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
-            </a>
+        </div>
+        <div
+          class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
+        ></div>
+        <div class="flex flex-row justify-content-between mt-2 pt-1">
+          <a
+            class="flex flex-row align-items-center cursor-pointer ml-2"
+            (click)="editSettings.emit()"
+            pRipple
+          >
+            <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
+            <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
+          </a>
 
-            <a
-              style="color: red"
-              class="flex flex-row align-items-center cursor-pointer mr-3"
-              (click)="logout.emit()"
-              pRipple
-            >
-              <i class="pi pi-power-off p-2"></i>
-              <span>{{ 'ACTION.LOGOUT' | translate }}</span>
-            </a>
-          </div>
+          <a
+            style="color: red"
+            class="flex flex-row align-items-center cursor-pointer mr-3"
+            (click)="logout.emit()"
+            pRipple
+          >
+            <i class="pi pi-power-off p-2"></i>
+            <span>{{ 'ACTION.LOGOUT' | translate }}</span>
+          </a>
         </div>
       </div>
       }
@@ -473,6 +839,12 @@ class TopbarComponent {
     };
     onDarkModeSelect = new EventEmitter();
     onUserPopoverAction = new EventEmitter();
+    searchInputEvent = output();
+    linkClikEvent = output();
+    searchResult = input();
+    ismsActive = input(true);
+    assetActive = input(true);
+    language = input('en');
     openSidebarPanel() {
         this.isSidebarVisible = true;
     }
@@ -494,7 +866,7 @@ class TopbarComponent {
             : `url('assets/default-user.png')`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: "homeUrl", user: "user", shortModuleName: "shortModuleName", topbarModulesMenu: "topbarModulesMenu", darkModeSelector: "darkModeSelector", footerConfig: "footerConfig" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, ngImport: i0, template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n    <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n    <span class=\"text-xl text-400 mt-2\">\n      {{ shortModuleName }}\n    </span>\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n      (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-20rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <div class=\"flex flex-column h-full\">\n    <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n    <ng-container\n      *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n    >\n      <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label | translate }}</h4>\n\n      <div class=\"grid\">\n        <!-- If layout is 'full', it takes up the entire row -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n          >\n            <a\n              class=\"text-primary flex align-items-center gap-3\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <div>\n                <h4 class=\"mb-0 mt-0\">{{ module.label | translate }}</h4>\n                <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n                  {{ (module.fullName || '') | translate }}\n                </p>\n              </div>\n            </a>\n          </div>\n        </ng-container>\n\n        <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{ module.label | translate }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Divider between module groups (except after the last one) -->\n      <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n    </ng-container>\n\n    <!-- Footer links -->\n    <div class=\"mt-auto p-2\">\n      <p-divider class=\"mt-2 mb-2\"></p-divider>\n      <div class=\"flex justify-content-between pb-3\">\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle p-2\"></i>\n            {{ footerConfig.guideLabel | translate }}\n          </span>\n        </a>\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.companyUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName | translate }}\n          </span>\n        </a>\n      </div>\n\n      <div class=\"text-500 text-sm pl-2\">\n        {{ footerConfig.copyrightText | translate }}\n      </div>\n    </div>\n  </div>\n</p-drawer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["expandable", "placeholder", "message"], outputs: ["searchQueryChange"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["logout", "editSettings"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: { classPropertyName: "homeUrl", publicName: "homeUrl", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, shortModuleName: { classPropertyName: "shortModuleName", publicName: "shortModuleName", isSignal: false, isRequired: false, transformFunction: null }, topbarModulesMenu: { classPropertyName: "topbarModulesMenu", publicName: "topbarModulesMenu", isSignal: false, isRequired: false, transformFunction: null }, darkModeSelector: { classPropertyName: "darkModeSelector", publicName: "darkModeSelector", isSignal: false, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: false, isRequired: false, transformFunction: null }, searchResult: { classPropertyName: "searchResult", publicName: "searchResult", isSignal: true, isRequired: false, transformFunction: null }, ismsActive: { classPropertyName: "ismsActive", publicName: "ismsActive", isSignal: true, isRequired: false, transformFunction: null }, assetActive: { classPropertyName: "assetActive", publicName: "assetActive", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction", searchInputEvent: "searchInputEvent", linkClikEvent: "linkClikEvent" }, ngImport: i0, template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n    <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n    <span class=\"text-xl text-400 mt-2\">\n      {{ shortModuleName }}\n    </span>\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar\n      [data]=\"searchResult()\"\n      [ismsActive]=\"ismsActive() ?? true\"\n      [assetActive]=\"assetActive() ?? true\"\n      [language]=\"language() ?? 'en'\"\n      (searchInputEvent)=\"searchInputEvent.emit($event)\"\n      (linkClikEvent)=\"linkClikEvent.emit($event)\"\n    ></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n      (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-20rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <div class=\"flex flex-column h-full\">\n    <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n    <ng-container\n      *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n    >\n      <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label | translate }}</h4>\n\n      <div class=\"grid\">\n        <!-- If layout is 'full', it takes up the entire row -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n          >\n            <a\n              class=\"text-primary flex align-items-center gap-3\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <div>\n                <h4 class=\"mb-0 mt-0\">{{ module.label | translate }}</h4>\n                <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n                  {{ module.fullName || \"\" | translate }}\n                </p>\n              </div>\n            </a>\n          </div>\n        </ng-container>\n\n        <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{\n                module.label | translate\n              }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Divider between module groups (except after the last one) -->\n      <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n    </ng-container>\n\n    <!-- Footer links -->\n    <div class=\"mt-auto p-2\">\n      <p-divider class=\"mt-2 mb-2\"></p-divider>\n      <div class=\"flex justify-content-between pb-3\">\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle p-2\"></i>\n            {{ footerConfig.guideLabel | translate }}\n          </span>\n        </a>\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.companyUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-globe p-2\"></i>\n            {{ footerConfig.companyName | translate }}\n          </span>\n        </a>\n      </div>\n\n      <div class=\"text-500 text-sm pl-2\">\n        {{ footerConfig.copyrightText | translate }}\n      </div>\n    </div>\n  </div>\n</p-drawer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["ismsActive", "assetActive", "language", "data"], outputs: ["searchInputEvent", "linkClikEvent"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["logout", "editSettings"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$4.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
@@ -507,7 +879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         DrawerModule,
                         DividerModule,
                         ButtonModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n    <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n    <span class=\"text-xl text-400 mt-2\">\n      {{ shortModuleName }}\n    </span>\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n      (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-20rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <div class=\"flex flex-column h-full\">\n    <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n    <ng-container\n      *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n    >\n      <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label | translate }}</h4>\n\n      <div class=\"grid\">\n        <!-- If layout is 'full', it takes up the entire row -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n          >\n            <a\n              class=\"text-primary flex align-items-center gap-3\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <div>\n                <h4 class=\"mb-0 mt-0\">{{ module.label | translate }}</h4>\n                <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n                  {{ (module.fullName || '') | translate }}\n                </p>\n              </div>\n            </a>\n          </div>\n        </ng-container>\n\n        <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{ module.label | translate }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Divider between module groups (except after the last one) -->\n      <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n    </ng-container>\n\n    <!-- Footer links -->\n    <div class=\"mt-auto p-2\">\n      <p-divider class=\"mt-2 mb-2\"></p-divider>\n      <div class=\"flex justify-content-between pb-3\">\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle p-2\"></i>\n            {{ footerConfig.guideLabel | translate }}\n          </span>\n        </a>\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.companyUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName | translate }}\n          </span>\n        </a>\n      </div>\n\n      <div class=\"text-500 text-sm pl-2\">\n        {{ footerConfig.copyrightText | translate }}\n      </div>\n    </div>\n  </div>\n</p-drawer>\n" }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n    <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n    <span class=\"text-xl text-400 mt-2\">\n      {{ shortModuleName }}\n    </span>\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar\n      [data]=\"searchResult()\"\n      [ismsActive]=\"ismsActive() ?? true\"\n      [assetActive]=\"assetActive() ?? true\"\n      [language]=\"language() ?? 'en'\"\n      (searchInputEvent)=\"searchInputEvent.emit($event)\"\n      (linkClikEvent)=\"linkClikEvent.emit($event)\"\n    ></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n      (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-20rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <div class=\"flex flex-column h-full\">\n    <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n    <ng-container\n      *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n    >\n      <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label | translate }}</h4>\n\n      <div class=\"grid\">\n        <!-- If layout is 'full', it takes up the entire row -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n          >\n            <a\n              class=\"text-primary flex align-items-center gap-3\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <div>\n                <h4 class=\"mb-0 mt-0\">{{ module.label | translate }}</h4>\n                <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n                  {{ module.fullName || \"\" | translate }}\n                </p>\n              </div>\n            </a>\n          </div>\n        </ng-container>\n\n        <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{\n                module.label | translate\n              }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Divider between module groups (except after the last one) -->\n      <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n    </ng-container>\n\n    <!-- Footer links -->\n    <div class=\"mt-auto p-2\">\n      <p-divider class=\"mt-2 mb-2\"></p-divider>\n      <div class=\"flex justify-content-between pb-3\">\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle p-2\"></i>\n            {{ footerConfig.guideLabel | translate }}\n          </span>\n        </a>\n        <a\n          class=\"text-primary no-underline text-sm\"\n          [href]=\"footerConfig.companyUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            <i class=\"pi pi-globe p-2\"></i>\n            {{ footerConfig.companyName | translate }}\n          </span>\n        </a>\n      </div>\n\n      <div class=\"text-500 text-sm pl-2\">\n        {{ footerConfig.copyrightText | translate }}\n      </div>\n    </div>\n  </div>\n</p-drawer>\n" }]
         }], propDecorators: { homeUrl: [{
                 type: Input
             }], user: [{
@@ -613,6 +985,8 @@ class ShellComponent {
     darkModeSelector = { mode: 'dark' };
     onDarkModeSelect = new EventEmitter();
     onUserAction = new EventEmitter();
+    searchInputEvent = output();
+    linkClikEvent = output();
     toggleSidebar() {
         this.isSidebarOpen = !this.isSidebarOpen;
     }
@@ -620,11 +994,11 @@ class ShellComponent {
         this.onDarkModeSelect.emit(this.darkModeSelector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserAction: "onUserAction" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-columns':  '16rem 1fr',\n    'grid-template-rows': '3.5rem 1fr',\n  }\"\n  class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n  <!-- Top header -->\n  <pho-topbar\n    class=\"pho-col-span-2 z-1\"\n    [user]=\"config.user\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <pho-sidebar\n    [mainItems]=\"config.mainItems\"\n    [footerItem]=\"config.footerItem\"\n    (toggleSidebar)=\"toggleSidebar()\"\n  ></pho-sidebar>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserAction: "onUserAction", searchInputEvent: "searchInputEvent", linkClikEvent: "linkClikEvent" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-columns':  '16rem 1fr',\n    'grid-template-rows': '3.5rem 1fr',\n  }\"\n  class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n  <!-- Top header -->\n  <pho-topbar\n    class=\"pho-col-span-2 z-1\"\n    [user]=\"config.user\"\n    [searchResult]=\"config.searchResult\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    [ismsActive]=\"config?.ismsActive ?? true\"\n    [assetActive]=\"config?.assetActive ?? true\"\n    [language]=\"config?.language ?? 'en'\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n    (searchInputEvent)=\"searchInputEvent.emit($event)\"\n    (linkClikEvent)=\"linkClikEvent.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <pho-sidebar\n    [mainItems]=\"config.mainItems\"\n    [footerItem]=\"config.footerItem\"\n    (toggleSidebar)=\"toggleSidebar()\"\n  ></pho-sidebar>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchResult", "ismsActive", "assetActive", "language"], outputs: ["onDarkModeSelect", "onUserPopoverAction", "searchInputEvent", "linkClikEvent"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-columns':  '16rem 1fr',\n    'grid-template-rows': '3.5rem 1fr',\n  }\"\n  class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n  <!-- Top header -->\n  <pho-topbar\n    class=\"pho-col-span-2 z-1\"\n    [user]=\"config.user\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <pho-sidebar\n    [mainItems]=\"config.mainItems\"\n    [footerItem]=\"config.footerItem\"\n    (toggleSidebar)=\"toggleSidebar()\"\n  ></pho-sidebar>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-columns':  '16rem 1fr',\n    'grid-template-rows': '3.5rem 1fr',\n  }\"\n  class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n  <!-- Top header -->\n  <pho-topbar\n    class=\"pho-col-span-2 z-1\"\n    [user]=\"config.user\"\n    [searchResult]=\"config.searchResult\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    [ismsActive]=\"config?.ismsActive ?? true\"\n    [assetActive]=\"config?.assetActive ?? true\"\n    [language]=\"config?.language ?? 'en'\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n    (searchInputEvent)=\"searchInputEvent.emit($event)\"\n    (linkClikEvent)=\"linkClikEvent.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <pho-sidebar\n    [mainItems]=\"config.mainItems\"\n    [footerItem]=\"config.footerItem\"\n    (toggleSidebar)=\"toggleSidebar()\"\n  ></pho-sidebar>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], isSidebarOpen: [{
@@ -806,7 +1180,7 @@ class PhoenixDataTableActionComponent {
         this.actionClick.emit({ action, rowData: this.rowData });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoenixDataTableActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: PhoenixDataTableActionComponent, isStandalone: true, selector: "phoenix-phoenix-data-table-action", inputs: { actionConfig: "actionConfig", rowData: "rowData" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-popover #op>\n  <ul class=\"list-none p-0 m-0\">\n    <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n      <li\n        class=\"cursor-pointer block\"\n        [ngClass]=\"{ 'mb-3': !last, disabledAction: item.disabled }\"\n        (click)=\"onActionClick(item)\"\n      >\n        <i class=\"mr-2\" [class]=\"item.icon\"></i> {{ item.label | translate }}\n      </li>\n    </ng-container>\n  </ul>\n</p-popover>\n\n<p-button\n  [attr.data-cy]=\"'table-button-' + actionConfig.type\"\n  [label]=\"btnConfig.label | translate\"\n  [text]=\"btnConfig.text\"\n  [icon]=\"icon\"\n  [disabled]=\"disabled\"\n  [iconPos]=\"btnConfig.type === 'multiselect' ? 'right' : 'left'\"\n  (click)=\"\n    btnConfig.type === 'multiselect'\n      ? op.toggle($event)\n      : onActionClick(actionConfig)\n  \"\n  [outlined]=\"btnConfig.outlined\"\n  [pTooltip]=\"actionConfig.label | translate\"\n  tooltipPosition=\"bottom\"\n  [class]=\"btnConfig.class\"\n  [severity]=\"btnConfig.severity\"\n>\n</p-button>\n", styles: ["::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar{padding-top:0!important}::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar button{scale:.9!important}.disabledAction{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: PhoenixDataTableActionComponent, isStandalone: true, selector: "phoenix-phoenix-data-table-action", inputs: { actionConfig: "actionConfig", rowData: "rowData" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-popover #op>\n  <ul class=\"list-none p-0 m-0\">\n    <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n      <li\n        class=\"cursor-pointer block\"\n        [ngClass]=\"{ 'mb-3': !last, disabledAction: item.disabled }\"\n        (click)=\"onActionClick(item)\"\n      >\n        <i class=\"mr-2\" [class]=\"item.icon\"></i> {{ item.label | translate }}\n      </li>\n    </ng-container>\n  </ul>\n</p-popover>\n\n<p-button\n  [attr.data-cy]=\"'table-button-' + actionConfig.type\"\n  [label]=\"btnConfig.label | translate\"\n  [text]=\"btnConfig.text\"\n  [icon]=\"icon\"\n  [disabled]=\"disabled\"\n  [iconPos]=\"btnConfig.type === 'multiselect' ? 'right' : 'left'\"\n  (click)=\"\n    btnConfig.type === 'multiselect'\n      ? op.toggle($event)\n      : onActionClick(actionConfig)\n  \"\n  [outlined]=\"btnConfig.outlined\"\n  [pTooltip]=\"actionConfig.label | translate\"\n  tooltipPosition=\"bottom\"\n  [class]=\"btnConfig.class\"\n  [severity]=\"btnConfig.severity\"\n>\n</p-button>\n", styles: ["::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar{padding-top:0!important}::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar button{scale:.9!important}.disabledAction{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoenixDataTableActionComponent, decorators: [{
             type: Component,
@@ -1347,11 +1721,11 @@ class PhoenixDataTableComponent {
         this._selectedColumns = this.columns.filter((col) => val.some((v) => v.field === col.field));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoenixDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: PhoenixDataTableComponent, isStandalone: true, selector: "phoenix-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: true, transformFunction: null }, exportdData: { classPropertyName: "exportdData", publicName: "exportdData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: false, isRequired: true, transformFunction: resolveActions }, exportData: { classPropertyName: "exportData", publicName: "exportData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { actionClickEmmiter: "actionClickEmmiter", lazyLoadDataEmmiter: "lazyLoadDataEmmiter", onRowClickEmmiter: "onRowClickEmmiter", onRowCheckboxRadioClickEmmiter: "onRowCheckboxRadioClickEmmiter", onExportClickEmmiter: "onExportClickEmmiter", onSaveColumnsClickEmmiter: "onSaveColumnsClickEmmiter", onHeaderCheckboxToggleEmmiter: "onHeaderCheckboxToggleEmmiter" }, viewQueries: [{ propertyName: "overviewBtn", first: true, predicate: ["btn"], descendants: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- total records lazy???? -->\n<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <p-table\n    #dt\n    [selectionMode]=\"tableConfiguration.selectionMode\"\n    [dataKey]=\"tableConfiguration.key ? tableConfiguration.key : 'id'\"\n    [value]=\"data\"\n    [rowSelectable]=\"isRowSelectable\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [resizableColumns]=\"true\"\n    [size]=\"'small'\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [selectionPageOnly]=\"true\"\n    [(selection)]=\"selectedData\"\n    [scrollable]=\"true\"\n    scrollHeight=\"400px\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"46\"\n    [rowHover]=\"true\"\n    (onHeaderCheckboxToggle)=\"onHeaderCheckboxToggle($event)\"\n  >\n    <!-- ********** CAPTION CAPTION CAPTION *********************** -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex justify-content-between\">\n        <global-table-actions>\n          <ng-container\n            *ngFor=\"\n              let action of tableConfiguration.globalActions;\n              let i = index\n            \"\n          >\n            <phoenix-phoenix-data-table-action\n              #btn\n              [actionConfig]=\"action\"\n              (actionClick)=\"actionClick($event)\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n          <phoenix-data-table-tabs\n            [attr.data-cy]=\"\n              'table-select-button-' + tableConfiguration.tabs?.key\n            \"\n            [actions]=\"tableConfiguration.tabs\"\n            (actionClick)=\"actionClick($event)\"\n          ></phoenix-data-table-tabs>\n        </global-table-actions>\n        <div class=\"flex align-items-center\">\n          <p-button\n            icon=\"pi pi-filter\"\n            [rounded]=\"true\"\n            label=\"Filter\"\n            [text]=\"true\"\n            severity=\"primary\"\n            class=\"mr-2\"\n            (onClick)=\"filters.toggle($event)\"\n          />\n\n          <p-button\n            icon=\"pi pi-sliders-v\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            severity=\"primary\"\n            label=\"Columns\"\n            class=\"mr-2\"\n            [attr.data-cy]=\"'table-togg-button'\"\n            (onClick)=\"cols.toggle($event)\"\n          />\n\n          <span\n            *ngIf=\"tableConfiguration.globalFilter\"\n            class=\"p-input-icon-left ml-auto\"\n          >\n            <p-iconfield>\n              <p-inputicon styleClass=\"pi pi-search\" />\n              <input\n                [attr.data-cy]=\"'table-global-search'\"\n                type=\"text\"\n                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\n                pInputText\n                placeholder=\"{{\n                  'SEARCH_PLACEHOLDERS.SEARCH_KEYWORD' | translate\n                }}\"\n              />\n            </p-iconfield>\n          </span>\n          <p-button\n            icon=\"pi pi-ellipsis-v\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            severity=\"primary\"\n            (onClick)=\"export.toggle($event)\"\n            class=\"ml-2\"\n          />\n\n          <bulk-table-actions>\n            <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n              <phoenix-phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [selectedData]=\"selectedData\"\n                (actionClick)=\"actionClick(action, selectedData)\"\n              ></phoenix-phoenix-data-table-action\n            ></ng-container>\n          </bulk-table-actions>\n        </div>\n      </div>\n    </ng-template>\n    <!-- ********** HEADER HEADER HEADER *********************** -->\n    <ng-template pTemplate=\"header\">\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n        <!-- rest of columns -->\n        <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n          <th\n            [attr.data-cy]=\"'table-col-' + i\"\n            pResizableColumn\n            class=\"custom-th font-bold\"\n            [pSortableColumn]=\"\n              col.filter === 'multiselect' && tableConfiguration.lazy != true\n                ? col.field + '.name'\n                : col.field\n            \"\n          >\n            <!-- set sort icon visible by default -->\n            <p-sortIcon\n              [attr.data-cy]=\"'table-sort-' + col.field\"\n              *ngIf=\"col.sortable === undefined ? true : col.sortable\"\n              field=\"{{ col.field }}\"\n            ></p-sortIcon>\n            {{ col.header | translate }}\n          </th>\n        </ng-container>\n\n        <!-- create empty th placeholders for actions -->\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n    <!-- ********** BODY BODY BODY *********************** -->\n    <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n      <ng-template #shimmer>\n        <tr [attr.data-cy]=\"'table-row-' + rowIndex\">\n          <td *ngFor=\"let col of columns; let even = even\">\n            <p-skeleton\n              [ngStyle]=\"{\n                width: '60%',\n              }\"\n            ></p-skeleton>\n          </td>\n\n          <td>\n            <p-skeleton\n              [ngStyle]=\"{\n                width: '20%',\n              }\"\n            ></p-skeleton>\n          </td>\n        </tr>\n      </ng-template>\n      <tr\n        *ngIf=\"!loading(); else shimmer\"\n        (click)=\"onRowClick($event, rowData)\"\n        [pSelectableRow]=\"rowData\"\n        [attr.data-cy]=\"'table-row-' + rowIndex\"\n      >\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"'table-checkbox'\"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"'table-radio-button'\"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n          <td class=\"cursor-pointer\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cellValueTemp;\n                context: { value: { rowData, col } }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n\n        <!-- p-0 on td because buttons already have marign. so it makes row bigger -->\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              *ngIf=\"\n                action.notauthorized ||\n                (rowData[action.type] != undefined &&\n                  rowData[action.type] != null)\n              \"\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"actionClick($event, rowData)\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"paginatorright\" let-state>\n      <!-- Total Records: {{ state.totalRecords }} -->\n      <!-- <i class=\"pi pi-cog\" style=\"font-size: 1.2rem; color: grey\"></i> -->\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n</div>\n\n<!-- Celll value template -->\n\n<ng-template #cellValueTemp let-val=\"value\">\n  <ng-container [ngSwitch]=\"val.col.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <!-- checking if there is a object instead of string. objects goes into non-lazy tables ->  val.rowData[val.col.field].name || val.rowData[val.col.field] -->\n        <p-tag\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.TAG | lowercase)\"\n          [style]=\"{ 'background-color': val.rowData[val.col.field + 'Color'] }\"\n          [value]=\"\n            val.rowData[val.col.field].name || val.rowData[val.col.field]\n          \"\n        ></p-tag>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <p-avatar\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.PERSON | lowercase)\"\n          [label]=\"val.rowData[val.col.field].name.charAt(0)\"\n          styleClass=\"mr-1\"\n          [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n          shape=\"circle\"\n        ></p-avatar>\n        {{ val.rowData[val.col.field].name }}\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.DATE\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        {{ val.rowData[val.col.field] | date : dateFormat }}\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_COMPLEX\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <ul\n          *ngFor=\"let item of val.rowData[val.col.field]\"\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.LIST | lowercase)\"\n        >\n          <li>{{ item.name }}</li>\n        </ul>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.RICH_TEXT\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <div\n          [pTooltip]=\"val.rowData[val.col.field] | removeHTMLTags\"\n          style=\"width: 200px\"\n          [attr.data-cy]=\"\n            'table-cell-' + (columnTypeEnum.RICH_TEXT | lowercase)\n          \"\n        >\n          {{ val.rowData[val.col.field] | removeHTMLTags }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <div\n          [pTooltip]=\"val.rowData[val.col.field]\"\n          style=\"width: 200px\"\n          [attr.data-cy]=\"\n            'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n          \"\n        >\n          {{ val.rowData[val.col.field] }}\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <i\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\"\n          class=\"pi\"\n          [ngClass]=\"{\n            'text-green-500 pi-check-circle': val.rowData[val.col.field],\n          }\"\n        ></i>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.CUSTOM\">\n      <span\n        [innerHTML]=\"val.col.customRenderer(val.rowData)\"\n        [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.CUSTOM | lowercase)\"\n      ></span>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault\n      ><td [attr.data-cy]=\"'table-cell-text'\">\n        {{ val.rowData[val.col.field] | cellValue : val.col }}\n      </td>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #emptyCell> -- </ng-template>\n\n<!-- Overlays for Columns/Filters/Exports -->\n\n<p-popover #cols>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">Columns</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          [label]=\"'ACTION.SAVE' | translate\"\n          class=\"mr-2\"\n          (click)=\"saveColumns()\"\n          [attr.data-cy]=\"'table-save-col-button'\"\n        />\n        <p-button\n          icon=\"pi pi-undo\"\n          [text]=\"true\"\n          [label]=\"'ACTION.RESET_FILTERS' | translate\"\n          class=\"mr-2\"\n          (click)=\"resetColumns()\"\n          [attr.data-cy]=\"'table-reset-col-button'\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n\n<p-popover #filters>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">Filter</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          [label]=\"'ACTION.SAVE' | translate\"\n          class=\"mr-2\"\n          [attr.data-cy]=\"'table-save-col-button'\"\n        />\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          [label]=\"'Clear'\"\n          class=\"mr-2\"\n          (click)=\"resetFilters()\"\n          [attr.data-cy]=\"'table-reset-col-button'\"\n        />\n      </div>\n    </div>\n\n    <div>\n      <form [formGroup]=\"filtersForm\">\n        @for(control of tableConfiguration.filterConfiguration; track\n        control.key ){ @switch(control.type) { @case ('checkbox') {\n        <div class=\"mb-4\">\n          <p-checkbox\n            binary=\"true\"\n            type=\"checkbox\"\n            [formControlName]=\"control.key\"\n          />\n          <label class=\"ml-2\">{{ control.label }}</label>\n        </div>\n\n        } @case ('dropdown') {\n        <div class=\"mb-4\">\n          <label class=\"mb-2 block\">{{ control.label }}</label>\n          <p-select\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n        </div>\n\n        } } }\n      </form>\n    </div>\n  </div>\n</p-popover>\n\n<p-popover #export>\n  <div class=\"flex flex-column gap-1\">\n    <p-button\n      pRipple\n      text=\"true\"\n      icon=\"pi pi-file-pdf\"\n      (click)=\"onExportClickEmmiter.emit(exportType.PDF)\"\n      class=\"mr-2\"\n      [label]=\"'ACTION.EXPORT_TO_PDF' | translate\"\n    ></p-button>\n\n    <p-button\n      pRipple\n      text=\"true\"\n      icon=\"pi pi-file-excel\"\n      (click)=\"onExportClickEmmiter.emit(exportType.EXCEL)\"\n      class=\"mr-2\"\n      [label]=\"'ACTION.EXPORT_TO_XLS' | translate\"\n    ></p-button>\n  </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i11.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: SelectModule }, { kind: "component", type: i12.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: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: PhoenixDataTableComponent, isStandalone: true, selector: "phoenix-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: true, transformFunction: null }, exportdData: { classPropertyName: "exportdData", publicName: "exportdData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: false, isRequired: true, transformFunction: resolveActions }, exportData: { classPropertyName: "exportData", publicName: "exportData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { actionClickEmmiter: "actionClickEmmiter", lazyLoadDataEmmiter: "lazyLoadDataEmmiter", onRowClickEmmiter: "onRowClickEmmiter", onRowCheckboxRadioClickEmmiter: "onRowCheckboxRadioClickEmmiter", onExportClickEmmiter: "onExportClickEmmiter", onSaveColumnsClickEmmiter: "onSaveColumnsClickEmmiter", onHeaderCheckboxToggleEmmiter: "onHeaderCheckboxToggleEmmiter" }, viewQueries: [{ propertyName: "overviewBtn", first: true, predicate: ["btn"], descendants: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- total records lazy???? -->\n<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <p-table\n    #dt\n    [selectionMode]=\"tableConfiguration.selectionMode\"\n    [dataKey]=\"tableConfiguration.key ? tableConfiguration.key : 'id'\"\n    [value]=\"data\"\n    [rowSelectable]=\"isRowSelectable\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [resizableColumns]=\"true\"\n    [size]=\"'small'\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [selectionPageOnly]=\"true\"\n    [(selection)]=\"selectedData\"\n    [scrollable]=\"true\"\n    scrollHeight=\"400px\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"46\"\n    [rowHover]=\"true\"\n    (onHeaderCheckboxToggle)=\"onHeaderCheckboxToggle($event)\"\n  >\n    <!-- ********** CAPTION CAPTION CAPTION *********************** -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex justify-content-between\">\n        <global-table-actions>\n          <ng-container\n            *ngFor=\"\n              let action of tableConfiguration.globalActions;\n              let i = index\n            \"\n          >\n            <phoenix-phoenix-data-table-action\n              #btn\n              [actionConfig]=\"action\"\n              (actionClick)=\"actionClick($event)\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n          <phoenix-data-table-tabs\n            [attr.data-cy]=\"\n              'table-select-button-' + tableConfiguration.tabs?.key\n            \"\n            [actions]=\"tableConfiguration.tabs\"\n            (actionClick)=\"actionClick($event)\"\n          ></phoenix-data-table-tabs>\n        </global-table-actions>\n        <div class=\"flex align-items-center\">\n          <p-button\n            icon=\"pi pi-filter\"\n            [rounded]=\"true\"\n            label=\"Filter\"\n            [text]=\"true\"\n            severity=\"primary\"\n            class=\"mr-2\"\n            (onClick)=\"filters.toggle($event)\"\n          />\n\n          <p-button\n            icon=\"pi pi-sliders-v\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            severity=\"primary\"\n            label=\"Columns\"\n            class=\"mr-2\"\n            [attr.data-cy]=\"'table-togg-button'\"\n            (onClick)=\"cols.toggle($event)\"\n          />\n\n          <span\n            *ngIf=\"tableConfiguration.globalFilter\"\n            class=\"p-input-icon-left ml-auto\"\n          >\n            <p-iconfield>\n              <p-inputicon styleClass=\"pi pi-search\" />\n              <input\n                [attr.data-cy]=\"'table-global-search'\"\n                type=\"text\"\n                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\n                pInputText\n                placeholder=\"{{\n                  'SEARCH_PLACEHOLDERS.SEARCH_KEYWORD' | translate\n                }}\"\n              />\n            </p-iconfield>\n          </span>\n          <p-button\n            icon=\"pi pi-ellipsis-v\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            severity=\"primary\"\n            (onClick)=\"export.toggle($event)\"\n            class=\"ml-2\"\n          />\n\n          <bulk-table-actions>\n            <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n              <phoenix-phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [selectedData]=\"selectedData\"\n                (actionClick)=\"actionClick(action, selectedData)\"\n              ></phoenix-phoenix-data-table-action\n            ></ng-container>\n          </bulk-table-actions>\n        </div>\n      </div>\n    </ng-template>\n    <!-- ********** HEADER HEADER HEADER *********************** -->\n    <ng-template pTemplate=\"header\">\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n        <!-- rest of columns -->\n        <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n          <th\n            [attr.data-cy]=\"'table-col-' + i\"\n            pResizableColumn\n            class=\"custom-th font-bold\"\n            [pSortableColumn]=\"\n              col.filter === 'multiselect' && tableConfiguration.lazy != true\n                ? col.field + '.name'\n                : col.field\n            \"\n          >\n            <!-- set sort icon visible by default -->\n            <p-sortIcon\n              [attr.data-cy]=\"'table-sort-' + col.field\"\n              *ngIf=\"col.sortable === undefined ? true : col.sortable\"\n              field=\"{{ col.field }}\"\n            ></p-sortIcon>\n            {{ col.header | translate }}\n          </th>\n        </ng-container>\n\n        <!-- create empty th placeholders for actions -->\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n    <!-- ********** BODY BODY BODY *********************** -->\n    <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n      <ng-template #shimmer>\n        <tr [attr.data-cy]=\"'table-row-' + rowIndex\">\n          <td *ngFor=\"let col of columns; let even = even\">\n            <p-skeleton\n              [ngStyle]=\"{\n                width: '60%',\n              }\"\n            ></p-skeleton>\n          </td>\n\n          <td>\n            <p-skeleton\n              [ngStyle]=\"{\n                width: '20%',\n              }\"\n            ></p-skeleton>\n          </td>\n        </tr>\n      </ng-template>\n      <tr\n        *ngIf=\"!loading(); else shimmer\"\n        (click)=\"onRowClick($event, rowData)\"\n        [pSelectableRow]=\"rowData\"\n        [attr.data-cy]=\"'table-row-' + rowIndex\"\n      >\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"'table-checkbox'\"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"'table-radio-button'\"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n          <td class=\"cursor-pointer\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cellValueTemp;\n                context: { value: { rowData, col } }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n\n        <!-- p-0 on td because buttons already have marign. so it makes row bigger -->\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              *ngIf=\"\n                action.notauthorized ||\n                (rowData[action.type] != undefined &&\n                  rowData[action.type] != null)\n              \"\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"actionClick($event, rowData)\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"paginatorright\" let-state>\n      <!-- Total Records: {{ state.totalRecords }} -->\n      <!-- <i class=\"pi pi-cog\" style=\"font-size: 1.2rem; color: grey\"></i> -->\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n</div>\n\n<!-- Celll value template -->\n\n<ng-template #cellValueTemp let-val=\"value\">\n  <ng-container [ngSwitch]=\"val.col.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <!-- checking if there is a object instead of string. objects goes into non-lazy tables ->  val.rowData[val.col.field].name || val.rowData[val.col.field] -->\n        <p-tag\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.TAG | lowercase)\"\n          [style]=\"{ 'background-color': val.rowData[val.col.field + 'Color'] }\"\n          [value]=\"\n            val.rowData[val.col.field].name || val.rowData[val.col.field]\n          \"\n        ></p-tag>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <p-avatar\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.PERSON | lowercase)\"\n          [label]=\"val.rowData[val.col.field].name.charAt(0)\"\n          styleClass=\"mr-1\"\n          [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n          shape=\"circle\"\n        ></p-avatar>\n        {{ val.rowData[val.col.field].name }}\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.DATE\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        {{ val.rowData[val.col.field] | date : dateFormat }}\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_COMPLEX\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <ul\n          *ngFor=\"let item of val.rowData[val.col.field]\"\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.LIST | lowercase)\"\n        >\n          <li>{{ item.name }}</li>\n        </ul>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.RICH_TEXT\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <div\n          [pTooltip]=\"val.rowData[val.col.field] | removeHTMLTags\"\n          style=\"width: 200px\"\n          [attr.data-cy]=\"\n            'table-cell-' + (columnTypeEnum.RICH_TEXT | lowercase)\n          \"\n        >\n          {{ val.rowData[val.col.field] | removeHTMLTags }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <div\n          [pTooltip]=\"val.rowData[val.col.field]\"\n          style=\"width: 200px\"\n          [attr.data-cy]=\"\n            'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n          \"\n        >\n          {{ val.rowData[val.col.field] }}\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <i\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\"\n          class=\"pi\"\n          [ngClass]=\"{\n            'text-green-500 pi-check-circle': val.rowData[val.col.field],\n          }\"\n        ></i>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.CUSTOM\">\n      <span\n        [innerHTML]=\"val.col.customRenderer(val.rowData)\"\n        [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.CUSTOM | lowercase)\"\n      ></span>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault\n      ><td [attr.data-cy]=\"'table-cell-text'\">\n        {{ val.rowData[val.col.field] | cellValue : val.col }}\n      </td>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #emptyCell> -- </ng-template>\n\n<!-- Overlays for Columns/Filters/Exports -->\n\n<p-popover #cols>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">Columns</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          [label]=\"'ACTION.SAVE' | translate\"\n          class=\"mr-2\"\n          (click)=\"saveColumns()\"\n          [attr.data-cy]=\"'table-save-col-button'\"\n        />\n        <p-button\n          icon=\"pi pi-undo\"\n          [text]=\"true\"\n          [label]=\"'ACTION.RESET_FILTERS' | translate\"\n          class=\"mr-2\"\n          (click)=\"resetColumns()\"\n          [attr.data-cy]=\"'table-reset-col-button'\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n\n<p-popover #filters>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">Filter</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          [label]=\"'ACTION.SAVE' | translate\"\n          class=\"mr-2\"\n          [attr.data-cy]=\"'table-save-col-button'\"\n        />\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          [label]=\"'Clear'\"\n          class=\"mr-2\"\n          (click)=\"resetFilters()\"\n          [attr.data-cy]=\"'table-reset-col-button'\"\n        />\n      </div>\n    </div>\n\n    <div>\n      <form [formGroup]=\"filtersForm\">\n        @for(control of tableConfiguration.filterConfiguration; track\n        control.key ){ @switch(control.type) { @case ('checkbox') {\n        <div class=\"mb-4\">\n          <p-checkbox\n            binary=\"true\"\n            type=\"checkbox\"\n            [formControlName]=\"control.key\"\n          />\n          <label class=\"ml-2\">{{ control.label }}</label>\n        </div>\n\n        } @case ('dropdown') {\n        <div class=\"mb-4\">\n          <label class=\"mb-2 block\">{{ control.label }}</label>\n          <p-select\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n        </div>\n\n        } } }\n      </form>\n    </div>\n  </div>\n</p-popover>\n\n<p-popover #export>\n  <div class=\"flex flex-column gap-1\">\n    <p-button\n      pRipple\n      text=\"true\"\n      icon=\"pi pi-file-pdf\"\n      (click)=\"onExportClickEmmiter.emit(exportType.PDF)\"\n      class=\"mr-2\"\n      [label]=\"'ACTION.EXPORT_TO_PDF' | translate\"\n    ></p-button>\n\n    <p-button\n      pRipple\n      text=\"true\"\n      icon=\"pi pi-file-excel\"\n      (click)=\"onExportClickEmmiter.emit(exportType.EXCEL)\"\n      class=\"mr-2\"\n      [label]=\"'ACTION.EXPORT_TO_XLS' | translate\"\n    ></p-button>\n  </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.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: SelectModule }, { kind: "component", type: i12.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: IconFieldModule }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: 
                 ///Custom components
                 PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: 
                 // Pipes
-                CellValuePipe, name: "cellValue" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: RemoveHTMLTagsPipe, name: "removeHTMLTags" }] });
+                CellValuePipe, name: "cellValue" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: PopoverModule }, { kind: "component", type: i4$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: RemoveHTMLTagsPipe, name: "removeHTMLTags" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoenixDataTableComponent, decorators: [{
             type: Component,
@@ -1488,7 +1862,7 @@ class TableCaptionComponent {
         this.actionClick.emit({ action, selectedItems: this.selectedItems });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", selectedColumnsInput: "selectedColumnsInput" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-4\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.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: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", selectedColumnsInput: "selectedColumnsInput" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-4\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.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: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableCaptionComponent, decorators: [{
             type: Component,
@@ -1703,7 +2077,7 @@ class TableComponent {
         this.bulkMode = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [selectedColumnsInput]=\"selectedColumns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "selectedColumnsInput"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [selectedColumnsInput]=\"selectedColumns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "selectedColumnsInput"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2182,7 +2556,7 @@ class ObjectItemDialogComponent {
         rows: 20,
         selectionType: tableSelectionType.RADIO_BTN,
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$2.DynamicDialogRef }, { token: i1$2.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<phoenix-table\n  #table\n  [data]=\"tableData\"\n  [columns]=\"columns\"\n  [tableConfiguration]=\"tableConfiguration\"\n>\n</phoenix-table>\n<div class=\"absolute bottom-0 right-0 p-4\">\n  <pho-actions\n    (actionClick)=\"actionClick($event)\"\n    [actions]=\"actions\"\n  ></pho-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ObjectItemDialogComponent, decorators: [{
@@ -2195,7 +2569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         TableComponent,
                         ActionsComponent,
                     ], template: "<phoenix-table\n  #table\n  [data]=\"tableData\"\n  [columns]=\"columns\"\n  [tableConfiguration]=\"tableConfiguration\"\n>\n</phoenix-table>\n<div class=\"absolute bottom-0 right-0 p-4\">\n  <pho-actions\n    (actionClick)=\"actionClick($event)\"\n    [actions]=\"actions\"\n  ></pho-actions>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }, { type: i1$3.DynamicDialogConfig }], propDecorators: { table: [{
+        }], ctorParameters: () => [{ type: i1$2.DynamicDialogRef }, { type: i1$2.DynamicDialogConfig }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
             }] } });
@@ -2775,7 +3149,7 @@ class MetaCalendarComponent extends BaseMetaField {
       [appendTo]="'body'"
     ></p-calendar>
     <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
-  </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$4.Calendar, selector: "p-calendar", 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", "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: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
+  </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$3.Calendar, selector: "p-calendar", 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", "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: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaCalendarComponent, decorators: [{
             type: Component,
@@ -2933,7 +3307,7 @@ class MetaCheckboxComponent extends BaseMetaField {
       {{ control | fieldLabel: currentLang | translate }}
       <span *ngIf="control.mandatory" class="red-asterisk">*</span></label
     >
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i11.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: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldLabelPipe, name: "fieldLabel" }] });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.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: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldLabelPipe, name: "fieldLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaCheckboxComponent, decorators: [{
             type: Component,
@@ -2989,7 +3363,7 @@ class MetaColorPickerComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [":is() .p-inputswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i3$4.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: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, styles: [":is() .p-inputswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i3$5.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: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaColorPickerComponent, decorators: [{
             type: Component,
@@ -3075,7 +3449,7 @@ class MetaCurrencyComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaCurrencyComponent, decorators: [{
             type: Component,
@@ -3152,7 +3526,7 @@ class MetaMultipleSelectComponent extends BaseMetaField {
       *ngIf="!control?.hidden"
       [ctrl]="ctrl"
     ></phoenix-inline-field-error>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$6.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", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: TranslateModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$7.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", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: TranslateModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaMultipleSelectComponent, decorators: [{
             type: Component,
@@ -3223,7 +3597,7 @@ class MetaNumberComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputTextModule }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "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: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputTextModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaNumberComponent, decorators: [{
             type: Component,
@@ -3292,7 +3666,7 @@ class MetaPasswordFeildComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [":is() .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$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", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }] });
+  `, isInline: true, styles: [":is() .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$8.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", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaPasswordFeildComponent, decorators: [{
             type: Component,
@@ -3519,7 +3893,7 @@ class MetaSingleSelectObjectBasedComponent extends BaseMetaField {
       *ngIf="!control?.hidden"
       [ctrl]="ctrl"
     ></phoenix-inline-field-error>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$8.Dropdown, selector: "p-dropdown", 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", "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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$9.Dropdown, selector: "p-dropdown", 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", "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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaSingleSelectObjectBasedComponent, decorators: [{
             type: Component,
@@ -3717,7 +4091,7 @@ class MetaSingleSelectComponent extends BaseMetaField {
       *ngIf="!control?.hidden"
       [ctrl]="ctrl"
     ></phoenix-inline-field-error>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$8.Dropdown, selector: "p-dropdown", 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", "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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i5$2.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$9.Dropdown, selector: "p-dropdown", 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", "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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i7.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaSingleSelectComponent, decorators: [{
             type: Component,
@@ -3934,7 +4308,7 @@ class MetaStartDueDateComponent {
       </div>
       <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$4.Calendar, selector: "p-calendar", 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", "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: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$3.Calendar, selector: "p-calendar", 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", "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: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
             type: Component,
@@ -4024,7 +4398,7 @@ class MetaSwitchComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [":is() .p-inputswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$9.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, styles: [":is() .p-inputswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$a.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaSwitchComponent, decorators: [{
             type: Component,
@@ -4088,7 +4462,7 @@ class MetaTextAreaComponent extends BaseMetaField {
       *ngIf="!control?.hidden"
       [ctrl]="ctrl"
     ></phoenix-inline-field-error>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$a.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$b.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaTextAreaComponent, decorators: [{
             type: Component,
@@ -4224,7 +4598,7 @@ class MetaTextInputComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaTextInputComponent, decorators: [{
             type: Component,
@@ -4321,7 +4695,7 @@ class MetaTimeperiodComponent {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaTimeperiodComponent, decorators: [{
             type: Component,
@@ -4418,7 +4792,7 @@ class MetaUploadComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i5$3.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }] });
+  `, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i5$2.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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.11", ngImport: i0, type: MetaUploadComponent, decorators: [{
             type: Component,
@@ -4521,66 +4895,6 @@ var GlobalPhase;
     GlobalPhase["RISK_OVERVIEW"] = "RISK_OVERVIEW";
 })(GlobalPhase || (GlobalPhase = {}));
 
-class SoTypes {
-    static COMPL_APPLIED_MODULE = 'COMPL_APPLIED_MODULE';
-    static COMPL_APPLIED_MEASURE = 'COMPL_APPLIED_MEASURE';
-    static COMPL_APPLIED_REQUIREMENT = 'COMPL_APPLIED_REQUIREMENT';
-    static COMPL_APPLIED_THREAT = 'COMPL_APPLIED_THREAT';
-    static COMPL_APPLIED_RISK = 'COMPL_APPLIED_RISK';
-    static COMPL_APPLIED_CONTROL = 'COMPL_APPLIED_CONTROL';
-    static resolveUrlType(typeLabelKey) {
-        switch (typeLabelKey) {
-            case SoTypes.COMPL_APPLIED_MODULE:
-                return SoTypesString.MODULES;
-            case SoTypes.COMPL_APPLIED_CONTROL:
-                return SoTypesString.CONTROLS;
-            case SoTypes.COMPL_APPLIED_REQUIREMENT:
-                return SoTypesString.REQUIREMENTS;
-            case SoTypes.COMPL_APPLIED_MEASURE:
-                return SoTypesString.MEASURES;
-            case SoTypes.COMPL_APPLIED_THREAT:
-                return SoTypesString.THREATS;
-            case SoTypes.COMPL_APPLIED_RISK:
-                return SoTypesString.RISKS;
-            case 'COMPL_RISK_OBJECT':
-                return SoTypesString.RISKS;
-            default:
-                return SoTypesString.MODULES;
-        }
-    }
-    static resolveUrlTypeByString(stringType) {
-        switch (stringType) {
-            case SoTypesString.MODULES:
-                return SoTypes.COMPL_APPLIED_MODULE;
-            case SoTypesString.CONTROLS:
-                return SoTypes.COMPL_APPLIED_CONTROL;
-            case SoTypesString.REQUIREMENTS:
-                return SoTypes.COMPL_APPLIED_REQUIREMENT;
-            case SoTypesString.MEASURES:
-                return SoTypes.COMPL_APPLIED_MEASURE;
-            case SoTypesString.THREATS:
-                return SoTypes.COMPL_APPLIED_THREAT;
-            case SoTypesString.RISKS:
-                return SoTypes.COMPL_APPLIED_RISK;
-            default:
-                return SoTypes.COMPL_APPLIED_MODULE;
-        }
-    }
-}
-var SoTypesString;
-(function (SoTypesString) {
-    SoTypesString["MODULES"] = "modules";
-    SoTypesString["REQUIREMENTS"] = "requirements";
-    SoTypesString["MEASURES"] = "measures";
-    SoTypesString["THREATS"] = "threats";
-    SoTypesString["RISKS"] = "risks";
-    SoTypesString["VULNERABILITIES"] = "vulnerabilities";
-    SoTypesString["DAMAGE_SCENARIO"] = "damagescenarios";
-    SoTypesString["RISK_TREATMENT"] = "risktreatments";
-    SoTypesString["CONTROLS"] = "controls";
-    SoTypesString["ADDITIONAL_MEASURES"] = "additionalmeasures";
-})(SoTypesString || (SoTypesString = {}));
-
 class ReadOnlyInputComponent {
     sanitizer;
     translateService;
@@ -4693,10 +5007,10 @@ class ReadOnlyInputComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i3$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n        <!-- <ng-container *ngFor=\"let link of item?.objects\">\n          <phoenix-serach-card\n            [readOnly]=\"true\"\n            [data]=\"link\"\n            [deleteButton]=\"false\"\n            (selectEvent)=\"selectEvent($event)\"\n          />\n        </ng-container> -->\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n\n      <!-- <div class=\"person-wrap\">\n        <div class=\"person-avatar\">\n          {{ value?.name?.toUpperCase().charAt(0) }}\n        </div>\n        <div class=\"font-semibold text-500\">\n          <p>\n            {{ value?.name }}\n          </p>\n          <p>\n            {{ value?.function }}\n          </p>\n        </div>\n      </div> -->\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n\n<!-- <ng-container *ngFor=\"let link of item?.objects\">\n              <phoenix-serach-card\n                [data]=\"link\"\n                (removeButtonEvent)=\"\n                  onLinkRemove(link.name, item.relationLabelKey)\n                \"\n                [deleteButton]=\"true\"\n              />\n            </ng-container> -->\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$9.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$4.DomSanitizer }, { token: i3$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n        <!-- <ng-container *ngFor=\"let link of item?.objects\">\n          <phoenix-serach-card\n            [readOnly]=\"true\"\n            [data]=\"link\"\n            [deleteButton]=\"false\"\n            (selectEvent)=\"selectEvent($event)\"\n          />\n        </ng-container> -->\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n\n      <!-- <div class=\"person-wrap\">\n        <div class=\"person-avatar\">\n          {{ value?.name?.toUpperCase().charAt(0) }}\n        </div>\n        <div class=\"font-semibold text-500\">\n          <p>\n            {{ value?.name }}\n          </p>\n          <p>\n            {{ value?.function }}\n          </p>\n        </div>\n      </div> -->\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n\n<!-- <ng-container *ngFor=\"let link of item?.objects\">\n              <phoenix-serach-card\n                [data]=\"link\"\n                (removeButtonEvent)=\"\n                  onLinkRemove(link.name, item.relationLabelKey)\n                \"\n                [deleteButton]=\"true\"\n              />\n            </ng-container> -->\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$a.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // SerachCardComponent,
-                CheckboxModule }, { kind: "component", type: i11.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: PasswordModule }, { kind: "component", type: i3$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", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$4.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$3.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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"] }] });
+                CheckboxModule }, { kind: "component", type: i5.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: PasswordModule }, { kind: "component", type: i3$8.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", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$4.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$3.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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.11", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
             type: Component,
@@ -4715,7 +5029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         PanelModule,
                         ButtonModule,
                     ], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n        <!-- <ng-container *ngFor=\"let link of item?.objects\">\n          <phoenix-serach-card\n            [readOnly]=\"true\"\n            [data]=\"link\"\n            [deleteButton]=\"false\"\n            (selectEvent)=\"selectEvent($event)\"\n          />\n        </ng-container> -->\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n\n      <!-- <div class=\"person-wrap\">\n        <div class=\"person-avatar\">\n          {{ value?.name?.toUpperCase().charAt(0) }}\n        </div>\n        <div class=\"font-semibold text-500\">\n          <p>\n            {{ value?.name }}\n          </p>\n          <p>\n            {{ value?.function }}\n          </p>\n        </div>\n      </div> -->\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n\n<!-- <ng-container *ngFor=\"let link of item?.objects\">\n              <phoenix-serach-card\n                [data]=\"link\"\n                (removeButtonEvent)=\"\n                  onLinkRemove(link.name, item.relationLabelKey)\n                \"\n                [deleteButton]=\"true\"\n              />\n            </ng-container> -->\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i3$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
+        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }, { type: i3$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
                 type: Input
             }], metaform: [{
                 type: Input
@@ -5132,7 +5446,7 @@ class MetaFormButtonsComponent {
         this.sub$?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaFormButtonsComponent, deps: [{ token: MetaFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: MetaFormButtonsComponent, isStandalone: true, selector: "phoenix-meta-form-buttons", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, providers: [], ngImport: i0, template: "<!-- <ng-template *ngIf=\"formActive$ | async as formState\" pTemplate=\"footer\">\n  <div *ngIf=\"!formState\" class=\"flex justify-content-end p-2\"> -->\n<div *ngIf=\"display\" class=\"flex justify-content-end p-2\">\n  <p-checkbox\n    *ngIf=\"isCreateAnother()\"\n    id=\"dialog-buttons-checkbox\"\n    data-cy=\"dialog-buttons-checkbox-cy\"\n    [(ngModel)]=\"createAnother\"\n    [binary]=\"true\"\n    inputId=\"binary\"\n    class=\"mr-3\"\n  ></p-checkbox>\n\n  <button\n    class=\"mr-2\"\n    pButton\n    [disabled]=\"isDisabled()\"\n    [loading]=\"isLoading()\"\n    (click)=\"handleSave.emit({ isAnother: createAnother })\"\n    [attr.data-cy]=\"'submit-button'\"\n  >\n    <span class=\"mx-1\">{{ \"ACTION.SAVE\" | translate }}</span>\n  </button>\n\n  <p-button\n    [text]=\"true\"\n    (click)=\"handleCancel.emit('CANCEL')\"\n    [attr.data-cy]=\"'cancel-button'\"\n  >\n    {{ \"ACTION.CANCEL\" | translate }}\n  </p-button>\n</div>\n<!-- </div>\n</ng-template> -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i11.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: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: MetaFormButtonsComponent, isStandalone: true, selector: "phoenix-meta-form-buttons", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, providers: [], ngImport: i0, template: "<!-- <ng-template *ngIf=\"formActive$ | async as formState\" pTemplate=\"footer\">\n  <div *ngIf=\"!formState\" class=\"flex justify-content-end p-2\"> -->\n<div *ngIf=\"display\" class=\"flex justify-content-end p-2\">\n  <p-checkbox\n    *ngIf=\"isCreateAnother()\"\n    id=\"dialog-buttons-checkbox\"\n    data-cy=\"dialog-buttons-checkbox-cy\"\n    [(ngModel)]=\"createAnother\"\n    [binary]=\"true\"\n    inputId=\"binary\"\n    class=\"mr-3\"\n  ></p-checkbox>\n\n  <button\n    class=\"mr-2\"\n    pButton\n    [disabled]=\"isDisabled()\"\n    [loading]=\"isLoading()\"\n    (click)=\"handleSave.emit({ isAnother: createAnother })\"\n    [attr.data-cy]=\"'submit-button'\"\n  >\n    <span class=\"mx-1\">{{ \"ACTION.SAVE\" | translate }}</span>\n  </button>\n\n  <p-button\n    [text]=\"true\"\n    (click)=\"handleCancel.emit('CANCEL')\"\n    [attr.data-cy]=\"'cancel-button'\"\n  >\n    {{ \"ACTION.CANCEL\" | translate }}\n  </p-button>\n</div>\n<!-- </div>\n</ng-template> -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.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"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.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: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaFormButtonsComponent, decorators: [{
             type: Component,
@@ -5343,7 +5657,7 @@ class StatusBarComponent {
         width: 60,
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<div class=\"surface-ground p-3\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper overflow-x-auto\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Entity icon -->\n      <div\n        class=\"type-icon flex justify-content-center align-items-center mr-3\"\n        [style.height]=\"iconStyle.height + 20 + 'px'\"\n        [style.width]=\"iconStyle.width + 20 + 'px'\"\n      >\n        <p-image\n          [src]=\"\n            'assets/object_types/white/' +\n            (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n\n      <!-- Descriptive data -->\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1\">{{ attr.label | translate }}:</span>\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span *ngSwitchDefault>{{ attr.value }}</span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n      <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n      <div class=\"mt-1\">\n        <ng-container [ngSwitch]=\"attr.type\">\n          <!-- TAG -->\n          <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <span class=\"font-medium\">{{ attr.label | translate }}</span>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"details.toggle($event)\"\n                    (mouseleave)=\"details.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  [style.color]=\"attr.color\"\n                  class=\"text-xl mt-1\"\n                >\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #details>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <!-- <span class=\"m-2 font-medium\" style=\"min-width: 100px\">\n                    {{ item?.value }}\n                  </span> -->\n                  <span class=\"mt-2 mb-2\" style=\"min-width: 100px\">\n                    <phoenix-tag\n                      [customColor]=\"item.value1\"\n                      [content]=\"item.value\"\n                    ></phoenix-tag>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- STRING -->\n          <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n            <div class=\"attribute\">\n              <div class=\"flex flex-column\">\n                <label>{{ attr.label | translate }}</label>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | translate | textLength : 150 }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- PERSON -->\n          <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                {{ attr.label | translate }}\n                <div\n                  class=\"person-wrap\"\n                  *ngIf=\"attr?.value || attr?.value1; else empty\"\n                >\n                  <div class=\"person-avatar\">\n                    {{ attr?.value?.charAt(0) }}\n                  </div>\n                  <div\n                    class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                    pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n                  >\n                    {{ attr?.value }} {{ attr?.value1 }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                {{ attr.label | translate }}\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  class=\"flex align-items-center mt-2\"\n                >\n                  <i class=\"pi pi-calendar mr-1\"></i>\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE_LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n            <div class=\"attribute\">\n              <label class=\"white-space-nowrap\">{{\n                attr.label | translate\n              }}</label>\n              <i\n                *ngIf=\"attr?.value\"\n                class=\"pi pi-info-circle text-blue-500 mr-1\"\n                (mouseenter)=\"overlayPanel.toggle($event)\"\n                (mouseleave)=\"overlayPanel.toggle($event)\"\n              ></i>\n              <div *ngIf=\"attr?.value; else empty\">\n                <div class=\"flex align-items-center\">\n                  <i class=\"pi pi-calendar mr-1\"></i>\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #overlayPanel>\n              <!-- Created by -->\n\n              <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n                <div class=\"mb-2 text-600\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"mr-2 align-self-center\">\n                    <p-avatar\n                      shape=\"circle\"\n                      [label]=\"item.value ? (item.value | firstLetter) : ''\"\n                    ></p-avatar>\n                  </div>\n                  <div>\n                    <div class=\"text-blue-800 font-bold\">\n                      {{ item.value }}\n                    </div>\n                    <div>\n                      {{ item.value1 }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </p-popover>\n          </ng-container>\n\n          <!-- LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n            <div class=\"attribute flex justify-content-center\">\n              <div>\n                <label>{{ attr.label | translate }}</label>\n                <ul\n                  class=\"list\"\n                  *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n                >\n                  <li\n                    [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                    class=\"white-space-nowrap mb-1\"\n                    *ngFor=\"let item of attr.value\"\n                    (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n                  >\n                    {{ item.name | textLength : 20 }}\n                    <i class=\"pi pi-link\" class=\"mt-1\"></i>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse/Expand button -->\n  <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: ImageModule }, { kind: "component", type: i5$2.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<div class=\"surface-ground p-3\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper overflow-x-auto\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Entity icon -->\n      <div\n        class=\"type-icon flex justify-content-center align-items-center mr-3\"\n        [style.height]=\"iconStyle.height + 20 + 'px'\"\n        [style.width]=\"iconStyle.width + 20 + 'px'\"\n      >\n        <p-image\n          [src]=\"\n            'assets/object_types/white/' +\n            (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n\n      <!-- Descriptive data -->\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1\">{{ attr.label | translate }}:</span>\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span *ngSwitchDefault>{{ attr.value }}</span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n      <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n      <div class=\"mt-1\">\n        <ng-container [ngSwitch]=\"attr.type\">\n          <!-- TAG -->\n          <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <span class=\"font-medium\">{{ attr.label | translate }}</span>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"details.toggle($event)\"\n                    (mouseleave)=\"details.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  [style.color]=\"attr.color\"\n                  class=\"text-xl mt-1\"\n                >\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #details>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <!-- <span class=\"m-2 font-medium\" style=\"min-width: 100px\">\n                    {{ item?.value }}\n                  </span> -->\n                  <span class=\"mt-2 mb-2\" style=\"min-width: 100px\">\n                    <phoenix-tag\n                      [customColor]=\"item.value1\"\n                      [content]=\"item.value\"\n                    ></phoenix-tag>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- STRING -->\n          <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n            <div class=\"attribute\">\n              <div class=\"flex flex-column\">\n                <label>{{ attr.label | translate }}</label>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | translate | textLength : 150 }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- PERSON -->\n          <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                {{ attr.label | translate }}\n                <div\n                  class=\"person-wrap\"\n                  *ngIf=\"attr?.value || attr?.value1; else empty\"\n                >\n                  <div class=\"person-avatar\">\n                    {{ attr?.value?.charAt(0) }}\n                  </div>\n                  <div\n                    class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                    pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n                  >\n                    {{ attr?.value }} {{ attr?.value1 }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                {{ attr.label | translate }}\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  class=\"flex align-items-center mt-2\"\n                >\n                  <i class=\"pi pi-calendar mr-1\"></i>\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE_LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n            <div class=\"attribute\">\n              <label class=\"white-space-nowrap\">{{\n                attr.label | translate\n              }}</label>\n              <i\n                *ngIf=\"attr?.value\"\n                class=\"pi pi-info-circle text-blue-500 mr-1\"\n                (mouseenter)=\"overlayPanel.toggle($event)\"\n                (mouseleave)=\"overlayPanel.toggle($event)\"\n              ></i>\n              <div *ngIf=\"attr?.value; else empty\">\n                <div class=\"flex align-items-center\">\n                  <i class=\"pi pi-calendar mr-1\"></i>\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #overlayPanel>\n              <!-- Created by -->\n\n              <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n                <div class=\"mb-2 text-600\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"mr-2 align-self-center\">\n                    <p-avatar\n                      shape=\"circle\"\n                      [label]=\"item.value ? (item.value | firstLetter) : ''\"\n                    ></p-avatar>\n                  </div>\n                  <div>\n                    <div class=\"text-blue-800 font-bold\">\n                      {{ item.value }}\n                    </div>\n                    <div>\n                      {{ item.value1 }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </p-popover>\n          </ng-container>\n\n          <!-- LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n            <div class=\"attribute flex justify-content-center\">\n              <div>\n                <label>{{ attr.label | translate }}</label>\n                <ul\n                  class=\"list\"\n                  *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n                >\n                  <li\n                    [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                    class=\"white-space-nowrap mb-1\"\n                    *ngFor=\"let item of attr.value\"\n                    (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n                  >\n                    {{ item.name | textLength : 20 }}\n                    <i class=\"pi pi-link\" class=\"mt-1\"></i>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse/Expand button -->\n  <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: ImageModule }, { kind: "component", type: i7.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.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.11", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
@@ -5379,7 +5693,7 @@ class QuickPickSidePanelComponent {
     data = [];
     columns = [];
     tableConfiguration = {};
-    widthClass = 'w-9';
+    widthClass = 'w-6';
     isFullScreen = false;
     _panelVisible = signal(false);
     set panelState(value) {
@@ -5404,7 +5718,7 @@ class QuickPickSidePanelComponent {
         this.onRowClick.emit(row);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", widthClass: "widthClass", isFullScreen: "isFullScreen", panelState: "panelState" }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n  #drawer\n  [visible]=\"drawerVisible()\"\n  (visibleChange)=\"visibleChange($event)\"\n  [header]=\"title | translate\"\n  appendTo=\"body\"\n  position=\"right\"\n  [styleClass]=\"widthClass\"\n>\n  <!-- Content -->\n  <ng-container *ngIf=\"tableConfiguration\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowSelection)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-container>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", widthClass: "widthClass", isFullScreen: "isFullScreen", panelState: "panelState" }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n  #drawer\n  [visible]=\"drawerVisible()\"\n  (visibleChange)=\"visibleChange($event)\"\n  [header]=\"title | translate\"\n  appendTo=\"body\"\n  position=\"right\"\n  [styleClass]=\"widthClass\"\n>\n  <!-- Content -->\n  <ng-container *ngIf=\"tableConfiguration\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowSelection)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-container>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$4.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
             type: Component,