@fuentis/phoenix-ui 0.0.9-alpha.331 → 0.0.9-alpha.332

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1270,21 +1270,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class ShellComponent {
     config;
+    /**
+     * TODO: mark `darkModeSelector` as deprecated
+     * Reason: This wouldn't allow 'system' mode
+     *          - It is a better api generally speaking compared to what we have now
+     * //@deprecated
+     */
     darkModeSelector = { mode: 'dark' };
+    /**
+     * TODO: mark `onDarkModeSelect` as deprecated
+     * Reason: the function is too specific and should be handled by the themeChange event
+     * //@deprecated
+     */
     onDarkModeSelect = new EventEmitter();
     onIsSlimSelect = new EventEmitter();
     onUserAction = new EventEmitter();
     sliderClick = new EventEmitter();
+    // Theme
+    theme = { mode: 'system' };
+    themeChange = new EventEmitter();
     isSlim;
     toggleSidebar(isSlim) {
         this.isSlim = isSlim;
         this.onIsSlimSelect.emit(this.isSlim);
     }
+    setTheme(mode) {
+        this.theme = { mode };
+        this.themeChange.emit(this.theme);
+    }
     selectDarkMode() {
         this.onDarkModeSelect.emit(this.darkModeSelector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction", sliderClick: "sliderClick" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-rows': '3.5rem 1fr',\n    'grid-template-columns': 'auto 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    [shortModuleName]=\"config.shortModuleName\"\n    [searchConfig]=\"config.searchConfig\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\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  <!-- 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", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction", sliderClick: "sliderClick", themeChange: "themeChange" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-rows': '3.5rem 1fr',\n    'grid-template-columns': 'auto 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    [shortModuleName]=\"config.shortModuleName\"\n    [searchConfig]=\"config.searchConfig\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"darkModeSelector\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n    (onUserPopoverAction)=\"onUserAction.emit($event)\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\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  <!-- 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", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ShellComponent, decorators: [{
             type: Component,
@@ -1301,6 +1319,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], sliderClick: [{
                 type: Output
+            }], themeChange: [{
+                type: Output
             }] } });
 
 var tableActionType;