@fuentis/phoenix-ui 0.0.9-alpha.485 → 0.0.9-alpha.486
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.
|
@@ -461,7 +461,7 @@ class SidebarComponent {
|
|
|
461
461
|
this.toggleSidebar.emit(this.isSlim);
|
|
462
462
|
}
|
|
463
463
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SidebarComponent, isStandalone: true, selector: "pho-sidebar", inputs: { classname: "classname", mainItems: "mainItems", footerItem: "footerItem" }, outputs: { toggleSidebar: "toggleSidebar", sliderClick: "sliderClick" }, ngImport: i0, template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if(isHovered){ @for (item of itemGroup.items.slice(1); track $index)\n {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n } }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <div\n *ngIf=\"footerItem.length\"\n class=\"absolute bottom-0 left-0 flex flex-column w-full\"\n >\n <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul>\n </div>\n </div>\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <p-button\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"!isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n />\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}@else {\n<div class=\"relative shadow-3 h-full sidebar overflow-hidden relative pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <div class=\"absolute bottom-0 left-0 flex w-full p-1\">\n @if (footerItem) {
|
|
464
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SidebarComponent, isStandalone: true, selector: "pho-sidebar", inputs: { classname: "classname", mainItems: "mainItems", footerItem: "footerItem" }, outputs: { toggleSidebar: "toggleSidebar", sliderClick: "sliderClick" }, ngImport: i0, template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if(isHovered){ @for (item of itemGroup.items.slice(1); track $index)\n {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n } }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <div\n *ngIf=\"footerItem.length\"\n class=\"absolute bottom-0 left-0 flex flex-column w-full\"\n >\n <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul>\n </div>\n </div>\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <p-button\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"!isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n />\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}@else {\n<div class=\"relative shadow-3 h-full sidebar overflow-hidden relative pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <div class=\"absolute bottom-0 left-0 flex justify-content-between align-items-center w-full p-1\">\n \n <!-- LEFT SIDE (footer button or spacer) -->\n @if (footerItem) {\n <div [pTooltip]=\"footerItem?.tooltip | translate\" [tooltipPosition]=\"'top'\" class=\"w-15rem\">\n <a [routerLink]=\"footerItem.path\" pButton icon=\"pi pi-cog\" [text]=\"true\" size=\"large\"\n class=\"m-1 no-underline w-3rem\" style=\"flex: 0 0 auto; min-width: fit-content\"\n [attr.data-cy]=\"'navigation-togg-button'\">\n </a>\n </div>\n } @else {\n <!-- SPACER to keep right button aligned -->\n <div></div>\n }\n \n <!-- RIGHT SIDE (toggle button - ALWAYS right) -->\n <p-button (onClick)=\"onToggleSidebar()\" [text]=\"true\" class=\"m-1\" [attr.data-cy]=\"'navigation-togg-button'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 17 15\" fill=\"none\" class=\"arrow-icon\" [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\" [style.height.px]=\"13\">\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\" />\n </svg>\n </p-button>\n \n </div>\n </div>\n}\n", styles: [":host::ng-deep .p-accordionheader{padding:.5rem 1rem!important}:host::ng-deep .p-accordioncontent-content{padding-bottom:0!important}:host::ng-deep .p-accordionpanel{border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SidebarItemComponent, selector: "pho-sidebar-item", inputs: ["item", "classname"], outputs: ["sliderClick"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i4$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i4$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i4$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i4$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], animations: [
|
|
465
465
|
trigger('hoverState', [
|
|
466
466
|
state('default', style({
|
|
467
467
|
width: '50px',
|
|
@@ -493,7 +493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
493
493
|
})),
|
|
494
494
|
transition('default <=> hovered', animate('200ms ease-in-out')),
|
|
495
495
|
]),
|
|
496
|
-
], template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if(isHovered){ @for (item of itemGroup.items.slice(1); track $index)\n {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n } }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <div\n *ngIf=\"footerItem.length\"\n class=\"absolute bottom-0 left-0 flex flex-column w-full\"\n >\n <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul>\n </div>\n </div>\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <p-button\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"!isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n />\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}@else {\n<div class=\"relative shadow-3 h-full sidebar overflow-hidden relative pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <div class=\"absolute bottom-0 left-0 flex w-full p-1\">\n @if (footerItem) {
|
|
496
|
+
], template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if(isHovered){ @for (item of itemGroup.items.slice(1); track $index)\n {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n } }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <div\n *ngIf=\"footerItem.length\"\n class=\"absolute bottom-0 left-0 flex flex-column w-full\"\n >\n <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul>\n </div>\n </div>\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <p-button\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"!isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n />\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}@else {\n<div class=\"relative shadow-3 h-full sidebar overflow-hidden relative pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{\n itemGroup.module | translate\n }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <div class=\"absolute bottom-0 left-0 flex justify-content-between align-items-center w-full p-1\">\n \n <!-- LEFT SIDE (footer button or spacer) -->\n @if (footerItem) {\n <div [pTooltip]=\"footerItem?.tooltip | translate\" [tooltipPosition]=\"'top'\" class=\"w-15rem\">\n <a [routerLink]=\"footerItem.path\" pButton icon=\"pi pi-cog\" [text]=\"true\" size=\"large\"\n class=\"m-1 no-underline w-3rem\" style=\"flex: 0 0 auto; min-width: fit-content\"\n [attr.data-cy]=\"'navigation-togg-button'\">\n </a>\n </div>\n } @else {\n <!-- SPACER to keep right button aligned -->\n <div></div>\n }\n \n <!-- RIGHT SIDE (toggle button - ALWAYS right) -->\n <p-button (onClick)=\"onToggleSidebar()\" [text]=\"true\" class=\"m-1\" [attr.data-cy]=\"'navigation-togg-button'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 17 15\" fill=\"none\" class=\"arrow-icon\" [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\" [style.height.px]=\"13\">\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\" />\n </svg>\n </p-button>\n \n </div>\n </div>\n}\n", styles: [":host::ng-deep .p-accordionheader{padding:.5rem 1rem!important}:host::ng-deep .p-accordioncontent-content{padding-bottom:0!important}:host::ng-deep .p-accordionpanel{border:none}\n"] }]
|
|
497
497
|
}], propDecorators: { toggleSidebar: [{
|
|
498
498
|
type: Output
|
|
499
499
|
}], sliderClick: [{
|