@fuentis/phoenix-ui 0.0.9-alpha.129 → 0.0.9-alpha.130
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.
|
@@ -401,7 +401,7 @@ class TopbarComponent {
|
|
|
401
401
|
user;
|
|
402
402
|
shortModuleName = 'FLEX';
|
|
403
403
|
topbarModulesMenu = [];
|
|
404
|
-
darkModeSelector
|
|
404
|
+
darkModeSelector;
|
|
405
405
|
footerConfig = {
|
|
406
406
|
companyName: 'fuentis',
|
|
407
407
|
companyUrl: 'https://fuentis.com/',
|
|
@@ -431,7 +431,7 @@ class TopbarComponent {
|
|
|
431
431
|
: `url('assets/default-user.png')`;
|
|
432
432
|
}
|
|
433
433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: "homeUrl", user: "user", shortModuleName: "shortModuleName", topbarModulesMenu: "topbarModulesMenu", darkModeSelector: "darkModeSelector", footerConfig: "footerConfig" }, outputs: { onDarkModeSelect: "onDarkModeSelect" }, ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-
|
|
434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: "homeUrl", user: "user", shortModuleName: "shortModuleName", topbarModulesMenu: "topbarModulesMenu", darkModeSelector: "darkModeSelector", footerConfig: "footerConfig" }, outputs: { onDarkModeSelect: "onDarkModeSelect" }, ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user [user]=\"user\" />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ module.fullName || \"\" }}\n </p>\n </div>\n </a>\n </div>\n </ng-container>\n\n <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{ module.label }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between module groups (except after the last one) -->\n <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n </ng-container>\n\n <!-- Footer links -->\n <div class=\"mt-auto p-2\">\n <p-divider class=\"mt-2 mb-2\"></p-divider>\n <div class=\"flex justify-content-between pb-3\">\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle p-2\"></i>\n {{ footerConfig.guideLabel }}\n </span>\n </a>\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.companyUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName }}\n </span>\n </a>\n </div>\n\n <div class=\"text-500 text-sm pl-2\">\n {{ footerConfig.copyrightText }}\n </div>\n </div>\n </div>\n</p-drawer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["expandable", "placeholder", "message"], outputs: ["searchQueryChange"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["logout", "editSettings"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i3$3.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
435
435
|
}
|
|
436
436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
437
437
|
type: Component,
|
|
@@ -444,7 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
444
444
|
DrawerModule,
|
|
445
445
|
DividerModule,
|
|
446
446
|
ButtonModule,
|
|
447
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-
|
|
447
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user [user]=\"user\" />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ module.fullName || \"\" }}\n </p>\n </div>\n </a>\n </div>\n </ng-container>\n\n <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{ module.label }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between module groups (except after the last one) -->\n <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n </ng-container>\n\n <!-- Footer links -->\n <div class=\"mt-auto p-2\">\n <p-divider class=\"mt-2 mb-2\"></p-divider>\n <div class=\"flex justify-content-between pb-3\">\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle p-2\"></i>\n {{ footerConfig.guideLabel }}\n </span>\n </a>\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.companyUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName }}\n </span>\n </a>\n </div>\n\n <div class=\"text-500 text-sm pl-2\">\n {{ footerConfig.copyrightText }}\n </div>\n </div>\n </div>\n</p-drawer>\n" }]
|
|
448
448
|
}], propDecorators: { homeUrl: [{
|
|
449
449
|
type: Input
|
|
450
450
|
}], user: [{
|
|
@@ -545,29 +545,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
545
545
|
class ShellComponent {
|
|
546
546
|
config;
|
|
547
547
|
isSidebarOpen;
|
|
548
|
+
darkModeSelector = { mode: 'dark' };
|
|
548
549
|
onDarkModeSelect = new EventEmitter();
|
|
549
|
-
dmConfig = { mode: 'light' };
|
|
550
550
|
toggleSidebar() {
|
|
551
551
|
this.isSidebarOpen = !this.isSidebarOpen;
|
|
552
552
|
}
|
|
553
553
|
selectDarkMode() {
|
|
554
|
-
|
|
555
|
-
element?.classList.toggle('pho-dark');
|
|
556
|
-
this.dmConfig.mode === 'light'
|
|
557
|
-
? (this.dmConfig.mode = 'dark')
|
|
558
|
-
: (this.dmConfig.mode = 'light');
|
|
559
|
-
this.onDarkModeSelect.emit(this.dmConfig);
|
|
554
|
+
this.onDarkModeSelect.emit(this.darkModeSelector);
|
|
560
555
|
}
|
|
561
556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen" }, outputs: { onDarkModeSelect: "onDarkModeSelect" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"
|
|
557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"overflow-auto\">\n <ng-content> </ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig"], outputs: ["onDarkModeSelect"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
563
558
|
}
|
|
564
559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ShellComponent, decorators: [{
|
|
565
560
|
type: Component,
|
|
566
|
-
args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"
|
|
561
|
+
args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"overflow-auto\">\n <ng-content> </ng-content>\n </div>\n</div>\n" }]
|
|
567
562
|
}], propDecorators: { config: [{
|
|
568
563
|
type: Input
|
|
569
564
|
}], isSidebarOpen: [{
|
|
570
565
|
type: Input
|
|
566
|
+
}], darkModeSelector: [{
|
|
567
|
+
type: Input
|
|
571
568
|
}], onDarkModeSelect: [{
|
|
572
569
|
type: Output
|
|
573
570
|
}] } });
|