@fuentis/phoenix-ui 0.0.9-alpha.449 → 0.0.9-alpha.451
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.
|
@@ -1166,6 +1166,7 @@ class TopbarComponent {
|
|
|
1166
1166
|
hidelogo = false;
|
|
1167
1167
|
topbarModulesMenu = [];
|
|
1168
1168
|
darkModeSelector;
|
|
1169
|
+
urlConfig;
|
|
1169
1170
|
footerConfig = {
|
|
1170
1171
|
companyName: 'fuentis',
|
|
1171
1172
|
companyUrl: 'https://fuentis.com/',
|
|
@@ -1177,7 +1178,6 @@ class TopbarComponent {
|
|
|
1177
1178
|
onUserPopoverAction = new EventEmitter();
|
|
1178
1179
|
closeCallback(event) { }
|
|
1179
1180
|
searchConfig = input();
|
|
1180
|
-
extIncident;
|
|
1181
1181
|
openSidebarPanel() {
|
|
1182
1182
|
this.isSidebarVisible = true;
|
|
1183
1183
|
}
|
|
@@ -1189,7 +1189,6 @@ class TopbarComponent {
|
|
|
1189
1189
|
}
|
|
1190
1190
|
ngOnInit() {
|
|
1191
1191
|
const items = this.topbarModulesMenu[0]?.items || [];
|
|
1192
|
-
this.extIncident = items[items.length - 1];
|
|
1193
1192
|
}
|
|
1194
1193
|
onDarkModeSelectEmit() {
|
|
1195
1194
|
this.onDarkModeSelect.emit();
|
|
@@ -1205,6 +1204,10 @@ class TopbarComponent {
|
|
|
1205
1204
|
copyToClipboard($event, linkUrl) {
|
|
1206
1205
|
$event.stopPropagation();
|
|
1207
1206
|
$event.preventDefault();
|
|
1207
|
+
if (!linkUrl) {
|
|
1208
|
+
console.warn('No linkUrl for extIncidentConfig');
|
|
1209
|
+
return;
|
|
1210
|
+
}
|
|
1208
1211
|
this.isSidebarVisible = false;
|
|
1209
1212
|
navigator.clipboard.writeText(linkUrl);
|
|
1210
1213
|
this.messageService.add({
|
|
@@ -1220,7 +1223,7 @@ class TopbarComponent {
|
|
|
1220
1223
|
: `url('assets/default-user.png')`;
|
|
1221
1224
|
}
|
|
1222
1225
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1223
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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\n [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n [tabs]=\"searchConfig()\"\n ></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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@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 border-200 border-1\"\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$4.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "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"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1226
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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 }, urlConfig: { classPropertyName: "urlConfig", publicName: "urlConfig", 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\n [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n [tabs]=\"searchConfig()\"\n ></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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@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': urlConfig?.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]=\"urlConfig?.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, urlConfig?.url)\"\n [disabled]=\"urlConfig?.disabled || !urlConfig?.url\"\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 border-200 border-1\"\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$4.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "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"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1224
1227
|
}
|
|
1225
1228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
1226
1229
|
type: Component,
|
|
@@ -1240,7 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
1240
1243
|
PopoverModule,
|
|
1241
1244
|
ToastModule,
|
|
1242
1245
|
TooltipModule,
|
|
1243
|
-
], 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\n [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n [tabs]=\"searchConfig()\"\n ></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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@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 border-200 border-1\"\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" }]
|
|
1246
|
+
], 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\n [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n [tabs]=\"searchConfig()\"\n ></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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 [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\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@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': urlConfig?.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]=\"urlConfig?.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, urlConfig?.url)\"\n [disabled]=\"urlConfig?.disabled || !urlConfig?.url\"\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 border-200 border-1\"\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" }]
|
|
1244
1247
|
}], propDecorators: { homeUrl: [{
|
|
1245
1248
|
type: Input
|
|
1246
1249
|
}], user: [{
|
|
@@ -1253,6 +1256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
1253
1256
|
type: Input
|
|
1254
1257
|
}], darkModeSelector: [{
|
|
1255
1258
|
type: Input
|
|
1259
|
+
}], urlConfig: [{
|
|
1260
|
+
type: Input
|
|
1256
1261
|
}], footerConfig: [{
|
|
1257
1262
|
type: Input
|
|
1258
1263
|
}], onDarkModeSelect: [{
|
|
@@ -1426,7 +1431,7 @@ class ShellComponent {
|
|
|
1426
1431
|
this.onDarkModeSelect.emit(this.darkModeSelector);
|
|
1427
1432
|
}
|
|
1428
1433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector", theme: "theme" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction", sliderClick: "sliderClick", themeChange: "themeChange" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n [ngStyle]=\"{\n 'grid-template-rows': gridTemplateRows,\n 'grid-template-columns': gridTemplateColumns\n }\"\n>\n <!-- Top header (uvek preko 2 kolone) -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [hidelogo]=\"config.hidelogo\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n ></pho-topbar>\n\n <!-- Context object - full width -->\n <div class=\"pho-col-span-2\" *ngIf=\"config.headerContext && config.headerContext.showHeader\">\n <div\n class=\"flex align-items-center justify-content-between border-bottom-1 border-300 pb-2 pt-2\"\n >\n <phoenix-contex-object\n *ngIf=\"config.headerContext\"\n [config]=\"config.headerContext\"\n ></phoenix-contex-object>\n </div>\n </div>\n\n <!-- Sidebar (uvek prisutan) -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n (sliderClick)=\"sliderClick.emit($event)\"\n ></pho-sidebar>\n </div>\n\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem"], outputs: ["toggleSidebar", "sliderClick"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "hidelogo", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ContexObjectComponent, selector: "phoenix-contex-object", inputs: ["config"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector", theme: "theme" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction", sliderClick: "sliderClick", themeChange: "themeChange" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n [ngStyle]=\"{\n 'grid-template-rows': gridTemplateRows,\n 'grid-template-columns': gridTemplateColumns\n }\"\n>\n <!-- Top header (uvek preko 2 kolone) -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [hidelogo]=\"config.hidelogo\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [urlConfig]=\"config.urlConfig\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n ></pho-topbar>\n\n <!-- Context object - full width -->\n <div class=\"pho-col-span-2\" *ngIf=\"config.headerContext && config.headerContext.showHeader\">\n <div\n class=\"flex align-items-center justify-content-between border-bottom-1 border-300 pb-2 pt-2\"\n >\n <phoenix-contex-object\n *ngIf=\"config.headerContext\"\n [config]=\"config.headerContext\"\n ></phoenix-contex-object>\n </div>\n </div>\n\n <!-- Sidebar (uvek prisutan) -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n (sliderClick)=\"sliderClick.emit($event)\"\n ></pho-sidebar>\n </div>\n\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem"], outputs: ["toggleSidebar", "sliderClick"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "hidelogo", "topbarModulesMenu", "darkModeSelector", "urlConfig", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ContexObjectComponent, selector: "phoenix-contex-object", inputs: ["config"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1430
1435
|
}
|
|
1431
1436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ShellComponent, decorators: [{
|
|
1432
1437
|
type: Component,
|
|
@@ -1435,7 +1440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
1435
1440
|
TopbarComponent,
|
|
1436
1441
|
CommonModule,
|
|
1437
1442
|
ContexObjectComponent,
|
|
1438
|
-
], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n [ngStyle]=\"{\n 'grid-template-rows': gridTemplateRows,\n 'grid-template-columns': gridTemplateColumns\n }\"\n>\n <!-- Top header (uvek preko 2 kolone) -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [hidelogo]=\"config.hidelogo\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n ></pho-topbar>\n\n <!-- Context object - full width -->\n <div class=\"pho-col-span-2\" *ngIf=\"config.headerContext && config.headerContext.showHeader\">\n <div\n class=\"flex align-items-center justify-content-between border-bottom-1 border-300 pb-2 pt-2\"\n >\n <phoenix-contex-object\n *ngIf=\"config.headerContext\"\n [config]=\"config.headerContext\"\n ></phoenix-contex-object>\n </div>\n </div>\n\n <!-- Sidebar (uvek prisutan) -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n (sliderClick)=\"sliderClick.emit($event)\"\n ></pho-sidebar>\n </div>\n\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
1443
|
+
], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n [ngStyle]=\"{\n 'grid-template-rows': gridTemplateRows,\n 'grid-template-columns': gridTemplateColumns\n }\"\n>\n <!-- Top header (uvek preko 2 kolone) -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [hidelogo]=\"config.hidelogo\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [urlConfig]=\"config.urlConfig\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n ></pho-topbar>\n\n <!-- Context object - full width -->\n <div class=\"pho-col-span-2\" *ngIf=\"config.headerContext && config.headerContext.showHeader\">\n <div\n class=\"flex align-items-center justify-content-between border-bottom-1 border-300 pb-2 pt-2\"\n >\n <phoenix-contex-object\n *ngIf=\"config.headerContext\"\n [config]=\"config.headerContext\"\n ></phoenix-contex-object>\n </div>\n </div>\n\n <!-- Sidebar (uvek prisutan) -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n (sliderClick)=\"sliderClick.emit($event)\"\n ></pho-sidebar>\n </div>\n\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
1439
1444
|
}], propDecorators: { config: [{
|
|
1440
1445
|
type: Input
|
|
1441
1446
|
}], darkModeSelector: [{
|
|
@@ -5913,7 +5918,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
5913
5918
|
class MetaTextAreaComponent extends BaseMetaField {
|
|
5914
5919
|
lang = inject(TranslateService).currentLang;
|
|
5915
5920
|
stripHtmlTags(input) {
|
|
5916
|
-
|
|
5921
|
+
if (!input)
|
|
5922
|
+
return '';
|
|
5923
|
+
// Replace <br> tags (and variations) with a temporary placeholder
|
|
5924
|
+
const placeholder = '___BR_TAG_PLACEHOLDER___';
|
|
5925
|
+
const brPattern = /<br\s*\/?>/gi;
|
|
5926
|
+
const textWithPlaceholders = input.replace(brPattern, placeholder);
|
|
5927
|
+
// Strip all remaining HTML tags
|
|
5928
|
+
const textWithoutHtml = textWithPlaceholders.replace(/<\/?[^>]+(>|$)/g, '');
|
|
5929
|
+
// Replace placeholder back with <br> tags
|
|
5930
|
+
return textWithoutHtml.replace(new RegExp(placeholder, 'g'), '<br>');
|
|
5917
5931
|
}
|
|
5918
5932
|
writeValue(value) {
|
|
5919
5933
|
// Clean HTML before assigning
|