@fuentis/phoenix-ui 0.0.9-alpha.78 → 0.0.9-alpha.81

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, EventEmitter, Output, ViewChild, Injectable, Pipe, inject, DestroyRef, input, CUSTOM_ELEMENTS_SCHEMA, signal, effect, Directive, forwardRef } from '@angular/core';
+import { Input, ViewEncapsulation, Component, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Pipe, inject, DestroyRef, input, CUSTOM_ELEMENTS_SCHEMA, signal, effect, Injectable, Directive, forwardRef } from '@angular/core';
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$1 from '@angular/common';
@@ -31,22 +31,23 @@ import * as i6 from 'primeng/avatar';
 import { Avatar, AvatarModule } from 'primeng/avatar';
 import * as i3$2 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
-import * as i5$1 from 'primeng/image';
-import { Image, ImageModule } from 'primeng/image';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import * as i2$2 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
-import { BehaviorSubject, Subject, combineLatestWith, debounceTime, switchMap, of, distinctUntilChanged, combineLatest } from 'rxjs';
-import * as i2$3 from 'primeng/table';
-import { TableModule } from 'primeng/table';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i7 from 'primeng/tieredmenu';
+import { TieredMenuModule } from 'primeng/tieredmenu';
 import * as i3$3 from 'primeng/api';
 import { FilterMatchMode } from 'primeng/api';
+import * as i2$4 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3$6 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i9 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i7 from 'primeng/tag';
+import * as i7$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i2$2 from 'primeng/selectbutton';
+import * as i2$3 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i4$2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
@@ -60,8 +61,9 @@ import * as i1$3 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 import * as i3$8 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i2$4 from 'primeng/editor';
+import * as i2$5 from 'primeng/editor';
 import { EditorModule } from 'primeng/editor';
+import { Subject, BehaviorSubject, combineLatestWith, debounceTime, switchMap, of, distinctUntilChanged, combineLatest } from 'rxjs';
 import * as i4$3 from '@angular/common/http';
 import * as i3$4 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
@@ -73,6 +75,8 @@ import * as i3$9 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import * as i3$7 from 'primeng/password';
 import { PasswordModule } from 'primeng/password';
+import * as i5$1 from 'primeng/image';
+import { ImageModule } from 'primeng/image';
 import { TextareaModule } from 'primeng/textarea';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i1$4 from '@angular/platform-browser';
@@ -446,77 +450,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 type: Input
             }] } });
 
-class DateFormatService {
-    dateFormat = new BehaviorSubject('yyyy-MM-dd');
-    currentDateFormatsub$;
-    currentDateFormat$ = this.dateFormat.asObservable();
-    date;
-    constructor() {
-        this.currentDateFormatsub$ = this.currentDateFormat$.subscribe((date) => (this.date = date));
-    }
-    setDateFormat(date) {
-        const regex = /mm/i;
-        let filterdate = date.toLocaleLowerCase().replace(regex, 'MM');
-        this.dateFormat.next(filterdate);
-    }
-    ngOnDestroy() {
-        if (this.currentDateFormatsub$)
-            this.currentDateFormatsub$.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: DateFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: DateFormatService, providedIn: 'root' });
+class QuickPickComponent {
+    onBack = new EventEmitter();
+    onQuickPick = new EventEmitter();
+    onForward = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: QuickPickComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: QuickPickComponent, isStandalone: true, selector: "phoenix-quick-pick", outputs: { onBack: "onBack", onQuickPick: "onQuickPick", onForward: "onForward" }, ngImport: i0, template: "<div class=\"flex items-center\">\n    <span (click)=\"onBack.emit()\" class=\"slide cursor-pointer\">\n      <i class=\"pi pi-chevron-left cursor-pointer hover:text-blue-500\" style=\"color: #00395b\"></i>\n    </span>\n    <span (click)=\"onQuickPick.emit()\" class=\"slide\">\n      <i class=\"pi pi-table ml-3 mr-3 cursor-pointer hover:text-blue-500\" style=\"color: #00395b\"></i>\n    </span>\n    <span (click)=\"onForward.emit()\" class=\"slide\">\n      <i class=\"pi pi-chevron-right cursor-pointer hover:text-blue-500\" style=\"color: #00395b\"></i>\n    </span>\n  </div>", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: DateFormatService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: QuickPickComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-quick-pick', imports: [], template: "<div class=\"flex items-center\">\n    <span (click)=\"onBack.emit()\" class=\"slide cursor-pointer\">\n      <i class=\"pi pi-chevron-left cursor-pointer hover:text-blue-500\" style=\"color: #00395b\"></i>\n    </span>\n    <span (click)=\"onQuickPick.emit()\" class=\"slide\">\n      <i class=\"pi pi-table ml-3 mr-3 cursor-pointer hover:text-blue-500\" style=\"color: #00395b\"></i>\n    </span>\n    <span (click)=\"onForward.emit()\" class=\"slide\">\n      <i class=\"pi pi-chevron-right cursor-pointer hover:text-blue-500\" style=\"color: #00395b\"></i>\n    </span>\n  </div>" }]
+        }], propDecorators: { onBack: [{
+                type: Output
+            }], onQuickPick: [{
+                type: Output
+            }], onForward: [{
+                type: Output
+            }] } });
 
-[];
 class StatusHeaderComponent {
-    dateFormatService;
-    isCollapsed = false;
-    iconUrl = '';
-    icon = {
-        url: '',
-        size: {
-            width: '60px',
-            height: '60px',
-        },
-    };
-    showQuickActions = true;
-    data;
-    dateFormat;
-    dataFormatSub$;
-    constructor(dateFormatService) {
-        this.dateFormatService = dateFormatService;
-        this.dataFormatSub$ = this.dateFormatService.currentDateFormat$.subscribe((date) => (this.dateFormat = date));
-    }
-    ngOnDestroy() {
-        if (this.dataFormatSub$)
-            this.dataFormatSub$.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: StatusHeaderComponent, deps: [{ token: DateFormatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: StatusHeaderComponent, isStandalone: true, selector: "pho-status-header", inputs: { iconUrl: "iconUrl", icon: "icon", showQuickActions: "showQuickActions", data: "data" }, ngImport: i0, template: "<div class=\"p-4\">\n  <div class=\"flex gap-1 align-items-center\">\n    <p class=\"font-600\">{{ data.name }}</p>\n    <span class=\"text-xs text-gray-500\">{{ data.title }}</span>\n  </div>\n  <div\n    class=\"overflow-hidden\"\n    style=\"transition: max-height 0.2s ease-in-out\"\n    [style.maxHeight]=\"isCollapsed ? '0' : '500px'\"\n  >\n    <div class=\"flex gap-8 justify-content-between\">\n      <div class=\"flex\">\n        <div\n          [ngStyle]=\"{ background: 'var(--pho-accent)', overflow: 'true' }\"\n          class=\"type-icon flex justify-content-center align-items-center mr-3\"\n          [style.borderRadius]=\"'2px'\"\n          [style.height]=\"'80px'\"\n          [style.width]=\"'80px'\"\n        >\n          <p-image\n            [src]=\"icon.url\"\n            [height]=\"icon.size.height\"\n            [width]=\"icon.size.width\"\n          ></p-image>\n        </div>\n        <div class=\"flex flex-column\">\n          <div class=\"text-xs\">\n            <span class=\"text-gray-400\">Entity:</span>\n            {{ data.entity }}\n          </div>\n          <div *ngIf=\"data?.type\" class=\"text-xs\">\n            <span class=\"text-gray-400\">Type:</span>\n            {{ data.type }}\n          </div>\n          <div class=\"text-xs\">\n            <span class=\"text-gray-400\">Created By : </span>\n            {{ data.createdBy }}\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-column gap-2\">\n        <span class=\"text-sm\">Approach:</span>\n        <span style=\"color: var(--pho-accent)\">{{ data.approach }}</span>\n      </div>\n      <div class=\"flex flex-column gap-2\">\n        <span class=\"text-sm\">Scope:</span>\n        <span style=\"color: var(--pho-accent)\">{{ data.scope }}</span>\n      </div>\n\n      <div class=\"flex flex-column gap-2\">\n        <p class=\"p-0 m-0 cursor-pointer\">\n          Changed on\n          <i (click)=\"details.toggle($event)\" class=\"pi pi-info-circle\"></i>\n        </p>\n        <span class=\"text-sm\">\n          <i class=\"pi pi-calendar\"></i>\n          {{ data.createdAt | date : dateFormat + \" | HH:mm\" }}\n        </span>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex justify-content-center\">\n    <div class=\"toggler\">\n      <button (click)=\"isCollapsed = !isCollapsed\">\n        <i\n          class=\"pi\"\n          [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n\n<p-popover #details>\n  <div class=\"flex flex-column gap-4\">\n    <div>\n      <div class=\"flex flex-column gap-3\">\n        @for (log of data.logs; track $index) {\n        <span class=\"text-xs\">{{ log.description }}</span>\n        <div class=\"flex gap-1\">\n          <p-avatar\n            [label]=\"log.user.charAt(0)\"\n            styleClass=\"mr-2\"\n            size=\"normal\"\n          />\n          <div class=\"flex flex-column\">\n            <span class=\"text-xs font-bold\">{{ log.user }}</span>\n            <span class=\"text-xs\">\n              {{ log.date | date : dateFormat + \" | HH:mm\" }}</span\n            >\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n</p-popover>\n", styles: [".toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { 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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+    onQuickPickClickEmiter = new EventEmitter();
+    onToggleClickEmmiter = new EventEmitter();
+    onCloseEvent = new EventEmitter();
+    name = '';
+    title = '';
+    enableQuickPick = false;
+    actions = [];
+    panelState = false;
+    customClose = true;
+    validSeverities = ['success', 'info', 'warn', 'danger', 'help', 'primary', 'secondary', 'contrast'];
+    onToggleClick(direction) {
+        this.onToggleClickEmmiter.emit(direction);
+    }
+    toggleSidePanel() {
+        this.onQuickPickClickEmiter.emit();
+    }
+    closePanel() {
+        this.onCloseEvent.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: StatusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { name: "name", title: "title", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<p-panel [style]=\"{ width: '100%' }\" [toggleable]=\"false\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex justify-between items-center w-full flex-wrap gap-2\">\n      @if (enableQuickPick) {\n        <phoenix-quick-pick\n          (onBack)=\"onToggleClick('back')\"\n          (onQuickPick)=\"toggleSidePanel()\"\n          (onForward)=\"onToggleClick('forward')\"\n        ></phoenix-quick-pick>\n      }\n      <div class=\"flex items-baseline gap-2\">\n        <span class=\"text-xl font-semibold\">{{ name }}</span>\n        <span class=\"text-base text-gray-500\">{{ title }}</span>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"icons\">\n    <div class=\"flex\">\n      <ng-container *ngFor=\"let button of actions; index as i\">\n        <ng-container [ngSwitch]=\"button.type\">\n          <ng-container *ngSwitchCase=\"'split'\">\n            <button\n              [attr.data-cy]=\"'split-button-' + i\"\n              #btn\n              type=\"button\"\n              pButton\n              class=\"p-button-text\"\n              [disabled]=\"button?.disabled\"\n              (click)=\"menu.toggle($event)\"\n            >\n              <span class=\"button-icon mr-2\">\n                <i class=\"{{ button.icon }}\"></i>\n              </span>\n              <span class=\"button-label\">\n                {{ button.label | translate }}\n              </span>\n              <span class=\"button-icon ml-2\">\n                <i class=\"pi pi-chevron-down\" style=\"font-size: 0.9rem\"></i>\n              </span>\n            </button>\n            <p-tieredMenu\n              #menu\n              [model]=\"button.splitItems!\"\n              [popup]=\"true\"\n            ></p-tieredMenu>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'regular'\">\n            <p-button\n              [attr.data-cy]=\"'regular-button-' + i\"\n              id=\"{{ button.id }}\"\n              data-cy=\"s-ab-button-cy\"\n              class=\"mr-2\"\n              [text]=\"true\"\n              icon=\"{{ button.icon }}\"\n              label=\"{{ button.label! | translate }}\"\n              [pTooltip]=\"!button.tooltip ? '' : (button.tooltip | translate)\"\n              tooltipPosition=\"\"\n              [disabled]=\"button.disabled\"\n              [severity]=\"validSeverities.includes(button.severity!) ? button.severity : undefined\"\n            ></p-button>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</p-panel>", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i2$2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.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: SplitButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: i7.TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: StatusHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pho-status-header', imports: [
+            args: [{ selector: 'phoenix-status-header', standalone: true, imports: [
+                        CommonModule,
                         PanelModule,
                         ButtonModule,
-                        CommonModule,
-                        Image,
-                        PopoverModule,
-                        Avatar,
-                    ], template: "<div class=\"p-4\">\n  <div class=\"flex gap-1 align-items-center\">\n    <p class=\"font-600\">{{ data.name }}</p>\n    <span class=\"text-xs text-gray-500\">{{ data.title }}</span>\n  </div>\n  <div\n    class=\"overflow-hidden\"\n    style=\"transition: max-height 0.2s ease-in-out\"\n    [style.maxHeight]=\"isCollapsed ? '0' : '500px'\"\n  >\n    <div class=\"flex gap-8 justify-content-between\">\n      <div class=\"flex\">\n        <div\n          [ngStyle]=\"{ background: 'var(--pho-accent)', overflow: 'true' }\"\n          class=\"type-icon flex justify-content-center align-items-center mr-3\"\n          [style.borderRadius]=\"'2px'\"\n          [style.height]=\"'80px'\"\n          [style.width]=\"'80px'\"\n        >\n          <p-image\n            [src]=\"icon.url\"\n            [height]=\"icon.size.height\"\n            [width]=\"icon.size.width\"\n          ></p-image>\n        </div>\n        <div class=\"flex flex-column\">\n          <div class=\"text-xs\">\n            <span class=\"text-gray-400\">Entity:</span>\n            {{ data.entity }}\n          </div>\n          <div *ngIf=\"data?.type\" class=\"text-xs\">\n            <span class=\"text-gray-400\">Type:</span>\n            {{ data.type }}\n          </div>\n          <div class=\"text-xs\">\n            <span class=\"text-gray-400\">Created By : </span>\n            {{ data.createdBy }}\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-column gap-2\">\n        <span class=\"text-sm\">Approach:</span>\n        <span style=\"color: var(--pho-accent)\">{{ data.approach }}</span>\n      </div>\n      <div class=\"flex flex-column gap-2\">\n        <span class=\"text-sm\">Scope:</span>\n        <span style=\"color: var(--pho-accent)\">{{ data.scope }}</span>\n      </div>\n\n      <div class=\"flex flex-column gap-2\">\n        <p class=\"p-0 m-0 cursor-pointer\">\n          Changed on\n          <i (click)=\"details.toggle($event)\" class=\"pi pi-info-circle\"></i>\n        </p>\n        <span class=\"text-sm\">\n          <i class=\"pi pi-calendar\"></i>\n          {{ data.createdAt | date : dateFormat + \" | HH:mm\" }}\n        </span>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex justify-content-center\">\n    <div class=\"toggler\">\n      <button (click)=\"isCollapsed = !isCollapsed\">\n        <i\n          class=\"pi\"\n          [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n\n<p-popover #details>\n  <div class=\"flex flex-column gap-4\">\n    <div>\n      <div class=\"flex flex-column gap-3\">\n        @for (log of data.logs; track $index) {\n        <span class=\"text-xs\">{{ log.description }}</span>\n        <div class=\"flex gap-1\">\n          <p-avatar\n            [label]=\"log.user.charAt(0)\"\n            styleClass=\"mr-2\"\n            size=\"normal\"\n          />\n          <div class=\"flex flex-column\">\n            <span class=\"text-xs font-bold\">{{ log.user }}</span>\n            <span class=\"text-xs\">\n              {{ log.date | date : dateFormat + \" | HH:mm\" }}</span\n            >\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n</p-popover>\n", styles: [".toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}\n"] }]
-        }], ctorParameters: () => [{ type: DateFormatService }], propDecorators: { iconUrl: [{
+                        SplitButtonModule,
+                        TranslateModule,
+                        TooltipModule,
+                        TieredMenuModule,
+                        QuickPickComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel [style]=\"{ width: '100%' }\" [toggleable]=\"false\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex justify-between items-center w-full flex-wrap gap-2\">\n      @if (enableQuickPick) {\n        <phoenix-quick-pick\n          (onBack)=\"onToggleClick('back')\"\n          (onQuickPick)=\"toggleSidePanel()\"\n          (onForward)=\"onToggleClick('forward')\"\n        ></phoenix-quick-pick>\n      }\n      <div class=\"flex items-baseline gap-2\">\n        <span class=\"text-xl font-semibold\">{{ name }}</span>\n        <span class=\"text-base text-gray-500\">{{ title }}</span>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"icons\">\n    <div class=\"flex\">\n      <ng-container *ngFor=\"let button of actions; index as i\">\n        <ng-container [ngSwitch]=\"button.type\">\n          <ng-container *ngSwitchCase=\"'split'\">\n            <button\n              [attr.data-cy]=\"'split-button-' + i\"\n              #btn\n              type=\"button\"\n              pButton\n              class=\"p-button-text\"\n              [disabled]=\"button?.disabled\"\n              (click)=\"menu.toggle($event)\"\n            >\n              <span class=\"button-icon mr-2\">\n                <i class=\"{{ button.icon }}\"></i>\n              </span>\n              <span class=\"button-label\">\n                {{ button.label | translate }}\n              </span>\n              <span class=\"button-icon ml-2\">\n                <i class=\"pi pi-chevron-down\" style=\"font-size: 0.9rem\"></i>\n              </span>\n            </button>\n            <p-tieredMenu\n              #menu\n              [model]=\"button.splitItems!\"\n              [popup]=\"true\"\n            ></p-tieredMenu>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'regular'\">\n            <p-button\n              [attr.data-cy]=\"'regular-button-' + i\"\n              id=\"{{ button.id }}\"\n              data-cy=\"s-ab-button-cy\"\n              class=\"mr-2\"\n              [text]=\"true\"\n              icon=\"{{ button.icon }}\"\n              label=\"{{ button.label! | translate }}\"\n              [pTooltip]=\"!button.tooltip ? '' : (button.tooltip | translate)\"\n              tooltipPosition=\"\"\n              [disabled]=\"button.disabled\"\n              [severity]=\"validSeverities.includes(button.severity!) ? button.severity : undefined\"\n            ></p-button>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-template>\n</p-panel>", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
+        }], propDecorators: { onQuickPickClickEmiter: [{
+                type: Output
+            }], onToggleClickEmmiter: [{
+                type: Output
+            }], onCloseEvent: [{
+                type: Output
+            }], name: [{
                 type: Input
-            }], icon: [{
+            }], title: [{
                 type: Input
-            }], showQuickActions: [{
+            }], enableQuickPick: [{
                 type: Input
-            }], data: [{
+            }], actions: [{
+                type: Input
+            }], panelState: [{
+                type: Input
+            }], customClose: [{
                 type: Input
             }] } });
 
@@ -821,7 +824,7 @@ class PhoenixDataTableTabsComponent {
         this.actionClick.emit({ action: opt });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PhoenixDataTableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, 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 }}\n    </span>\n    <span>\n      <p-badge\n        *ngIf=\"item.badgeCount\"\n        [value]=\"item.badgeCount\"\n        severity=\"danger\"\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$2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, 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 }}\n    </span>\n    <span>\n      <p-badge\n        *ngIf=\"item.badgeCount\"\n        [value]=\"item.badgeCount\"\n        severity=\"danger\"\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PhoenixDataTableTabsComponent, decorators: [{
             type: Component,
@@ -1261,7 +1264,7 @@ 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.3", ngImport: i0, type: PhoenixDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: PhoenixDataTableComponent, isStandalone: true, selector: "phoenix-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: true, transformFunction: null }, exportdData: { classPropertyName: "exportdData", publicName: "exportdData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: false, isRequired: true, transformFunction: resolveActions }, exportData: { classPropertyName: "exportData", publicName: "exportData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { actionClickEmmiter: "actionClickEmmiter", lazyLoadDataEmmiter: "lazyLoadDataEmmiter", onRowClickEmmiter: "onRowClickEmmiter", onRowCheckboxRadioClickEmmiter: "onRowCheckboxRadioClickEmmiter", onExportClickEmmiter: "onExportClickEmmiter", onSaveColumnsClickEmmiter: "onSaveColumnsClickEmmiter", onHeaderCheckboxToggleEmmiter: "onHeaderCheckboxToggleEmmiter" }, viewQueries: [{ propertyName: "overviewBtn", first: true, predicate: ["btn"], descendants: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- total records lazy???? -->\n<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <p-table\n    #dt\n    [selectionMode]=\"tableConfiguration.selectionMode\"\n    [dataKey]=\"tableConfiguration.key ? tableConfiguration.key : 'id'\"\n    [value]=\"data\"\n    [rowSelectable]=\"isRowSelectable\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [resizableColumns]=\"true\"\n    [size]=\"'small'\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [selectionPageOnly]=\"true\"\n    [(selection)]=\"selectedData\"\n    [scrollable]=\"true\" \n    scrollHeight=\"400px\" \n    [virtualScroll]=\"true\" \n    [virtualScrollItemSize]=\"46\"\n    [rowHover]=\"true\"\n    (onHeaderCheckboxToggle)=\"onHeaderCheckboxToggle($event)\"\n  >\n    <!-- ********** CAPTION CAPTION CAPTION *********************** -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex justify-content-between\">\n        <global-table-actions>\n          <ng-container\n            *ngFor=\"\n              let action of tableConfiguration.globalActions;\n              let i = index\n            \"\n          >\n            <phoenix-phoenix-data-table-action\n              #btn\n              [actionConfig]=\"action\"\n              (actionClick)=\"actionClick($event)\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n          <phoenix-data-table-tabs\n            [attr.data-cy]=\"\n              'table-select-button-' + tableConfiguration.tabs?.key\n            \"\n            [actions]=\"tableConfiguration.tabs\"\n            (actionClick)=\"actionClick($event)\"\n          ></phoenix-data-table-tabs>\n        </global-table-actions>\n        <div class=\"flex align-items-center\">\n          <p-button\n            icon=\"pi pi-filter\"\n            [rounded]=\"true\"\n            label=\"Filter\"\n            [text]=\"true\"\n            severity=\"primary\"\n            class=\"mr-2\"\n            (onClick)=\"filters.toggle($event)\"\n          />\n\n          <p-button\n            icon=\"pi pi-sliders-v\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            severity=\"primary\"\n            label=\"Columns\"\n            class=\"mr-2\"\n            [attr.data-cy]=\"'table-togg-button'\"\n            (onClick)=\"cols.toggle($event)\"\n          />\n\n          <span\n            *ngIf=\"tableConfiguration.globalFilter\"\n            class=\"p-input-icon-left ml-auto\"\n          >\n            <p-iconfield>\n              <p-inputicon styleClass=\"pi pi-search\" />\n              <input\n                [attr.data-cy]=\"'table-global-search'\"\n                type=\"text\"\n                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\n                pInputText\n                placeholder=\"{{\n                  'SEARCH_PLACEHOLDERS.SEARCH_KEYWORD' | translate\n                }}\"\n              />\n            </p-iconfield>\n          </span>\n          <p-button\n            icon=\"pi pi-ellipsis-v\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            severity=\"primary\"\n            (onClick)=\"export.toggle($event)\"\n            class=\"ml-2\"\n          />\n\n          <bulk-table-actions>\n            <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n              <phoenix-phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [selectedData]=\"selectedData\"\n                (actionClick)=\"actionClick(action, selectedData)\"\n              ></phoenix-phoenix-data-table-action\n            ></ng-container>\n          </bulk-table-actions>\n        </div>\n      </div>\n    </ng-template>\n    <!-- ********** HEADER HEADER HEADER *********************** -->\n    <ng-template pTemplate=\"header\">\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n        <!-- rest of columns -->\n        <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n          <th\n            [attr.data-cy]=\"'table-col-' + i\"\n            pResizableColumn\n            class=\"custom-th font-bold\"\n            [pSortableColumn]=\"\n              col.filter === 'multiselect' && tableConfiguration.lazy != true\n                ? col.field + '.name'\n                : col.field\n            \"\n          >\n            <!-- set sort icon visible by default -->\n            <p-sortIcon\n              [attr.data-cy]=\"'table-sort-' + col.field\"\n              *ngIf=\"col.sortable === undefined ? true : col.sortable\"\n              field=\"{{ col.field }}\"\n            ></p-sortIcon>\n            {{ col.header | translate }}\n          </th>\n        </ng-container>\n\n        <!-- create empty th placeholders for actions -->\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n    <!-- ********** BODY BODY BODY *********************** -->\n    <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n      <ng-template #shimmer>\n        <tr [attr.data-cy]=\"'table-row-' + rowIndex\">\n          <td *ngFor=\"let col of columns; let even = even\">\n            <p-skeleton\n              [ngStyle]=\"{\n                width: '60%',\n              }\"\n            ></p-skeleton>\n          </td>\n\n          <td>\n            <p-skeleton\n              [ngStyle]=\"{\n                width: '20%',\n              }\"\n            ></p-skeleton>\n          </td>\n        </tr>\n      </ng-template>\n      <tr\n        *ngIf=\"!loading(); else shimmer\"\n        (click)=\"onRowClick($event, rowData)\"\n        [pSelectableRow]=\"rowData\"\n        [attr.data-cy]=\"'table-row-' + rowIndex\"\n      >\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"'table-checkbox'\"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"'table-radio-button'\"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n          <td class=\"cursor-pointer\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cellValueTemp;\n                context: { value: { rowData, col } }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n\n        <!-- p-0 on td because buttons already have marign. so it makes row bigger -->\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              *ngIf=\"\n                action.notauthorized ||\n                (rowData[action.type] != undefined &&\n                  rowData[action.type] != null)\n              \"\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"actionClick($event, rowData)\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"paginatorright\" let-state>\n      <!-- Total Records: {{ state.totalRecords }} -->\n      <!-- <i class=\"pi pi-cog\" style=\"font-size: 1.2rem; color: grey\"></i> -->\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n</div>\n\n<!-- Celll value template -->\n\n<ng-template #cellValueTemp let-val=\"value\">\n  <ng-container [ngSwitch]=\"val.col.columnType\">\n    <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <!-- checking if there is a object instead of string. objects goes into non-lazy tables ->  val.rowData[val.col.field].name || val.rowData[val.col.field] -->\n        <p-tag\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.TAG | lowercase)\"\n          [style]=\"{ 'background-color': val.rowData[val.col.field + 'Color'] }\"\n          [value]=\"\n            val.rowData[val.col.field].name || val.rowData[val.col.field]\n          \"\n        ></p-tag>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <p-avatar\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.PERSON | lowercase)\"\n          [label]=\"val.rowData[val.col.field].name.charAt(0)\"\n          styleClass=\"mr-1\"\n          [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n          shape=\"circle\"\n        ></p-avatar>\n        {{ val.rowData[val.col.field].name }}\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.DATE\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        {{ val.rowData[val.col.field] | date : dateFormat }}\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_COMPLEX\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <ul\n          *ngFor=\"let item of val.rowData[val.col.field]\"\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.LIST | lowercase)\"\n        >\n          <li>{{ item.name }}</li>\n        </ul>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.RICH_TEXT\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <div\n          [pTooltip]=\"val.rowData[val.col.field] | removeHTMLTags\"\n          style=\"width: 200px\"\n          [attr.data-cy]=\"\n            'table-cell-' + (columnTypeEnum.RICH_TEXT | lowercase)\n          \"\n        >\n          {{ val.rowData[val.col.field] | removeHTMLTags }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <div\n          [pTooltip]=\"val.rowData[val.col.field]\"\n          style=\"width: 200px\"\n          [attr.data-cy]=\"\n            'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n          \"\n        >\n          {{ val.rowData[val.col.field] }}\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n      <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n        <i\n          [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\"\n          class=\"pi\"\n          [ngClass]=\"{\n            'text-green-500 pi-check-circle': val.rowData[val.col.field],\n          }\"\n        ></i>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"columnTypeEnum.CUSTOM\">\n      <span\n        [innerHTML]=\"val.col.customRenderer(val.rowData)\"\n        [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.CUSTOM | lowercase)\"\n      ></span>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault\n      ><td [attr.data-cy]=\"'table-cell-text'\">\n        {{ val.rowData[val.col.field] | cellValue : val.col }}\n      </td>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #emptyCell> -- </ng-template>\n\n<!-- Overlays for Columns/Filters/Exports -->\n\n<p-popover #cols>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">Columns</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          [label]=\"'ACTION.SAVE' | translate\"\n          class=\"mr-2\"\n          (click)=\"saveColumns()\"\n          [attr.data-cy]=\"'table-save-col-button'\"\n        />\n        <p-button\n          icon=\"pi pi-undo\"\n          [text]=\"true\"\n          [label]=\"'ACTION.RESET_FILTERS' | translate\"\n          class=\"mr-2\"\n          (click)=\"resetColumns()\"\n          [attr.data-cy]=\"'table-reset-col-button'\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n\n<p-popover #filters>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">Filter</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          [label]=\"'ACTION.SAVE' | translate\"\n          class=\"mr-2\"\n          [attr.data-cy]=\"'table-save-col-button'\"\n        />\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          [label]=\"'Clear'\"\n          class=\"mr-2\"\n          (click)=\"resetFilters()\"\n          [attr.data-cy]=\"'table-reset-col-button'\"\n        />\n      </div>\n    </div>\n\n    <div>\n      <form [formGroup]=\"filtersForm\">\n        @for(control of tableConfiguration.filterConfiguration; track\n        control.key ){ @switch(control.type) { @case ('checkbox') {\n        <div class=\"mb-4\">\n          <p-checkbox\n            binary=\"true\"\n            type=\"checkbox\"\n            [formControlName]=\"control.key\"\n          />\n          <label class=\"ml-2\">{{ control.label }}</label>\n        </div>\n\n        } @case ('dropdown') {\n        <div class=\"mb-4\">\n          <label class=\"mb-2 block\">{{ control.label }}</label>\n          <p-select\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n        </div>\n\n        } } }\n      </form>\n    </div>\n  </div>\n</p-popover>\n\n<p-popover #export>\n  <div class=\"flex flex-column gap-1\">\n    <p-button\n      pRipple\n      text=\"true\"\n      icon=\"pi pi-file-pdf\"\n      (click)=\"onExportClickEmmiter.emit(exportType.PDF)\"\n      class=\"mr-2\"\n      [label]=\"'ACTION.EXPORT_TO_PDF' | translate\"\n    ></p-button>\n\n    <p-button\n      pRipple\n      text=\"true\"\n      icon=\"pi pi-file-excel\"\n      (click)=\"onExportClickEmmiter.emit(exportType.EXCEL)\"\n      class=\"mr-2\"\n      [label]=\"'ACTION.EXPORT_TO_XLS' | translate\"\n    ></p-button>\n  </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", 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$3.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: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: 
                 ///Custom components
                 PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: 
                 // Pipes
@@ -1527,6 +1530,9 @@ class TableComponent {
     // **Lazy Data Loading**
     loadLazyData(event) {
         let { first, rows, multiSortMeta } = event;
+        if (this.allData?.length === 0) {
+            return;
+        }
         if (!rows || rows <= 0) {
             rows = 100;
         }
@@ -1538,9 +1544,6 @@ class TableComponent {
             this.hasLoadedInitialData = true; // Marks initial load as done
             return;
         }
-        if (this.allData.length === 0) {
-            return;
-        }
         this.isLoading.set(true);
         setTimeout(() => {
             let sortedData = [...this.allData];
@@ -1635,7 +1638,7 @@ class TableComponent {
         this.tableDataSignal.set(filteredData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n\n @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n } @else {\n  <div style=\"min-height: 40px;padding:8px\" class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action [actionConfig]=\"action\" [selectedData]=\"selectedItems\"\n        (actionClick)=\"actionClick.emit({ action, selectedItems })\"></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n    <button\n      class=\"p-button p-button-text p-button-plain\"\n      (click)=\"selectedItems.set([])\"\n      aria-label=\"Clear Selection\"\n    >\n      <i class=\"pi pi-times\"></i>\n    </button>\n    </div>\n  \n  </div> \n}\n\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n        <th\n          class=\"custom-th 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        <!-- create empty th placeholders for actions -->\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n      <tr>\n        <td>\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\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, rowData })\"\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; let even = even\">\n          <tr>\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        </td>\n      </tr>\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  class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\"> Total records: {{tableDataSignal().length}}  </div>\n</div>\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}::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: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n\n @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n } @else {\n  <div style=\"min-height: 40px;padding:8px\" class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action [actionConfig]=\"action\" [selectedData]=\"selectedItems\"\n        (actionClick)=\"actionClick.emit({ action, selectedItems })\"></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n    <button\n      class=\"p-button p-button-text p-button-plain\"\n      (click)=\"selectedItems.set([])\"\n      aria-label=\"Clear Selection\"\n    >\n      <i class=\"pi pi-times\"></i>\n    </button>\n    </div>\n  \n  </div> \n}\n\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n        <th\n          class=\"custom-th 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        <!-- create empty th placeholders for actions -->\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n      <tr>\n        <td>\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\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, rowData })\"\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; let even = even\">\n          <tr>\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        </td>\n      </tr>\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  class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\"> Total records: {{tableDataSignal().length}}  </div>\n</div>\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}::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: "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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "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"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1650,7 +1653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         TooltipModule,
                         TableCellPipe,
                         SkeletonModule
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n\n @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n } @else {\n  <div style=\"min-height: 40px;padding:8px\" class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action [actionConfig]=\"action\" [selectedData]=\"selectedItems\"\n        (actionClick)=\"actionClick.emit({ action, selectedItems })\"></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n    <button\n      class=\"p-button p-button-text p-button-plain\"\n      (click)=\"selectedItems.set([])\"\n      aria-label=\"Clear Selection\"\n    >\n      <i class=\"pi pi-times\"></i>\n    </button>\n    </div>\n  \n  </div> \n}\n\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n        <th\n          class=\"custom-th 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        <!-- create empty th placeholders for actions -->\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n      <tr>\n        <td>\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\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, rowData })\"\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; let even = even\">\n          <tr>\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        </td>\n      </tr>\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  class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\"> Total records: {{tableDataSignal().length}}  </div>\n</div>\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n\n @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n } @else {\n  <div style=\"min-height: 40px;padding:8px\" class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action [actionConfig]=\"action\" [selectedData]=\"selectedItems\"\n        (actionClick)=\"actionClick.emit({ action, selectedItems })\"></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n    <button\n      class=\"p-button p-button-text p-button-plain\"\n      (click)=\"selectedItems.set([])\"\n      aria-label=\"Clear Selection\"\n    >\n      <i class=\"pi pi-times\"></i>\n    </button>\n    </div>\n  \n  </div> \n}\n\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n        <th\n          class=\"custom-th 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        <!-- create empty th placeholders for actions -->\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n      <tr>\n        <td>\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\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, rowData })\"\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; let even = even\">\n          <tr>\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        </td>\n      </tr>\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  class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\"> Total records: {{tableDataSignal().length}}  </div>\n</div>\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -3171,7 +3174,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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.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.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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: MetaSelectButtonComponent, decorators: [{
             type: Component,
@@ -3968,7 +3971,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$4.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.3", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
             type: Component,
@@ -4508,7 +4511,7 @@ class ReadOnlyInputComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$4.DomSanitizer }, { token: i3$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n        <!-- <ng-container *ngFor=\"let link of item?.objects\">\n          <phoenix-serach-card\n            [readOnly]=\"true\"\n            [data]=\"link\"\n            [deleteButton]=\"false\"\n            (selectEvent)=\"selectEvent($event)\"\n          />\n        </ng-container> -->\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n\n      <!-- <div class=\"person-wrap\">\n        <div class=\"person-avatar\">\n          {{ value?.name?.toUpperCase().charAt(0) }}\n        </div>\n        <div class=\"font-semibold text-500\">\n          <p>\n            {{ value?.name }}\n          </p>\n          <p>\n            {{ value?.function }}\n          </p>\n        </div>\n      </div> -->\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n\n<!-- <ng-container *ngFor=\"let link of item?.objects\">\n              <phoenix-serach-card\n                [data]=\"link\"\n                (removeButtonEvent)=\"\n                  onLinkRemove(link.name, item.relationLabelKey)\n                \"\n                [deleteButton]=\"true\"\n              />\n            </ng-container> -->\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$9.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // SerachCardComponent,
-                CheckboxModule }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$7.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$4.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$4.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: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+                CheckboxModule }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$7.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$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: i4$4.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: i3.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.3", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
             type: Component,
@@ -4712,6 +4715,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 type: Input
             }] } });
 
+class QuickPickSidePanelComponent {
+    title = 'Default Title'; // Panel title
+    data = []; // Data for the table
+    columns = []; // Table columns
+    loading = false; // Indicates if the table is loading
+    tableConfiguration = {}; // Table configuration
+    panelState = false; // Indicates if the panel is open
+    modal = false; // Modal behavior
+    widthClass = 'w-7'; // Panel width
+    isFullScreen = false; // Indicates if the panel is in fullscreen mode
+    onRowClick = new EventEmitter(); // Emits when a row in the table is clicked
+    lazyLoadData = new EventEmitter(); // Emits when data needs to be loaded lazily
+    onClose = new EventEmitter(); // Emits when the panel is closed
+    handlePanelFullScreen = new EventEmitter(); // Emits when toggling fullscreen mode
+    onCloseEvent = new EventEmitter(); // Emits when the panel close event is triggered
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", loading: "loading", tableConfiguration: "tableConfiguration", panelState: "panelState", modal: "modal", widthClass: "widthClass", isFullScreen: "isFullScreen" }, outputs: { onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", onClose: "onClose", handlePanelFullScreen: "handlePanelFullScreen", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "\n<p-drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n>\n  <ng-template pTemplate=\"header\">\n    <!-- <phoenix-sidepanel-header\n      [expand]=\"false\"\n      [isFullScreen]=\"false\"\n      [panelTitle]=\"title | translate\"\n    ></phoenix-sidepanel-header> -->\n    <div class=\"flex align-items-center justify-content-between\" style=\"width: 100%\">\n      <p-button type=\"button\" (click)=\"handlePanelFullScreen.emit()\" [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\" rounded=\"true\" outlined=\"true\" styleClass=\"h-8 w-8\"></p-button>\n    \n      <span class=\"font-bold text-xl flex-grow-1\">\n        {{ title }}\n      </span>\n    \n      <button (click)=\"onCloseEvent.emit()\" pButton pRipple type=\"button\" icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"></button>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"content\">\n    <div>\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$1.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: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "tableConfiguration"], outputs: ["actionClick", "rowSelection"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.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.3", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-quick-pick-sidepanel', imports: [
+                        CommonModule,
+                        DrawerModule,
+                        TableComponent,
+                        TranslateModule,
+                        ButtonModule
+                    ], template: "\n<p-drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n>\n  <ng-template pTemplate=\"header\">\n    <!-- <phoenix-sidepanel-header\n      [expand]=\"false\"\n      [isFullScreen]=\"false\"\n      [panelTitle]=\"title | translate\"\n    ></phoenix-sidepanel-header> -->\n    <div class=\"flex align-items-center justify-content-between\" style=\"width: 100%\">\n      <p-button type=\"button\" (click)=\"handlePanelFullScreen.emit()\" [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\" rounded=\"true\" outlined=\"true\" styleClass=\"h-8 w-8\"></p-button>\n    \n      <span class=\"font-bold text-xl flex-grow-1\">\n        {{ title }}\n      </span>\n    \n      <button (click)=\"onCloseEvent.emit()\" pButton pRipple type=\"button\" icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"></button>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"content\">\n    <div>\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], tableConfiguration: [{
+                type: Input
+            }], panelState: [{
+                type: Input
+            }], modal: [{
+                type: Input
+            }], widthClass: [{
+                type: Input
+            }], isFullScreen: [{
+                type: Input
+            }], onRowClick: [{
+                type: Output
+            }], lazyLoadData: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], handlePanelFullScreen: [{
+                type: Output
+            }], onCloseEvent: [{
+                type: Output
+            }] } });
+
+var SimpleButtonType;
+(function (SimpleButtonType) {
+    SimpleButtonType["REGULAR"] = "regular";
+    SimpleButtonType["SPLIT"] = "split";
+})(SimpleButtonType || (SimpleButtonType = {}));
+
 /*
  * Public API Surface of phoenix
  */
@@ -4720,5 +4786,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GroupsFormComponent, MetaFormButtonsComponent, MetaFormComponent, MetaFormService, PhoenixDataTableComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, StatusHeaderComponent, TableComponent, TopbarComponent, UserComponent, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
+export { GroupsFormComponent, MetaFormButtonsComponent, MetaFormComponent, MetaFormService, PhoenixDataTableComponent, QuickPickComponent, QuickPickSidePanelComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, SimpleButtonType, StatusHeaderComponent, TableComponent, TopbarComponent, UserComponent, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
 //# sourceMappingURL=fuentis-phoenix-ui.mjs.map