@fuentis/phoenix-ui 0.0.9-alpha.241 → 0.0.9-alpha.245

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, ViewEncapsulation, EventEmitter, Output, inject, Injectable, input, ViewChild, ChangeDetectionStrategy, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, signal, Directive, forwardRef, computed } from '@angular/core';
+import { Input, Component, ViewEncapsulation, EventEmitter, Output, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Directive, forwardRef, computed } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, LowerCasePipe } from '@angular/common';
 import * as i3 from 'primeng/tooltip';
@@ -10,22 +10,30 @@ import * as i1 from '@angular/router';
 import { RouterLink, RouterLinkActive, RouterModule, Router, NavigationEnd } from '@angular/router';
 import * as i2$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import * as i4 from 'primeng/menu';
+import { MenuModule } from 'primeng/menu';
+import * as i5 from 'primeng/popover';
+import { PopoverModule, Popover } from 'primeng/popover';
+import * as i3$1 from 'primeng/api';
+import { FilterMatchMode } from 'primeng/api';
+import * as i1$2 from 'primeng/card';
+import { CardModule } from 'primeng/card';
+import * as i4$1 from 'primeng/divider';
+import { DividerModule } from 'primeng/divider';
+import * as i2$2 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
 import * as i3$3 from 'primeng/drawer';
 import { DrawerModule, Drawer } from 'primeng/drawer';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i3$1 from 'primeng/inputtext';
+import * as i3$2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import { MessageModule } from 'primeng/message';
-import * as i4$2 from 'primeng/popover';
-import { PopoverModule, Popover } from 'primeng/popover';
 import * as i6 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
-import * as i2$2 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { FormsModule, FormBuilder, FormGroup, FormControl, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i5 from 'primeng/checkbox';
+import * as i5$1 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, catchError, of, BehaviorSubject, combineLatestWith, distinctUntilChanged, combineLatest } from 'rxjs';
@@ -33,28 +41,24 @@ 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 i4$1 from '@angular/common/http';
+import * as i4$2 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
-import * as i3$2 from 'primeng/api';
-import { FilterMatchMode } from 'primeng/api';
 import * as i6$1 from 'primeng/avatar';
 import { Avatar, AvatarModule } from 'primeng/avatar';
 import * as i15 from 'primeng/ripple';
 import { Ripple, RippleModule } from 'primeng/ripple';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import { TieredMenuModule } from 'primeng/tieredmenu';
-import * as i2$4 from 'primeng/table';
+import * as i2$5 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i10 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i9 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i7$2 from 'primeng/tag';
-import { TagModule } from 'primeng/tag';
-import * as i2$3 from 'primeng/selectbutton';
+import * as i2$4 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i5$1 from 'primeng/badge';
+import * as i5$2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import * as i17 from 'primeng/listbox';
 import { ListboxModule } from 'primeng/listbox';
@@ -69,21 +73,21 @@ import * as i9$1 from 'primeng/overlaypanel';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
 import * as i10$1 from 'primeng/chip';
 import { ChipModule } from 'primeng/chip';
-import * as i1$4 from 'primeng/calendar';
+import * as i1$5 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 import * as i3$7 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i2$5 from 'primeng/editor';
+import * as i2$6 from 'primeng/editor';
 import { EditorModule } from 'primeng/editor';
-import * as i1$2 from 'primeng/dynamicdialog';
+import * as i1$3 from 'primeng/dynamicdialog';
 import { DialogService } from 'primeng/dynamicdialog';
-import * as i1$3 from 'primeng/datepicker';
+import * as i1$4 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import * as i3$4 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import * as i3$5 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i5$2 from 'primeng/keyfilter';
+import * as i5$3 from 'primeng/keyfilter';
 import { KeyFilterModule } from 'primeng/keyfilter';
 import * as i3$8 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
@@ -92,7 +96,7 @@ import { PasswordModule } from 'primeng/password';
 import * as i3$9 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i1$5 from '@angular/platform-browser';
+import * as i1$6 from '@angular/platform-browser';
 import { MessagesModule } from 'primeng/messages';
 import * as i4$3 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
@@ -217,6 +221,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class ActionStateService {
+    _disabledActions = signal(new Set());
+    get disabledActions() {
+        return this._disabledActions.asReadonly();
+    }
+    disableAction(id) {
+        const current = new Set(this._disabledActions());
+        current.add(id);
+        this._disabledActions.set(current);
+    }
+    enableAction(id) {
+        const current = new Set(this._disabledActions());
+        current.delete(id);
+        this._disabledActions.set(current);
+    }
+    isDisabled(id) {
+        return this._disabledActions().has(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes["BASIC"] = "BASIC";
+    ActionTypes["SELECT"] = "SELECT";
+})(ActionTypes || (ActionTypes = {}));
+class ActionsComponent {
+    actionStateService = inject(ActionStateService);
+    actions;
+    actionClick = new EventEmitter();
+    onActionClick($event, action, menuRef) {
+        $event.stopPropagation();
+        if (action.type === ActionTypes.SELECT && menuRef) {
+            menuRef.toggle($event);
+        }
+        else {
+            this.actionClick.emit(action);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ActionsComponent, isStandalone: true, selector: "pho-actions", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  @for(action of actions; track action.actionId){ @switch (action.type) {\n  @case(\"BASIC\"){\n  <p-button\n    *ngIf=\"action.visible !== false\"\n    [label]=\"action.label | translate\"\n    [icon]=\"action.icon || ''\"\n    [styleClass]=\"action.class || ''\"\n    [severity]=\"action.severity ?? 'primary'\"\n    [disabled]=\"\n      action.disabled || actionStateService.isDisabled(action.actionId)\n    \"\n    [loading]=\"action.loading || false\"\n    [id]=\"action.id\"\n    (onClick)=\"onActionClick($event, action)\"\n    size=\"small\"\n    [iconPos]=\"action.iconPos\"\n  ></p-button>\n  } @case(\"SELECT\"){\n  <p-button\n    *ngIf=\"action.visible !== false\"\n    [label]=\"action.label | translate\"\n    [icon]=\"action.icon || ''\"\n    [styleClass]=\"action.class || ''\"\n    [severity]=\"action.severity ?? 'primary'\"\n    [disabled]=\"\n      action.disabled || actionStateService.isDisabled(action.actionId)\n    \"\n    [loading]=\"action.loading || false\"\n    [id]=\"action.id\"\n    (onClick)=\"onActionClick($event, action, menuRef)\"\n    size=\"small\"\n    [iconPos]=\"action.iconPos\"\n  ></p-button>\n\n  <p-popover #menuRef [dismissable]=\"true\" class=\"actions-popover\">\n    <p-menu styleClass=\"border-0\" [model]=\"action.items\">\n      <ng-template pTemplate=\"item\" let-item>\n        <div\n          (click)=\"onActionClick($event, item)\"\n          (keydown.enter)=\"onActionClick($event, item)\"\n          (keydown.space)=\"onActionClick($event, item)\"\n          pRipple\n          tabindex=\"0\"\n          role=\"button\"\n          class=\"flex items-center p-menu-item-link cursor-pointer\"\n        >\n          <span [class]=\"item.icon\"></span>\n          <span class=\"ml-2\">{{ item.label | translate }}</span>\n        </div>\n      </ng-template>\n    </p-menu>\n  </p-popover>\n  } } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pho-actions', imports: [
+                        CommonModule,
+                        ButtonModule,
+                        MenuModule,
+                        PopoverModule,
+                        TranslateModule,
+                    ], template: "<div class=\"flex align-items-center gap-2\">\n  @for(action of actions; track action.actionId){ @switch (action.type) {\n  @case(\"BASIC\"){\n  <p-button\n    *ngIf=\"action.visible !== false\"\n    [label]=\"action.label | translate\"\n    [icon]=\"action.icon || ''\"\n    [styleClass]=\"action.class || ''\"\n    [severity]=\"action.severity ?? 'primary'\"\n    [disabled]=\"\n      action.disabled || actionStateService.isDisabled(action.actionId)\n    \"\n    [loading]=\"action.loading || false\"\n    [id]=\"action.id\"\n    (onClick)=\"onActionClick($event, action)\"\n    size=\"small\"\n    [iconPos]=\"action.iconPos\"\n  ></p-button>\n  } @case(\"SELECT\"){\n  <p-button\n    *ngIf=\"action.visible !== false\"\n    [label]=\"action.label | translate\"\n    [icon]=\"action.icon || ''\"\n    [styleClass]=\"action.class || ''\"\n    [severity]=\"action.severity ?? 'primary'\"\n    [disabled]=\"\n      action.disabled || actionStateService.isDisabled(action.actionId)\n    \"\n    [loading]=\"action.loading || false\"\n    [id]=\"action.id\"\n    (onClick)=\"onActionClick($event, action, menuRef)\"\n    size=\"small\"\n    [iconPos]=\"action.iconPos\"\n  ></p-button>\n\n  <p-popover #menuRef [dismissable]=\"true\" class=\"actions-popover\">\n    <p-menu styleClass=\"border-0\" [model]=\"action.items\">\n      <ng-template pTemplate=\"item\" let-item>\n        <div\n          (click)=\"onActionClick($event, item)\"\n          (keydown.enter)=\"onActionClick($event, item)\"\n          (keydown.space)=\"onActionClick($event, item)\"\n          pRipple\n          tabindex=\"0\"\n          role=\"button\"\n          class=\"flex items-center p-menu-item-link cursor-pointer\"\n        >\n          <span [class]=\"item.icon\"></span>\n          <span class=\"ml-2\">{{ item.label | translate }}</span>\n        </div>\n      </ng-template>\n    </p-menu>\n  </p-popover>\n  } } }\n</div>\n" }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+class CardComponent {
+    card = input.required();
+    cardEventEmmiter = output();
+    cardActions = [];
+    objectKeys(obj) {
+        return Object.keys(obj);
+    }
+    getObjectValueByKey(obj, key) {
+        return obj[key];
+    }
+    onCardClick(event, actionType) {
+        const data = {
+            id: this.card()['id'],
+        };
+        const finalEvent = {
+            ...event,
+            data,
+        };
+        if (actionType) {
+            finalEvent.actionId = actionType;
+        }
+        this.cardEventEmmiter.emit(finalEvent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CardComponent, isStandalone: true, selector: "pho-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, cardActions: { classPropertyName: "cardActions", publicName: "cardActions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { cardEventEmmiter: "cardEventEmmiter" }, ngImport: i0, template: "<p-card\n  styleClass=\"cursor-pointer pho-card hover:surface-100\"\n  [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n  (click)=\"onCardClick(card(), 'NAVIGATE')\"\n>\n  <ng-template #header> </ng-template>\n  <ng-template #title>\n    <div class=\"flex justify-content-between\">\n      {{ card()[\"name\"] }}\n      <pho-actions\n        (actionClick)=\"onCardClick($event)\"\n        [actions]=\"cardActions\"\n      ></pho-actions>\n    </div>\n  </ng-template>\n  <ng-template #subtitle> </ng-template>\n  <p\n    [style]=\"{ height: '3rem', overflow: 'hidden' }\"\n    [innerHTML]=\"card()['description'] || '--'\"\n  ></p>\n  <ng-content select=\"[custom]\"></ng-content>\n  <ng-template #footer>\n    <p-divider />\n\n    <div class=\"flex flex-wrap gap-1 justify-content-between\">\n      @for(item of card()['additional'] ; track item.key; let i = $index){\n      @if(card()['additional'].type === 'DATE'){\n      <p-tag icon=\"pi pi-calendar\" severity=\"secondary\" [value]=\"item.value\" />\n      } @else {\n      <p-tag\n        [severity]=\"i % 2 === 0 ? 'info' : 'success'\"\n        [value]=\"item.value\"\n      />\n      } }\n    </div>\n  </ng-template>\n</p-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pho-card', imports: [
+                        CommonModule,
+                        TooltipModule,
+                        TranslateModule,
+                        ButtonModule,
+                        CardModule,
+                        ActionsComponent,
+                        TagModule,
+                        DividerModule,
+                    ], template: "<p-card\n  styleClass=\"cursor-pointer pho-card hover:surface-100\"\n  [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n  (click)=\"onCardClick(card(), 'NAVIGATE')\"\n>\n  <ng-template #header> </ng-template>\n  <ng-template #title>\n    <div class=\"flex justify-content-between\">\n      {{ card()[\"name\"] }}\n      <pho-actions\n        (actionClick)=\"onCardClick($event)\"\n        [actions]=\"cardActions\"\n      ></pho-actions>\n    </div>\n  </ng-template>\n  <ng-template #subtitle> </ng-template>\n  <p\n    [style]=\"{ height: '3rem', overflow: 'hidden' }\"\n    [innerHTML]=\"card()['description'] || '--'\"\n  ></p>\n  <ng-content select=\"[custom]\"></ng-content>\n  <ng-template #footer>\n    <p-divider />\n\n    <div class=\"flex flex-wrap gap-1 justify-content-between\">\n      @for(item of card()['additional'] ; track item.key; let i = $index){\n      @if(card()['additional'].type === 'DATE'){\n      <p-tag icon=\"pi pi-calendar\" severity=\"secondary\" [value]=\"item.value\" />\n      } @else {\n      <p-tag\n        [severity]=\"i % 2 === 0 ? 'info' : 'success'\"\n        [value]=\"item.value\"\n      />\n      } }\n    </div>\n  </ng-template>\n</p-card>\n" }]
+        }], propDecorators: { cardActions: [{
+                type: Input
+            }] } });
+
 class SearchCardComponent {
     translate = inject(TranslateService);
     searchData;
@@ -242,7 +350,7 @@ class SearchCardComponent {
         this.onSelectFilterEvent.emit(data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, 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/object_types/pink/full/' + link.type.labelKey + '.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 | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"LABELS.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                >{{ \"LABELS.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                  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    {{ \"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: i2$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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, 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/object_types/pink/full/' + link.type.labelKey + '.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 | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"LABELS.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                >{{ \"LABELS.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                  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    {{ \"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: i2$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$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.14", ngImport: i0, type: SearchCardComponent, decorators: [{
             type: Component,
@@ -304,7 +412,7 @@ class CrudService {
         const params = new HttpParams().set('phrase', phrase).set('size', size);
         return this.http.get(url, { params });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CrudService, deps: [{ token: i4$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CrudService, deps: [{ token: i4$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CrudService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CrudService, decorators: [{
@@ -312,7 +420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i4$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i4$2.HttpClient }] });
 
 class SearchBarComponent {
     translate;
@@ -497,7 +605,7 @@ class SearchBarComponent {
             this.reloadSubscription$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchBarComponent, deps: [{ token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, 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)=\"onParentClick($event); expand()\"\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', paddingLeft: '0' }\"\n  styleClass=\"global-search\"\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\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab [value]=\"tab.id\" (click)=\"onTabClick(tab.id)\">\n          <span>{{ tab.header }}</span>\n        </p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!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$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, 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)=\"onParentClick($event); expand()\"\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', paddingLeft: '0' }\"\n  styleClass=\"global-search\"\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\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab [value]=\"tab.id\" (click)=\"onTabClick(tab.id)\">\n          <span>{{ tab.header }}</span>\n        </p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!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: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], 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('open', style({
                     width: '50vw',
@@ -643,7 +751,7 @@ class UserComponent {
         </div>
       </div> -->
     </p-popover>
-  `, isInline: true, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}.cover-image{width:35px;height:35px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: 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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] });
+  `, isInline: true, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}.cover-image{width:35px;height:35px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: 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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
@@ -790,7 +898,7 @@ class TopbarComponent {
             : `url('assets/default-user.png')`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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 }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, 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 [tabs]=\"searchConfig()\"></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      (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-25rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <ng-template #header>\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <div class=\"flex\">\n        <p-image\n          src=\"assets/fuentis_favi.png\"\n          alt=\"Image\"\n          width=\"25\"\n          imageClass=\"mr-2\"\n        >\n        </p-image>\n        <span class=\"font-bold text-xl\">Fuentis Suite</span>\n      </div>\n\n      <p-button\n        (onClick)=\"isSidebarVisible = false\"\n        icon=\"pi pi-times\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n      />\n    </div>\n  </ng-template>\n  <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\">\n    <div class=\"grid\">\n      <!-- If layout is 'full', it takes up the entire row -->\n      <p-divider align=\"left\" type=\"solid\">\n        <span class=\"font-bold text-xs text-500\">\n          {{ moduleGroup.label | translate | uppercase }}</span\n        >\n      </p-divider>\n\n      <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n        <div\n          *ngFor=\"let module of moduleGroup.items\"\n          class=\"col-12 p-2 hover:surface-100 cursor-pointer sidebaritem\"\n          [ngClass]=\"{ 'opacity-40 pointer-events-none': module?.disabled }\"\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 sidebaritem\"\n          [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\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  </ng-container>\n  <ng-template #footer>\n    <!-- Footer links -->\n    <div class=\"mt-auto\">\n      <p-divider class=\"mt-2 mb-3\"></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-graduation-cap p-1 text-sm text-blue-500\"></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            {{ footerConfig.companyName | translate }}\n            <i class=\"pi pi-external-link p-1 text-xs text-blue-500\"></i>\n          </span>\n        </a>\n      </div>\n\n      <div class=\"text-500 text-sm\">\n        {{ footerConfig.copyrightText | translate }}\n      </div>\n    </div>\n  </ng-template>\n  <div class=\"flex flex-column\">\n    <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n  </div>\n</p-drawer>\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: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$3.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"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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 }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, 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 [tabs]=\"searchConfig()\"></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      (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-25rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <ng-template #header>\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <div class=\"flex\">\n        <p-image\n          src=\"assets/fuentis_favi.png\"\n          alt=\"Image\"\n          width=\"25\"\n          imageClass=\"mr-2\"\n        >\n        </p-image>\n        <span class=\"font-bold text-xl\">Fuentis Suite</span>\n      </div>\n\n      <p-button\n        (onClick)=\"isSidebarVisible = false\"\n        icon=\"pi pi-times\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n      />\n    </div>\n  </ng-template>\n  <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\">\n    <div class=\"grid\">\n      <!-- If layout is 'full', it takes up the entire row -->\n      <p-divider align=\"left\" type=\"solid\">\n        <span class=\"font-bold text-xs text-500\">\n          {{ moduleGroup.label | translate | uppercase }}</span\n        >\n      </p-divider>\n\n      <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n        <div\n          *ngFor=\"let module of moduleGroup.items\"\n          class=\"col-12 p-2 hover:surface-100 cursor-pointer sidebaritem\"\n          [ngClass]=\"{ 'opacity-40 pointer-events-none': module?.disabled }\"\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 sidebaritem\"\n          [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\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  </ng-container>\n  <ng-template #footer>\n    <!-- Footer links -->\n    <div class=\"mt-auto\">\n      <p-divider class=\"mt-2 mb-3\"></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-graduation-cap p-1 text-sm text-blue-500\"></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            {{ footerConfig.companyName | translate }}\n            <i class=\"pi pi-external-link p-1 text-xs text-blue-500\"></i>\n          </span>\n        </a>\n      </div>\n\n      <div class=\"text-500 text-sm\">\n        {{ footerConfig.copyrightText | translate }}\n      </div>\n    </div>\n  </ng-template>\n  <div class=\"flex flex-column\">\n    <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n  </div>\n</p-drawer>\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: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$3.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"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
@@ -925,11 +1033,11 @@ class ShellComponent {
         this.onDarkModeSelect.emit(this.darkModeSelector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-rows': '3.5rem 1fr',\n    'grid-template-columns': isSlim ? '60px 1fr' : 'auto 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    [searchConfig]=\"config.searchConfig\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <div class=\"w-max\">\n    <pho-sidebar\n      [mainItems]=\"config.mainItems\"\n      [footerItem]=\"config.footerItem\"\n      (toggleSidebar)=\"toggleSidebar($event)\"\n    ></pho-sidebar>\n  </div>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap w-full\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-rows': '3.5rem 1fr',\n    'grid-template-columns': isSlim ? '60px 1fr' : 'auto 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    [shortModuleName]=\"config.shortModuleName\"\n    [searchConfig]=\"config.searchConfig\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <div class=\"w-max\">\n    <pho-sidebar\n      [mainItems]=\"config.mainItems\"\n      [footerItem]=\"config.footerItem\"\n      (toggleSidebar)=\"toggleSidebar($event)\"\n    ></pho-sidebar>\n  </div>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap w-full\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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-rows': '3.5rem 1fr',\n    'grid-template-columns': isSlim ? '60px 1fr' : 'auto 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    [searchConfig]=\"config.searchConfig\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <div class=\"w-max\">\n    <pho-sidebar\n      [mainItems]=\"config.mainItems\"\n      [footerItem]=\"config.footerItem\"\n      (toggleSidebar)=\"toggleSidebar($event)\"\n    ></pho-sidebar>\n  </div>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap w-full\">\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-rows': '3.5rem 1fr',\n    'grid-template-columns': isSlim ? '60px 1fr' : 'auto 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    [shortModuleName]=\"config.shortModuleName\"\n    [searchConfig]=\"config.searchConfig\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <div class=\"w-max\">\n    <pho-sidebar\n      [mainItems]=\"config.mainItems\"\n      [footerItem]=\"config.footerItem\"\n      (toggleSidebar)=\"toggleSidebar($event)\"\n    ></pho-sidebar>\n  </div>\n  <!-- Main content -->\n  <div class=\"overflow-auto surface-50 wrap w-full\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], darkModeSelector: [{
@@ -1112,7 +1220,7 @@ class PhoenixDataTableActionComponent {
         this.actionClick.emit({ action, rowData: this.rowData });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PhoenixDataTableActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.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.14", 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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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.14", ngImport: i0, type: PhoenixDataTableActionComponent, decorators: [{
             type: Component,
@@ -1213,7 +1321,7 @@ class PhoenixDataTableTabsComponent {
         this.actionClick.emit({ action: opt });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PhoenixDataTableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n  [options]=\"actions\"\n  optionValue=\"key\"\n  [(ngModel)]=\"value\"\n  optionLabel=\"icon\"\n  [unselectable]=\"true\"\n  (onChange)=\"onActionClick($event)\"\n>\n  <ng-template #item let-item>\n    <span>\n      {{ item.label | translate }}\n    </span>\n    <span>\n      <p-badge\n        *ngIf=\"item.badgeCount\"\n        [value]=\"item.badgeCount\"\n        severity=\"danger\"\n        badgeSize=\"small\"\n      />\n    </span>\n  </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$1.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n  [options]=\"actions\"\n  optionValue=\"key\"\n  [(ngModel)]=\"value\"\n  optionLabel=\"icon\"\n  [unselectable]=\"true\"\n  (onChange)=\"onActionClick($event)\"\n>\n  <ng-template #item let-item>\n    <span>\n      {{ item.label | translate }}\n    </span>\n    <span>\n      <p-badge\n        *ngIf=\"item.badgeCount\"\n        [value]=\"item.badgeCount\"\n        severity=\"danger\"\n        badgeSize=\"small\"\n      />\n    </span>\n  </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$4.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PhoenixDataTableTabsComponent, decorators: [{
             type: Component,
@@ -1653,11 +1761,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.14", ngImport: i0, type: PhoenixDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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$4.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.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$1.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.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: i2$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: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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$5.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.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: i2$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.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$2.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: i5.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.14", ngImport: i0, type: PhoenixDataTableComponent, decorators: [{
             type: Component,
@@ -1847,7 +1955,7 @@ class TableCaptionComponent {
         this.actionClick.emit({ action, selectedItems: this.selectedItems });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: 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    @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"filtersPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-filter\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"filtersPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-filter\"></i>\n    </span>\n    } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n    _selectedColumns.length ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"columnsPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-sliders-v\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"columnsPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-sliders-v\"></i>\n    </span>\n\n    } }\n\n    <div class=\"flex\">\n      @if(tableConfiguration.hasSearch){\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      } @if(tableConfiguration.hasMore){\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\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-refresh\n          \"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"resetFilters()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of filters; track control.key ){ @switch(control.type) {\n      @case ('checkbox') {\n      <div class=\"mb-2\">\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-2\">\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      } @case ('multiselect') {\n      <div class=\"mb-2\">\n        <p-floatlabel variant=\"on\">\n          <p-multiselect\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n          <label for=\"username\">{{ control.label }}</label>\n        </p-floatlabel>\n        <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n      </div>\n      } @case ('person-dropdown'){\n      <label class=\"mb-2 block\">{{ control.label }}</label>\n      <p-multiselect\n        [options]=\"control.options\"\n        optionLabel=\"label\"\n        [formControlName]=\"control.key\"\n        class=\"w-full\"\n        [showClear]=\"true\"\n      >\n        <ng-template #selectedItem let-selectedOption>\n          <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n            <p-avatar\n              [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ selectedOption.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template let-person #item>\n          <div class=\"flex align-items-center gap-2\">\n            <p-avatar\n              [label]=\"person.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ person.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template #dropdownicon>\n          <i class=\"pi pi-user\"></i>\n        </ng-template>\n        <!-- <ng-template #header>\n              <div class=\"font-medium p-3\">Available Countries</div>\n          </ng-template> -->\n        <!-- <ng-template #footer>\n              <div class=\"p-3\">\n                  <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n              </div>\n          </ng-template> -->\n      </p-multiselect>\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-eye\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"resetColumns()\"\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      (onChange)=\"applyColumns()\"\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$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$2.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$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.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: i10.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: "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: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { 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: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: 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    @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"filtersPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-filter\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"filtersPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-filter\"></i>\n    </span>\n    } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n    _selectedColumns.length ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"columnsPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-sliders-v\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"columnsPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-sliders-v\"></i>\n    </span>\n\n    } }\n\n    <div class=\"flex\">\n      @if(tableConfiguration.hasSearch){\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      } @if(tableConfiguration.hasMore){\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\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-refresh\n          \"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"resetFilters()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of filters; track control.key ){ @switch(control.type) {\n      @case ('checkbox') {\n      <div class=\"mb-2\">\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-2\">\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      } @case ('multiselect') {\n      <div class=\"mb-2\">\n        <p-floatlabel variant=\"on\">\n          <p-multiselect\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n          <label for=\"username\">{{ control.label }}</label>\n        </p-floatlabel>\n        <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n      </div>\n      } @case ('person-dropdown'){\n      <label class=\"mb-2 block\">{{ control.label }}</label>\n      <p-multiselect\n        [options]=\"control.options\"\n        optionLabel=\"label\"\n        [formControlName]=\"control.key\"\n        class=\"w-full\"\n        [showClear]=\"true\"\n      >\n        <ng-template #selectedItem let-selectedOption>\n          <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n            <p-avatar\n              [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ selectedOption.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template let-person #item>\n          <div class=\"flex align-items-center gap-2\">\n            <p-avatar\n              [label]=\"person.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ person.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template #dropdownicon>\n          <i class=\"pi pi-user\"></i>\n        </ng-template>\n        <!-- <ng-template #header>\n              <div class=\"font-medium p-3\">Available Countries</div>\n          </ng-template> -->\n        <!-- <ng-template #footer>\n              <div class=\"p-3\">\n                  <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n              </div>\n          </ng-template> -->\n      </p-multiselect>\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-eye\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"resetColumns()\"\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      (onChange)=\"applyColumns()\"\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: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.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: i10.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: "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: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { 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: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableCaptionComponent, decorators: [{
             type: Component,
@@ -2254,7 +2362,7 @@ class TableComponent {
         this.bulkMode = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, 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      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\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                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\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                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\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]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n                      {{ rowData[col.field].email ?? \"  --\" }}\n                    </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-phone text-500\"></i\n                      >{{ rowData[col.field].phone ?? \"  --\" }}\n                    </span>\n                  </div>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\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 *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\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$4.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$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"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.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: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, 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      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\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                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\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                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\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]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n                      {{ rowData[col.field].email ?? \"  --\" }}\n                    </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-phone text-500\"></i\n                      >{{ rowData[col.field].phone ?? \"  --\" }}\n                    </span>\n                  </div>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\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 *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\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$5.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$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: i2$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"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.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: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2573,12 +2681,12 @@ class MetaFormAbstract {
         if (this.formSub$)
             this.formSub$.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$2.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$1.HttpClient }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$2.HttpClient }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: MetaFormAbstract, isStandalone: true, inputs: { metaForm: "metaForm", metaFormValues: "metaFormValues", metaFormControls: "metaFormControls", disableForm: "disableForm", formButtons: "formButtons", groupForm: "groupForm", formStyle: "formStyle" }, outputs: { onFormSubmit: "onFormSubmit", onFormCancel: "onFormCancel" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaFormAbstract, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$1.HttpClient }], propDecorators: { metaForm: [{
+        }], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$2.HttpClient }], propDecorators: { metaForm: [{
                 type: Input
             }], metaFormValues: [{
                 type: Input
@@ -2717,7 +2825,7 @@ class ObjectItemDialogComponent {
         rows: 20,
         selectionType: tableSelectionType.RADIO_BTN,
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$2.DynamicDialogRef }, { token: i1$2.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n  <phoenix-table\n    #table\n    [data]=\"tableData\"\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n     (checkBoxSelection)=\"onSelectionChanged($event)\"\n  >\n  </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n  <div class=\"flex gap-2\">\n    <ng-container *ngFor=\"let action of actions\">\n    <p-button\n        [label]=\"action.label | translate\"\n        [icon]=\"action.icon || ''\"\n        [severity]=\"action.severity || 'primary'\"\n        [disabled]=\"action.id === 'assign' && !hasSelection\"\n        [id]=\"action.id\"\n        (onClick)=\"actionClick(action.id)\"\n        size=\"small\"\n      ></p-button>\n    </ng-container>\n</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration", "filters"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { 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.14", ngImport: i0, type: ObjectItemDialogComponent, decorators: [{
@@ -2730,7 +2838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         TableComponent,
                         ButtonModule
                     ], template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n  <phoenix-table\n    #table\n    [data]=\"tableData\"\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n     (checkBoxSelection)=\"onSelectionChanged($event)\"\n  >\n  </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n  <div class=\"flex gap-2\">\n    <ng-container *ngFor=\"let action of actions\">\n    <p-button\n        [label]=\"action.label | translate\"\n        [icon]=\"action.icon || ''\"\n        [severity]=\"action.severity || 'primary'\"\n        [disabled]=\"action.id === 'assign' && !hasSelection\"\n        [id]=\"action.id\"\n        (onClick)=\"actionClick(action.id)\"\n        size=\"small\"\n      ></p-button>\n    </ng-container>\n</div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.DynamicDialogRef }, { type: i1$2.DynamicDialogConfig }], propDecorators: { table: [{
+        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }, { type: i1$3.DynamicDialogConfig }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
             }] } });
@@ -3309,7 +3417,7 @@ class MetaCalendarComponent extends BaseMetaField {
       [appendTo]="'body'"
     ></p-datepicker>
     <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
-  </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$3.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: DatePickerModule }, { kind: "component", type: i1$4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.14", ngImport: i0, type: MetaCalendarComponent, decorators: [{
             type: Component,
@@ -3467,7 +3575,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: 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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$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$1.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldLabelPipe, name: "fieldLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaCheckboxComponent, decorators: [{
             type: Component,
@@ -3523,7 +3631,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$2.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$2.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$3.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$3.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.14", ngImport: i0, type: MetaColorPickerComponent, decorators: [{
             type: Component,
@@ -3609,7 +3717,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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaCurrencyComponent, decorators: [{
             type: Component,
@@ -3686,7 +3794,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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.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$2.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.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$3.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.14", ngImport: i0, type: MetaMultipleSelectComponent, decorators: [{
             type: Component,
@@ -3757,7 +3865,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$2.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$2.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$3.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$3.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.14", ngImport: i0, type: MetaNumberComponent, decorators: [{
             type: Component,
@@ -3826,7 +3934,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$2.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$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$6.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$3.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$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$6.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.14", ngImport: i0, type: MetaPasswordFeildComponent, decorators: [{
             type: Component,
@@ -3893,7 +4001,7 @@ class MetaSelectButtonComponent 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$2.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: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }] });
+  `, 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$3.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: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$4.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaSelectButtonComponent, decorators: [{
             type: Component,
@@ -4053,7 +4161,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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$7.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$7.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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.14", ngImport: i0, type: MetaSingleSelectObjectBasedComponent, decorators: [{
             type: Component,
@@ -4251,7 +4359,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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { 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: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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"] }] });
+  `, 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { 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: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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.14", ngImport: i0, type: MetaSingleSelectComponent, decorators: [{
             type: Component,
@@ -4468,7 +4576,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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$5.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
             type: Component,
@@ -4558,7 +4666,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$2.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$8.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$2.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$3.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$8.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$3.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.14", ngImport: i0, type: MetaSwitchComponent, decorators: [{
             type: Component,
@@ -4629,7 +4737,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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$9.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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$9.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.14", ngImport: i0, type: MetaTextAreaComponent, decorators: [{
             type: Component,
@@ -4697,7 +4805,7 @@ class MetaTextEditorComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [":is() .p-editor-container .p-editor-content .ql-editor{min-height:120px}:is() .ql-image{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$5.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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"] }, { kind: "ngmodule", type: TextareaModule }] });
+  `, isInline: true, styles: [":is() .p-editor-container .p-editor-content .ql-editor{min-height:120px}:is() .ql-image{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$6.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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"] }, { kind: "ngmodule", type: TextareaModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
             type: Component,
@@ -4765,7 +4873,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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.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$2.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$3.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$3.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$3.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.14", ngImport: i0, type: MetaTextInputComponent, decorators: [{
             type: Component,
@@ -4866,7 +4974,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: i3$1.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.14", ngImport: i0, type: MetaTimeperiodComponent, decorators: [{
             type: Component,
@@ -4963,7 +5071,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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.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$2.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: i2$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"] }] });
+  `, 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$3.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$3.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$3.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: i2$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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaUploadComponent, decorators: [{
             type: Component,
@@ -5235,10 +5343,10 @@ class ReadOnlyInputComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i2$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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>\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    </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 | stripHtml }}\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", 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$8.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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.14", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$6.DomSanitizer }, { token: i2$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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>\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    </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 | stripHtml }}\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", 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$8.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // SerachCardComponent,
-                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$6.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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$5.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: i9$1.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"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
+                CheckboxModule }, { kind: "component", type: i5$1.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$6.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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$6.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: i9$1.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"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
             type: Component,
@@ -5258,7 +5366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ButtonModule,
                         StripHtmlPipe
                     ], 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>\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    </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 | stripHtml }}\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", 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: i2$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
+        }], ctorParameters: () => [{ type: i1$6.DomSanitizer }, { type: i2$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
                 type: Input
             }], metaform: [{
                 type: Input
@@ -5594,8 +5702,8 @@ class MetaFormComponent extends MetaFormAbstract {
             this.metaService.setFormDirtyStatus(this.metaForm.dirty);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$2.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n  <!-- <small>{{ metaForm.value | json }}</small> -->\n  <div class=\"grid\">\n    <ng-container *ngFor=\"let control of metaFormControls\">\n      <ng-container [ngSwitch]=\"control.configuration.type\">\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-text-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.NUMBER\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'number-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-number-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-number-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'timeperiod-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-timeperiod\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-timeperiod>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CURRENCY\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'currency-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-currency\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-currency>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_AREA\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-area-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-area\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-text-area>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ss-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-single-select\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-single-select>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-single-select-object-based\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-single-select-object-based>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.MS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ms-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-multiple-select\n              [attr.data-cy]=\"'multiSelect-' + control?.id\"\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-multiple-select>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'start-due-date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-start-due-date\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-start-due-date>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-calendar\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-calendar>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-editor-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-editor\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-text-editor>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column justify-content-end\"\n          [attr.data-cy]=\"'checkbox-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-checkbox\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-checkbox>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX_COLOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column justify-content-end\"\n          [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-checkbox-color-picker\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-checkbox-color-picker>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SWITCH\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'switch-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-switch\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-switch>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SELECT_BUTTON\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'select-button-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-select-button\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-select-button>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.ASSIGN\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'assign-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-assign-responsible\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-assign-responsible>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n        [style]=\"{ order: control.order }\"\n        *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n        class=\"flex flex-column\"\n        [attr.data-cy]=\"'assign-' + control?.id\"\n      >\n        <!-- edit field & redonly field content -->\n        <ng-container *ngIf=\"control.readOnly; else readOnly\">\n          <phoenix-read-only-input\n            *ngIf=\"!control?.hidden\"\n            [control]=\"control\"\n            [metaform]=\"metaForm\"\n          ></phoenix-read-only-input>\n        </ng-container>\n        <ng-template #readOnly>\n          <phoenix-meta-assign-asset\n            [disable]=\"disableForm\"\n            [formControlName]=\"control.configuration.key\"\n            [control]=\"control\"\n            [parentForm]=\"metaForm\"\n          >\n          </phoenix-meta-assign-asset>\n        </ng-template>\n        <!-- edit field & redonly field content end -->\n      </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.LINKS_DATA\"\n          [ngClass]=\"control | fieldCol\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'links-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <!-- <phoenix-meta-object-links\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-object-links> -->\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.PASSWORD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'password-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-password-feild\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-password-feild>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.COLOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'color-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-color-picker\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-color-picker>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.UPLOAD\"\n          [attr.data-cy]=\"'upload-' + control?.id\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-upload\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-upload>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <ng-content\n          *ngSwitchCase=\"ControlType.SLOT\"\n          [select]=\"[control.configuration.key]\"\n        ></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div *ngIf=\"formButtons\" class=\"flex justify-content-end\">\n    <p-button\n      class=\"mr-1\"\n      [disabled]=\"!metaForm.valid || disableForm\"\n      type=\"submit\"\n      label=\"{{ 'ACTION.SAVE' | translate }}\"\n      [attr.data-cy]=\"'submit-button'\"\n    ></p-button>\n    <p-button\n      [disabled]=\"disableForm\"\n      styleClass=\"p-button-link\"\n      [text]=\"true\"\n      (onClick)=\"onCancel()\"\n      label=\"{{ 'ACTION.CANCEL' | translate }}\"\n      [attr.data-cy]=\"'cancel-button'\"\n    ></p-button>\n  </div>\n</form>\n", styles: [""], 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { 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: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: 
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n  <!-- <small>{{ metaForm.value | json }}</small> -->\n  <div class=\"grid\">\n    <ng-container *ngFor=\"let control of metaFormControls\">\n      <ng-container [ngSwitch]=\"control.configuration.type\">\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-text-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.NUMBER\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'number-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-number-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-number-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'timeperiod-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-timeperiod\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-timeperiod>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CURRENCY\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'currency-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-currency\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-currency>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_AREA\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-area-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-area\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-text-area>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ss-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-single-select\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-single-select>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-single-select-object-based\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-single-select-object-based>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.MS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ms-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-multiple-select\n              [attr.data-cy]=\"'multiSelect-' + control?.id\"\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-multiple-select>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'start-due-date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-start-due-date\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-start-due-date>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-calendar\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-calendar>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-editor-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-editor\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-text-editor>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column justify-content-end\"\n          [attr.data-cy]=\"'checkbox-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-checkbox\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-checkbox>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX_COLOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column justify-content-end\"\n          [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-checkbox-color-picker\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-checkbox-color-picker>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SWITCH\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'switch-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-switch\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-switch>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SELECT_BUTTON\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'select-button-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-select-button\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-select-button>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.ASSIGN\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'assign-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-assign-responsible\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-assign-responsible>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n        [style]=\"{ order: control.order }\"\n        *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n        class=\"flex flex-column\"\n        [attr.data-cy]=\"'assign-' + control?.id\"\n      >\n        <!-- edit field & redonly field content -->\n        <ng-container *ngIf=\"control.readOnly; else readOnly\">\n          <phoenix-read-only-input\n            *ngIf=\"!control?.hidden\"\n            [control]=\"control\"\n            [metaform]=\"metaForm\"\n          ></phoenix-read-only-input>\n        </ng-container>\n        <ng-template #readOnly>\n          <phoenix-meta-assign-asset\n            [disable]=\"disableForm\"\n            [formControlName]=\"control.configuration.key\"\n            [control]=\"control\"\n            [parentForm]=\"metaForm\"\n          >\n          </phoenix-meta-assign-asset>\n        </ng-template>\n        <!-- edit field & redonly field content end -->\n      </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.LINKS_DATA\"\n          [ngClass]=\"control | fieldCol\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'links-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <!-- <phoenix-meta-object-links\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-object-links> -->\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.PASSWORD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'password-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-password-feild\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-password-feild>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.COLOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'color-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-color-picker\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-color-picker>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.UPLOAD\"\n          [attr.data-cy]=\"'upload-' + control?.id\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-upload\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-upload>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <ng-content\n          *ngSwitchCase=\"ControlType.SLOT\"\n          [select]=\"[control.configuration.key]\"\n        ></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div *ngIf=\"formButtons\" class=\"flex justify-content-end\">\n    <p-button\n      class=\"mr-1\"\n      [disabled]=\"!metaForm.valid || disableForm\"\n      type=\"submit\"\n      label=\"{{ 'ACTION.SAVE' | translate }}\"\n      [attr.data-cy]=\"'submit-button'\"\n    ></p-button>\n    <p-button\n      [disabled]=\"disableForm\"\n      styleClass=\"p-button-link\"\n      [text]=\"true\"\n      (onClick)=\"onCancel()\"\n      label=\"{{ 'ACTION.CANCEL' | translate }}\"\n      [attr.data-cy]=\"'cancel-button'\"\n    ></p-button>\n  </div>\n</form>\n", styles: [""], 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { 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: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: 
                 //metafields -> to one module and than import here
                 MetaTextEditorComponent, selector: "phoenix-meta-text-editor" }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaColorPickerComponent, selector: "phoenix-meta-color-picker" }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaCheckboxColorPickerComponent, selector: "phoenix-meta-checkbox-color-picker" }], encapsulation: i0.ViewEncapsulation.None });
 }
@@ -5640,7 +5748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MetaSingleSelectObjectBasedComponent,
                         MetaCheckboxColorPickerComponent,
                     ], encapsulation: ViewEncapsulation.None, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n  <!-- <small>{{ metaForm.value | json }}</small> -->\n  <div class=\"grid\">\n    <ng-container *ngFor=\"let control of metaFormControls\">\n      <ng-container [ngSwitch]=\"control.configuration.type\">\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-text-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.NUMBER\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'number-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-number-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-number-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'timeperiod-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-timeperiod\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-timeperiod>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CURRENCY\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'currency-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-currency\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-currency>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_AREA\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-area-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-area\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-text-area>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ss-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-single-select\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-single-select>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-single-select-object-based\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-single-select-object-based>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.MS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ms-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-multiple-select\n              [attr.data-cy]=\"'multiSelect-' + control?.id\"\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-multiple-select>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'start-due-date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-start-due-date\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-start-due-date>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-calendar\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-calendar>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-editor-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-editor\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-text-editor>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column justify-content-end\"\n          [attr.data-cy]=\"'checkbox-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-checkbox\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-checkbox>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX_COLOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column justify-content-end\"\n          [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-checkbox-color-picker\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-checkbox-color-picker>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SWITCH\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'switch-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-switch\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-switch>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SELECT_BUTTON\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'select-button-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-select-button\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-select-button>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.ASSIGN\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'assign-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-assign-responsible\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-assign-responsible>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n        [style]=\"{ order: control.order }\"\n        *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n        class=\"flex flex-column\"\n        [attr.data-cy]=\"'assign-' + control?.id\"\n      >\n        <!-- edit field & redonly field content -->\n        <ng-container *ngIf=\"control.readOnly; else readOnly\">\n          <phoenix-read-only-input\n            *ngIf=\"!control?.hidden\"\n            [control]=\"control\"\n            [metaform]=\"metaForm\"\n          ></phoenix-read-only-input>\n        </ng-container>\n        <ng-template #readOnly>\n          <phoenix-meta-assign-asset\n            [disable]=\"disableForm\"\n            [formControlName]=\"control.configuration.key\"\n            [control]=\"control\"\n            [parentForm]=\"metaForm\"\n          >\n          </phoenix-meta-assign-asset>\n        </ng-template>\n        <!-- edit field & redonly field content end -->\n      </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.LINKS_DATA\"\n          [ngClass]=\"control | fieldCol\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'links-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <!-- <phoenix-meta-object-links\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-object-links> -->\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.PASSWORD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'password-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-password-feild\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-password-feild>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.COLOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'color-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-color-picker\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-color-picker>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.UPLOAD\"\n          [attr.data-cy]=\"'upload-' + control?.id\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-upload\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-upload>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <ng-content\n          *ngSwitchCase=\"ControlType.SLOT\"\n          [select]=\"[control.configuration.key]\"\n        ></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div *ngIf=\"formButtons\" class=\"flex justify-content-end\">\n    <p-button\n      class=\"mr-1\"\n      [disabled]=\"!metaForm.valid || disableForm\"\n      type=\"submit\"\n      label=\"{{ 'ACTION.SAVE' | translate }}\"\n      [attr.data-cy]=\"'submit-button'\"\n    ></p-button>\n    <p-button\n      [disabled]=\"disableForm\"\n      styleClass=\"p-button-link\"\n      [text]=\"true\"\n      (onClick)=\"onCancel()\"\n      label=\"{{ 'ACTION.CANCEL' | translate }}\"\n      [attr.data-cy]=\"'cancel-button'\"\n    ></p-button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$2.HttpClient }] });
 
 class MetaFormButtonsComponent {
     metaFormService;
@@ -5675,7 +5783,7 @@ class MetaFormButtonsComponent {
         this.sub$?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaFormButtonsComponent, deps: [{ token: MetaFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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: i2$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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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.14", 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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.14", ngImport: i0, type: MetaFormButtonsComponent, decorators: [{
             type: Component,
@@ -5708,7 +5816,7 @@ class GroupsFormComponent extends MetaFormAbstract {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n    @for ( group of metaFormControls; track group.groupName; let idx = $index){\n    <div [style]=\"{ order: group.order }\" class=\"w-full\">\n      <p-accordion-panel [value]=\"idx\">\n        <p-accordion-header>\n          <ng-template #toggleicon let-active=\"active\">\n            @if (active) {\n            <i class=\"pi pi-minus-circle\"></i>\n            } @else {\n            <i class=\"pi pi-plus-circle\"></i>\n\n            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-area\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-area>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select-object-based\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select-object-based>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-multiple-select\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-multiple-select>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-editor\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-editor>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-checkbox\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-checkbox>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.LINKS_DATA\"\n                  [ngClass]=\"control | fieldCol\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- <phoenix-meta-object-links\n                  [formControlName]=\"control.configuration.key\"\n                  [control]=\"control\"\n                  [parentForm]=\"metaForm\"\n                ></phoenix-meta-object-links> -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.PASSWORD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-password-feild\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-password-feild>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </div>\n    }\n  </form>\n</p-accordion>\n", styles: [""], 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n    @for ( group of metaFormControls; track group.groupName; let idx = $index){\n    <div [style]=\"{ order: group.order }\" class=\"w-full\">\n      <p-accordion-panel [value]=\"idx\">\n        <p-accordion-header>\n          <ng-template #toggleicon let-active=\"active\">\n            @if (active) {\n            <i class=\"pi pi-minus-circle\"></i>\n            } @else {\n            <i class=\"pi pi-plus-circle\"></i>\n\n            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-area\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-area>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select-object-based\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select-object-based>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-multiple-select\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-multiple-select>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-editor\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-editor>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-checkbox\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-checkbox>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.LINKS_DATA\"\n                  [ngClass]=\"control | fieldCol\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- <phoenix-meta-object-links\n                  [formControlName]=\"control.configuration.key\"\n                  [control]=\"control\"\n                  [parentForm]=\"metaForm\"\n                ></phoenix-meta-object-links> -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.PASSWORD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-password-feild\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-password-feild>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </div>\n    }\n  </form>\n</p-accordion>\n", styles: [""], 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: 
                 // InputTextareaModule,
                 CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor" }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i4$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i4$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i4$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i4$3.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: 
                 // MetaObjectLinksComponent,
@@ -5896,7 +6004,7 @@ class StatusAttributeDisplayComponent {
         return label ? label.trim().split(/\s+/).length > 2 : false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-center gap-1\">\n      <label class=\"font-semibold text-600\" [ngClass]=\"{\n        'wrap-label': isMultiWordLabel(attr.label | translate),\n        'nowrap-label': !isMultiWordLabel(attr.label | translate)\n      }\">\n        {{ attr.label | translate }}\n      </label>\n      <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\">\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n      <!-- STRING -->\n      <span *ngSwitchCase=\"'STRING'\">\n        {{ attr.value || '--' }}\n      </span>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n      </span>\n\n      <!-- LINK -->\n      <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\"\n        class=\"text-blue-500 underline\">\n        {{ attr.value || '--' }}\n      </a>\n\n      <!-- PERSON -->\n      <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n        <div class=\"person-avatar\">\n          {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n        </div>\n        <div class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"(attr?.value + ' ' + attr?.value1) || '--'\">\n          {{ attr?.value || '--' }} {{ attr?.value1 || '' }}\n        </div>\n      </div>\n\n      <!-- LIST -->\n      <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span\n            [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || '--' }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n\n</div>\n\n<p-popover #popover>\n\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div style=\"display: grid; grid-template-columns: max-content auto; column-gap: 1rem; row-gap: 0.5rem; align-items: center;\">\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left truncate\"\n             [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n          {{ item.label }}:\n        </div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n                 class=\"text-blue-500 underline\">\n                {{ item.label || 'Open' }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <span *ngIf=\"item.value; else empty\" class=\"block truncate\"\n                    [pTooltip]=\"item.value.length > 30 ? item.value : undefined\">\n                {{ item.value.length > 30 ? (item.value | slice:0:30) + '\u2026' : item.value }}\n              </span>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date: dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-2 truncate\">\n                  <div class=\"person-avatar\">\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <phoenix-tag\n                  [customColor]=\"item.value1 || ''\"\n                  [content]=\"item.value\">\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n\n          </ng-container>\n        </div>\n\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div class=\"font-sm text-600 truncate mb-1\"\n               [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n              <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", 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;max-width:250px;min-width:100px}.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:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.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.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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$2.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-center gap-1\">\n      <label class=\"font-semibold text-600\" [ngClass]=\"{\n        'wrap-label': isMultiWordLabel(attr.label | translate),\n        'nowrap-label': !isMultiWordLabel(attr.label | translate)\n      }\">\n        {{ attr.label | translate }}\n      </label>\n      <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\">\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n      <!-- STRING -->\n      <span *ngSwitchCase=\"'STRING'\">\n        {{ attr.value || '--' }}\n      </span>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n      </span>\n\n      <!-- LINK -->\n      <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\"\n        class=\"text-blue-500 underline\">\n        {{ attr.value || '--' }}\n      </a>\n\n      <!-- PERSON -->\n      <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n        <div class=\"person-avatar\">\n          {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n        </div>\n        <div class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"(attr?.value + ' ' + attr?.value1) || '--'\">\n          {{ attr?.value || '--' }} {{ attr?.value1 || '' }}\n        </div>\n      </div>\n\n      <!-- LIST -->\n      <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span\n            [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || '--' }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n\n</div>\n\n<p-popover #popover>\n\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div style=\"display: grid; grid-template-columns: max-content auto; column-gap: 1rem; row-gap: 0.5rem; align-items: center;\">\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left truncate\"\n             [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n          {{ item.label }}:\n        </div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n                 class=\"text-blue-500 underline\">\n                {{ item.label || 'Open' }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <span *ngIf=\"item.value; else empty\" class=\"block truncate\"\n                    [pTooltip]=\"item.value.length > 30 ? item.value : undefined\">\n                {{ item.value.length > 30 ? (item.value | slice:0:30) + '\u2026' : item.value }}\n              </span>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date: dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-2 truncate\">\n                  <div class=\"person-avatar\">\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <phoenix-tag\n                  [customColor]=\"item.value1 || ''\"\n                  [content]=\"item.value\">\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n\n          </ng-container>\n        </div>\n\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div class=\"font-sm text-600 truncate mb-1\"\n               [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n              <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", 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;max-width:250px;min-width:100px}.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:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.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.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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: i5.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
             type: Component,
@@ -6044,5 +6152,5 @@ var SimpleButtonType;
  * Generated bundle index. Do not edit.
  */
 
-export { GroupsFormComponent, InnerHeaderComponent, MetaFormButtonsComponent, MetaFormComponent, MetaFormService, ObjectItemDialogComponent, PhoenixDataTableComponent, QuickPickComponent, QuickPickSidePanelComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, SimpleButtonType, StatusBarComponent, StatusColType, StatusHeaderComponent, StatusTooltipType, TableComponent, TopbarComponent, UserComponent, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
+export { ActionTypes, ActionsComponent, CardComponent, GroupsFormComponent, InnerHeaderComponent, MetaFormButtonsComponent, MetaFormComponent, MetaFormService, ObjectItemDialogComponent, PhoenixDataTableComponent, QuickPickComponent, QuickPickSidePanelComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, SimpleButtonType, StatusBarComponent, StatusColType, StatusHeaderComponent, StatusTooltipType, TableComponent, TopbarComponent, UserComponent, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
 //# sourceMappingURL=fuentis-phoenix-ui.mjs.map