@fuentis/phoenix-ui 0.0.9-alpha.411 → 0.0.9-alpha.413

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/fesm2022/fuentis-phoenix-ui.mjs +20 -39
  2. package/fesm2022/fuentis-phoenix-ui.mjs.map +1 -1
  3. package/lib/components/status-bar/models/status-attribute.model.d.ts +2 -1
  4. package/lib/components/status-bar/models/status-bar-configuration.model.d.ts +3 -2
  5. package/lib/components/status-bar/status-attribute-display.component.d.ts +2 -2
  6. package/package.json +1 -1
package/fesm2022/fuentis-phoenix-ui.mjs CHANGED
@@ -855,7 +855,7 @@ class SearchBarComponent {
855
855
  this.reloadSubscription$.unsubscribe();
856
856
  }
857
857
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchBarComponent, deps: [{ token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
858
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if(inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n >\n </pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels> </p-tabs\n >}\n </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
858
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if(inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event.url)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n >\n </pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels> </p-tabs\n >}\n </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
859
859
  trigger('openClose', [
860
860
  state('open', style({
861
861
  width: '50vw',
@@ -893,7 +893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
893
893
  })),
894
894
  transition('* <=> *', [animate('0.1s ease-in-out')]),
895
895
  ]),
896
- ], template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if(inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n >\n </pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels> </p-tabs\n >}\n </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"] }]
896
+ ], template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if(inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event.url)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n >\n </pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels> </p-tabs\n >}\n </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"] }]
897
897
  }], ctorParameters: () => [{ type: i2$1.TranslateService }], propDecorators: { nes: [{
898
898
  type: ViewChild,
899
899
  args: ['op']
@@ -934,7 +934,7 @@ class UserComponent {
934
934
  @if(user){
935
935
  <div class="p-2">
936
936
  <div class="flex align-items-top">
937
- @if(user?.bindImageUrl){
937
+ @if(user.bindImageUrl){
938
938
  <div
939
939
  [style.background-image]="user.bindImageUrl"
940
940
  class="profile-image"
@@ -951,11 +951,9 @@ class UserComponent {
951
951
  }
952
952
 
953
953
  <div class="text-primary cursor-pointer ml-2">
954
- <div class="text-xl">
955
- {{ user?.firstname }} {{ user?.lastname }}
956
- </div>
957
- <div class="font-bold text-500 text-m">{{ user?.username }}</div>
958
- <div class="text-m">{{ user?.email }}</div>
954
+ <div class="text-xl">{{ user.firstname }} {{ user.lastname }}</div>
955
+ <div class="font-bold text-500 text-m">{{ user.username }}</div>
956
+ <div class="text-m">{{ user.email }}</div>
959
957
  </div>
960
958
  </div>
961
959
  </div>
@@ -1029,7 +1027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1029
1027
  @if(user){
1030
1028
  <div class="p-2">
1031
1029
  <div class="flex align-items-top">
1032
- @if(user?.bindImageUrl){
1030
+ @if(user.bindImageUrl){
1033
1031
  <div
1034
1032
  [style.background-image]="user.bindImageUrl"
1035
1033
  class="profile-image"
@@ -1046,11 +1044,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1046
1044
  }
1047
1045
 
1048
1046
  <div class="text-primary cursor-pointer ml-2">
1049
- <div class="text-xl">
1050
- {{ user?.firstname }} {{ user?.lastname }}
1051
- </div>
1052
- <div class="font-bold text-500 text-m">{{ user?.username }}</div>
1053
- <div class="text-m">{{ user?.email }}</div>
1047
+ <div class="text-xl">{{ user.firstname }} {{ user.lastname }}</div>
1048
+ <div class="font-bold text-500 text-m">{{ user.username }}</div>
1049
+ <div class="text-m">{{ user.email }}</div>
1054
1050
  </div>
1055
1051
  </div>
1056
1052
  </div>
@@ -1163,7 +1159,7 @@ class TopbarComponent {
1163
1159
  : `url('assets/default-user.png')`;
1164
1160
  }
1165
1161
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1166
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: { classPropertyName: "homeUrl", publicName: "homeUrl", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, shortModuleName: { classPropertyName: "shortModuleName", publicName: "shortModuleName", isSignal: false, isRequired: false, transformFunction: null }, hidelogo: { classPropertyName: "hidelogo", publicName: "hidelogo", isSignal: false, isRequired: false, transformFunction: null }, topbarModulesMenu: { classPropertyName: "topbarModulesMenu", publicName: "topbarModulesMenu", isSignal: false, isRequired: false, transformFunction: null }, darkModeSelector: { classPropertyName: "darkModeSelector", publicName: "darkModeSelector", isSignal: false, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: false, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, providers: [MessageService], ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n @if (!hidelogo) {\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n }\n <!-- <p-tag\n [style]=\"{\n marginLeft: '5px',\n marginBottom: '8px',\n padding: '2px 6px',\n fontSize: '9px',\n border: '1px solid var(--text-color)',\n background: 'transparent',\n color: 'var(--text-color)'\n }\"\n severity=\"info\"\n [value]=\"shortModuleName\"\n /> -->\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar [tabs]=\"searchConfig()\"></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n data-cy=\"theme-switch-button\"\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"op.toggle($event)\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-question-circle\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-25rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <ng-template #header>\n <div class=\"flex align-items-center justify-content-between w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-xl\">\n {{ \"ACTION.HELP_CENTER\" | translate }}\n </span>\n </div>\n\n <p-button\n (onClick)=\"isSidebarVisible = false\"\n icon=\"pi pi-times\"\n [rounded]=\"true\"\n [text]=\"true\"\n />\n </div>\n </ng-template>\n <div class=\"p-1\">\n <div class=\"flex flex-wrap gap-4\">\n <!-- first -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <p-button\n (onClick)=\"goToTicketCenter()\"\n [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n variant=\"outlined\"\n size=\"small\"\n />\n </div>\n </div>\n\n <!-- second -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CALL_US\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n </div>\n </div>\n\n <!-- third -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <a href=\"mailto:support&#64;fuentis.com\">\n {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n </a>\n </div>\n </div>\n\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n </div>\n </div>\n\n <div class=\"w-full flex align-items-center gap-2\">\n <a\n class=\"no-underline\"\n [href]=\"extIncident?.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <p-button\n [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n variant=\"outlined\"\n size=\"small\"\n icon=\"pi pi-copy\"\n (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n [disabled]=\"extIncident?.disabled\"\n />\n </a>\n </div>\n </div>\n </div>\n <!-- External Incident Report card -->\n\n <div class=\"mt-5 p-3\">\n <h4 class=\"\">\n {{ \"ACTION.BROWSE\" | translate }} <br />\n <a\n class=\"\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n <span style=\"text-decoration: none\">\n <i\n style=\"font-size: 15px\"\n class=\"pi pi-graduation-cap p-2 no-underline\"\n ></i>\n </span>\n\n <!-- <i\n style=\"font-size: 11px\"\n class=\"pi pi-external-link p-2 no-underline\"\n ></i> -->\n </span>\n </a>\n </h4>\n </div>\n </div>\n <ng-template #footer>\n <div class=\"text-xs text-center text-600\">\n {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n </div>\n </ng-template>\n</p-drawer>\n\n<p-popover #op>\n <div class=\"w-22rem\">\n <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n <div class=\"grid\">\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{\n module.label | translate\n }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</p-popover>\n<p-toast></p-toast>\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: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$3.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }], encapsulation: i0.ViewEncapsulation.None });
1162
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: { classPropertyName: "homeUrl", publicName: "homeUrl", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, shortModuleName: { classPropertyName: "shortModuleName", publicName: "shortModuleName", isSignal: false, isRequired: false, transformFunction: null }, hidelogo: { classPropertyName: "hidelogo", publicName: "hidelogo", isSignal: false, isRequired: false, transformFunction: null }, topbarModulesMenu: { classPropertyName: "topbarModulesMenu", publicName: "topbarModulesMenu", isSignal: false, isRequired: false, transformFunction: null }, darkModeSelector: { classPropertyName: "darkModeSelector", publicName: "darkModeSelector", isSignal: false, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: false, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, providers: [MessageService], ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n @if (!hidelogo) {\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n }\n <!-- <p-tag\n [style]=\"{\n marginLeft: '5px',\n marginBottom: '8px',\n padding: '2px 6px',\n fontSize: '9px',\n border: '1px solid var(--text-color)',\n background: 'transparent',\n color: 'var(--text-color)'\n }\"\n severity=\"info\"\n [value]=\"shortModuleName\"\n /> -->\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar [tabs]=\"searchConfig()\"></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n data-cy=\"theme-switch-button\"\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"op.toggle($event)\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-question-circle\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-25rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <ng-template #header>\n <div class=\"flex align-items-center justify-content-between w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-xl\">\n {{ \"ACTION.HELP_CENTER\" | translate }}\n </span>\n </div>\n\n <p-button\n (onClick)=\"isSidebarVisible = false\"\n icon=\"pi pi-times\"\n [rounded]=\"true\"\n [text]=\"true\"\n />\n </div>\n </ng-template>\n <div class=\"p-1\">\n <div class=\"flex flex-wrap gap-4\">\n <!-- first -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <p-button\n (onClick)=\"goToTicketCenter()\"\n [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n variant=\"outlined\"\n size=\"small\"\n />\n </div>\n </div>\n\n <!-- second -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CALL_US\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n </div>\n </div>\n\n <!-- third -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <a href=\"mailto:support&#64;fuentis.com\">\n {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n </a>\n </div>\n </div>\n\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n </div>\n </div>\n\n <div class=\"w-full flex align-items-center gap-2\">\n <a\n class=\"no-underline\"\n [href]=\"extIncident?.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <p-button\n [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n variant=\"outlined\"\n size=\"small\"\n icon=\"pi pi-copy\"\n (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n [disabled]=\"extIncident?.disabled\"\n />\n </a>\n </div>\n </div>\n </div>\n <!-- External Incident Report card -->\n\n <div class=\"mt-5 p-3\">\n <h4 class=\"\">\n {{ \"ACTION.BROWSE\" | translate }} <br />\n <a\n class=\"\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n <span style=\"text-decoration: none\">\n <i\n style=\"font-size: 15px\"\n class=\"pi pi-graduation-cap p-2 no-underline\"\n ></i>\n </span>\n\n <!-- <i\n style=\"font-size: 11px\"\n class=\"pi pi-external-link p-2 no-underline\"\n ></i> -->\n </span>\n </a>\n </h4>\n </div>\n </div>\n <ng-template #footer>\n <div class=\"text-xs text-center text-600\">\n {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n </div>\n </ng-template>\n</p-drawer>\n\n<p-popover #op>\n <div class=\"w-22rem\">\n <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n <div class=\"grid\">\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{\n module.label | translate\n }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</p-popover>\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<!-- <p-popover #op>\n <div class=\"w-25rem\">\n <ng-container *ngFor=\"let item of topbarModulesMenu\">\n <div\n class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n >\n <a\n class=\"text-primary flex align-items-center\"\n [href]=\"item.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n >\n <div\n class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center surface-200\"\n style=\"margin-right: 10px\"\n >\n <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n </div>\n <div class=\"\">\n <div class=\"font-semibold\">\n {{ item.title | translate }}\n </div>\n <div class=\"text-sm max-w-17rem text-600\">\n {{ item.description | translate }}\n </div>\n </div>\n </a>\n </div>\n </ng-container>\n </div>\n</p-popover> -->\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: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$3.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }], encapsulation: i0.ViewEncapsulation.None });
1167
1163
  }
1168
1164
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TopbarComponent, decorators: [{
1169
1165
  type: Component,
@@ -1182,7 +1178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1182
1178
  TagModule,
1183
1179
  PopoverModule,
1184
1180
  ToastModule,
1185
- ], encapsulation: ViewEncapsulation.None, providers: [MessageService], template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n @if (!hidelogo) {\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n }\n <!-- <p-tag\n [style]=\"{\n marginLeft: '5px',\n marginBottom: '8px',\n padding: '2px 6px',\n fontSize: '9px',\n border: '1px solid var(--text-color)',\n background: 'transparent',\n color: 'var(--text-color)'\n }\"\n severity=\"info\"\n [value]=\"shortModuleName\"\n /> -->\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar [tabs]=\"searchConfig()\"></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n data-cy=\"theme-switch-button\"\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"op.toggle($event)\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-question-circle\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-25rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <ng-template #header>\n <div class=\"flex align-items-center justify-content-between w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-xl\">\n {{ \"ACTION.HELP_CENTER\" | translate }}\n </span>\n </div>\n\n <p-button\n (onClick)=\"isSidebarVisible = false\"\n icon=\"pi pi-times\"\n [rounded]=\"true\"\n [text]=\"true\"\n />\n </div>\n </ng-template>\n <div class=\"p-1\">\n <div class=\"flex flex-wrap gap-4\">\n <!-- first -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <p-button\n (onClick)=\"goToTicketCenter()\"\n [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n variant=\"outlined\"\n size=\"small\"\n />\n </div>\n </div>\n\n <!-- second -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CALL_US\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n </div>\n </div>\n\n <!-- third -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <a href=\"mailto:support&#64;fuentis.com\">\n {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n </a>\n </div>\n </div>\n\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n </div>\n </div>\n\n <div class=\"w-full flex align-items-center gap-2\">\n <a\n class=\"no-underline\"\n [href]=\"extIncident?.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <p-button\n [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n variant=\"outlined\"\n size=\"small\"\n icon=\"pi pi-copy\"\n (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n [disabled]=\"extIncident?.disabled\"\n />\n </a>\n </div>\n </div>\n </div>\n <!-- External Incident Report card -->\n\n <div class=\"mt-5 p-3\">\n <h4 class=\"\">\n {{ \"ACTION.BROWSE\" | translate }} <br />\n <a\n class=\"\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n <span style=\"text-decoration: none\">\n <i\n style=\"font-size: 15px\"\n class=\"pi pi-graduation-cap p-2 no-underline\"\n ></i>\n </span>\n\n <!-- <i\n style=\"font-size: 11px\"\n class=\"pi pi-external-link p-2 no-underline\"\n ></i> -->\n </span>\n </a>\n </h4>\n </div>\n </div>\n <ng-template #footer>\n <div class=\"text-xs text-center text-600\">\n {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n </div>\n </ng-template>\n</p-drawer>\n\n<p-popover #op>\n <div class=\"w-22rem\">\n <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n <div class=\"grid\">\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{\n module.label | translate\n }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</p-popover>\n<p-toast></p-toast>\n" }]
1181
+ ], encapsulation: ViewEncapsulation.None, providers: [MessageService], template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n @if (!hidelogo) {\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n }\n <!-- <p-tag\n [style]=\"{\n marginLeft: '5px',\n marginBottom: '8px',\n padding: '2px 6px',\n fontSize: '9px',\n border: '1px solid var(--text-color)',\n background: 'transparent',\n color: 'var(--text-color)'\n }\"\n severity=\"info\"\n [value]=\"shortModuleName\"\n /> -->\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar [tabs]=\"searchConfig()\"></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n data-cy=\"theme-switch-button\"\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"op.toggle($event)\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-question-circle\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-25rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <ng-template #header>\n <div class=\"flex align-items-center justify-content-between w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-xl\">\n {{ \"ACTION.HELP_CENTER\" | translate }}\n </span>\n </div>\n\n <p-button\n (onClick)=\"isSidebarVisible = false\"\n icon=\"pi pi-times\"\n [rounded]=\"true\"\n [text]=\"true\"\n />\n </div>\n </ng-template>\n <div class=\"p-1\">\n <div class=\"flex flex-wrap gap-4\">\n <!-- first -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <p-button\n (onClick)=\"goToTicketCenter()\"\n [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n variant=\"outlined\"\n size=\"small\"\n />\n </div>\n </div>\n\n <!-- second -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CALL_US\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n </div>\n </div>\n\n <!-- third -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <a href=\"mailto:support&#64;fuentis.com\">\n {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n </a>\n </div>\n </div>\n\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n </div>\n </div>\n\n <div class=\"w-full flex align-items-center gap-2\">\n <a\n class=\"no-underline\"\n [href]=\"extIncident?.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <p-button\n [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n variant=\"outlined\"\n size=\"small\"\n icon=\"pi pi-copy\"\n (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n [disabled]=\"extIncident?.disabled\"\n />\n </a>\n </div>\n </div>\n </div>\n <!-- External Incident Report card -->\n\n <div class=\"mt-5 p-3\">\n <h4 class=\"\">\n {{ \"ACTION.BROWSE\" | translate }} <br />\n <a\n class=\"\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n <span style=\"text-decoration: none\">\n <i\n style=\"font-size: 15px\"\n class=\"pi pi-graduation-cap p-2 no-underline\"\n ></i>\n </span>\n\n <!-- <i\n style=\"font-size: 11px\"\n class=\"pi pi-external-link p-2 no-underline\"\n ></i> -->\n </span>\n </a>\n </h4>\n </div>\n </div>\n <ng-template #footer>\n <div class=\"text-xs text-center text-600\">\n {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n </div>\n </ng-template>\n</p-drawer>\n\n<p-popover #op>\n <div class=\"w-22rem\">\n <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n <div class=\"grid\">\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{\n module.label | translate\n }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</p-popover>\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<!-- <p-popover #op>\n <div class=\"w-25rem\">\n <ng-container *ngFor=\"let item of topbarModulesMenu\">\n <div\n class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n >\n <a\n class=\"text-primary flex align-items-center\"\n [href]=\"item.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n >\n <div\n class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center surface-200\"\n style=\"margin-right: 10px\"\n >\n <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n </div>\n <div class=\"\">\n <div class=\"font-semibold\">\n {{ item.title | translate }}\n </div>\n <div class=\"text-sm max-w-17rem text-600\">\n {{ item.description | translate }}\n </div>\n </div>\n </a>\n </div>\n </ng-container>\n </div>\n</p-popover> -->\n" }]
1186
1182
  }], propDecorators: { homeUrl: [{
1187
1183
  type: Input
1188
1184
  }], user: [{
@@ -3307,7 +3303,7 @@ class TableComponent {
3307
3303
  return path.split('.').reduce((o, k) => (o != null ? o[k] : null), obj);
3308
3304
  }
3309
3305
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3310
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span\n >{{ selectedItems().length }}\n {{\n selectedItems()?.length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}</span\n >}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"30\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\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]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n 'fontSize':'12px',\n \n 'padding': '3px 8px',\n 'width':'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n 'color': rowData[col.field + 'Color'], \n }\"\n >\n {{\n rowData[col.field]?.name || rowData[col.field] | translate\n }}\n </div>\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n @for(item of rowData[col.field]; track $index){\n <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'font-size': '0.9rem!important'\n }\"\n styleClass=\"mr-1\"\n [value]=\"item\"\n severity=\"info\"\n ></p-tag> -->\n }\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n\n color: rowData[col.field].color\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container\n *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n >\n <i\n [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <!-- If this column is flagged and we have a code, render flag + the usual cell HTML -->\n <ng-container *ngIf=\"col.flag && getNested(rowData, col.flagCodeField) as cc; else normalTextCell\">\n <div\n [attr.data-cy]=\"'table-row-' + columnTypeEnum.TEXT + '-row-index-' + rowIndex + '-col-index-' + i\"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + (cc || '').toString().toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n </ng-container>\n\n <!-- Normal (unflagged) rendering: unchanged -->\n <ng-template #normalTextCell>\n <div\n [attr.data-cy]=\"'table-row-' + columnTypeEnum.TEXT + '-row-index-' + rowIndex + '-col-index-' + i\"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-template>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n</div>\n", styles: ["::ng-deep{.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}:host::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.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.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
3306
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span\n >{{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}</span\n >}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"30\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\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]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n 'fontSize':'12px',\n \n 'padding': '3px 8px',\n 'width':'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n 'color': rowData[col.field + 'Color'], \n }\"\n >\n {{\n rowData[col.field]?.name || rowData[col.field] | translate\n }}\n </div>\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n @for(item of rowData[col.field]; track $index){\n <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'font-size': '0.9rem!important'\n }\"\n styleClass=\"mr-1\"\n [value]=\"item\"\n severity=\"info\"\n ></p-tag> -->\n }\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n\n color: rowData[col.field].color\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container\n *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n >\n <i\n [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <!-- If this column is flagged and we have a code, render flag + the usual cell HTML -->\n <ng-container\n *ngIf=\"\n col.flag && getNested(rowData, col.flagCodeField) as cc;\n else normalTextCell\n \"\n >\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + (cc || '').toString().toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n </ng-container>\n\n <!-- Normal (unflagged) rendering: unchanged -->\n <ng-template #normalTextCell>\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-template>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n</div>\n", styles: ["::ng-deep{.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}:host::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.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.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
3311
3307
  }
3312
3308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, decorators: [{
3313
3309
  type: Component,
@@ -3329,7 +3325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3329
3325
  TimePeriodPipe,
3330
3326
  IsBooleanPipe,
3331
3327
  BadgeModule,
3332
- ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span\n >{{ selectedItems().length }}\n {{\n selectedItems()?.length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}</span\n >}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"30\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\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]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n 'fontSize':'12px',\n \n 'padding': '3px 8px',\n 'width':'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n 'color': rowData[col.field + 'Color'], \n }\"\n >\n {{\n rowData[col.field]?.name || rowData[col.field] | translate\n }}\n </div>\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n @for(item of rowData[col.field]; track $index){\n <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'font-size': '0.9rem!important'\n }\"\n styleClass=\"mr-1\"\n [value]=\"item\"\n severity=\"info\"\n ></p-tag> -->\n }\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n\n color: rowData[col.field].color\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container\n *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n >\n <i\n [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <!-- If this column is flagged and we have a code, render flag + the usual cell HTML -->\n <ng-container *ngIf=\"col.flag && getNested(rowData, col.flagCodeField) as cc; else normalTextCell\">\n <div\n [attr.data-cy]=\"'table-row-' + columnTypeEnum.TEXT + '-row-index-' + rowIndex + '-col-index-' + i\"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + (cc || '').toString().toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n </ng-container>\n\n <!-- Normal (unflagged) rendering: unchanged -->\n <ng-template #normalTextCell>\n <div\n [attr.data-cy]=\"'table-row-' + columnTypeEnum.TEXT + '-row-index-' + rowIndex + '-col-index-' + i\"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-template>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n</div>\n", styles: ["::ng-deep{.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}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
3328
+ ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span\n >{{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}</span\n >}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"30\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\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]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n 'fontSize':'12px',\n \n 'padding': '3px 8px',\n 'width':'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n 'color': rowData[col.field + 'Color'], \n }\"\n >\n {{\n rowData[col.field]?.name || rowData[col.field] | translate\n }}\n </div>\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n @for(item of rowData[col.field]; track $index){\n <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'font-size': '0.9rem!important'\n }\"\n styleClass=\"mr-1\"\n [value]=\"item\"\n severity=\"info\"\n ></p-tag> -->\n }\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n\n color: rowData[col.field].color\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container\n *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n >\n <i\n [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <!-- If this column is flagged and we have a code, render flag + the usual cell HTML -->\n <ng-container\n *ngIf=\"\n col.flag && getNested(rowData, col.flagCodeField) as cc;\n else normalTextCell\n \"\n >\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + (cc || '').toString().toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n </ng-container>\n\n <!-- Normal (unflagged) rendering: unchanged -->\n <ng-template #normalTextCell>\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell : col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-template>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n</div>\n", styles: ["::ng-deep{.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}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
3333
3329
  }], propDecorators: { dt: [{
3334
3330
  type: ViewChild,
3335
3331
  args: ['dt']
@@ -3471,7 +3467,8 @@ class WhiteSpaceValidator {
3471
3467
 
3472
3468
  function noDangerousCharsValidator() {
3473
3469
  // Blocks only specific dangerous characters: < > " = $ /
3474
- const dangerousCharsPattern = /[<>"=$/]/;
3470
+ //[<>"=$/]/ This was before but some catalog name or description contains "/"" so when field is desibled we cannot save form
3471
+ const dangerousCharsPattern = /[<>"=$]/;
3475
3472
  return (control) => {
3476
3473
  const value = control.value;
3477
3474
  if (!value)
@@ -7314,21 +7311,6 @@ var StatusTooltipType;
7314
7311
  StatusTooltipType["DATE_PERSON"] = "DATE_PERSON";
7315
7312
  })(StatusTooltipType || (StatusTooltipType = {}));
7316
7313
 
7317
- class FirstLetterPipe {
7318
- transform(value) {
7319
- return value.charAt(0).toUpperCase();
7320
- }
7321
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FirstLetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
7322
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: FirstLetterPipe, isStandalone: true, name: "firstLetter" });
7323
- }
7324
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FirstLetterPipe, decorators: [{
7325
- type: Pipe,
7326
- args: [{
7327
- name: 'firstLetter',
7328
- standalone: true,
7329
- }]
7330
- }] });
7331
-
7332
7314
  class StatusAttributeDisplayComponent {
7333
7315
  attr;
7334
7316
  dateFormat = 'dd.MM.yyyy | HH:mm';
@@ -7359,7 +7341,7 @@ class StatusAttributeDisplayComponent {
7359
7341
  return (attr?.value?.charAt(0) || '-').toUpperCase();
7360
7342
  }
7361
7343
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7362
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i [attr.data-cy]=\"'status-togg-button-item'\" *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\" style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\" (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap\">\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a *ngIf=\"attr.url; else plainText\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\" [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{ attr.value ? (attr.value | date : dateFormat) : \"--\" }}\n </span>\n\n <!-- LINK -->\n <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n {{ attr.value || \"--\" }}\n </a>\n\n <!-- PERSON -->\n <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\" [pTooltip]=\"getPersonTooltip(attr)\">\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr?.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span [pTooltip]=\"attr?.value?.name?.length > 20 ? attr?.value?.name : null\">\n {{ attr?.value?.name || attr?.value?.code || '--' }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list overflow-x-hidden\" style=\"margin-top: 0.25rem\">\n <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \">\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\">\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div *ngIf=\"item.value; else empty\" class=\"text-sm\" style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \">\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div class=\"person-avatar small\" style=\"font-size: 0.875rem; line-height: 1;\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n </phoenix-tag>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
7344
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label\n class=\"font-semibold text-600\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength : 20 }}\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }}\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n >\n </phoenix-tag>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
7363
7345
  }
7364
7346
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
7365
7347
  type: Component,
@@ -7370,9 +7352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
7370
7352
  TagComponent,
7371
7353
  TranslateModule,
7372
7354
  AvatarModule,
7373
- FirstLetterPipe,
7374
- TextLength
7375
- ], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i [attr.data-cy]=\"'status-togg-button-item'\" *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\" style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\" (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap\">\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a *ngIf=\"attr.url; else plainText\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\" [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{ attr.value ? (attr.value | date : dateFormat) : \"--\" }}\n </span>\n\n <!-- LINK -->\n <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n {{ attr.value || \"--\" }}\n </a>\n\n <!-- PERSON -->\n <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\" [pTooltip]=\"getPersonTooltip(attr)\">\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr?.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span [pTooltip]=\"attr?.value?.name?.length > 20 ? attr?.value?.name : null\">\n {{ attr?.value?.name || attr?.value?.code || '--' }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list overflow-x-hidden\" style=\"margin-top: 0.25rem\">\n <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \">\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\">\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div *ngIf=\"item.value; else empty\" class=\"text-sm\" style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \">\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div class=\"person-avatar small\" style=\"font-size: 0.875rem; line-height: 1;\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n </phoenix-tag>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
7355
+ TextLength,
7356
+ ], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label\n class=\"font-semibold text-600\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength : 20 }}\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }}\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n >\n </phoenix-tag>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
7376
7357
  }], propDecorators: { attr: [{
7377
7358
  type: Input
7378
7359
  }], dateFormat: [{
@@ -7408,7 +7389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
7408
7389
  PopoverModule,
7409
7390
  TextLength,
7410
7391
  ButtonModule,
7411
- StatusAttributeDisplayComponent
7392
+ StatusAttributeDisplayComponent,
7412
7393
  ], template: "<!-- status-bar.component.html -->\n<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper flex flex-nowrap overflow-x-auto gap-2\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n @if (statusBarConfig.icon) {\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon || 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\n\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"mr-1 text-600 font-semibold\"\n >{{ attr.label | translate }}:</span\n >\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span\n *ngSwitchDefault\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n <div class=\"w-full flex justify-content-around\">\n <phoenix-status-attribute-display\n class=\"mt-1\"\n *ngFor=\"let attr of statusBarConfig.attributes\"\n [attr]=\"attr\"\n [dateFormat]=\"dateFormat\"\n (listItemClick)=\"onListItemClick.emit($event)\"\n ></phoenix-status-attribute-display>\n </div>\n </div>\n\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <p-button\n [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n size=\"small\"\n variant=\"outlined\"\n (click)=\"isCollapsed = !isCollapsed\"\n />\n </div>\n </div>\n</div>\n\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
7413
7394
  }], propDecorators: { statusBarConfig: [{
7414
7395
  type: Input