Merge branch 'master' of https://github.com/primefaces/sakai-ng

package-lock.json

@@ -26,7 +26,7 @@
                 "chart.js": "^3.3.2",
                 "primeflex": "^3.3.1",
                 "primeicons": "6.0.1",
-                "primeng": "17.1.0",
+                "primeng": "17.2.0",
                 "prismjs": "^1.29.0",
                 "quill": "^1.3.7",
                 "rxjs": "~7.8.1",
@@ -10106,9 +10106,9 @@
             "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
         },
         "node_modules/primeng": {
-            "version": "17.1.0",
-            "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.1.0.tgz",
-            "integrity": "sha512-LpilMBPiTXLiaNADLLlhHTinGNzfD4FjQZQ/uEdE6ATQz/JeSzVGjvspFkQjknTrVbQxPfFMc846aILuS0enDg==",
+            "version": "17.2.0",
+            "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.2.0.tgz",
+            "integrity": "sha512-pajexYLeJWE6+pmDy0gHrMiQ/zLq4il54EcRNWC0jTNgJvWhoz/K/7NL9kXf2H4eWexNcrEieLnO9ko5uj3cVg==",
             "dependencies": {
                 "tslib": "^2.3.0"
             },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sakai-ng",
-    "version": "17.2.0",
+    "version": "17.0.0",
     "license": "PrimeNG Commercial",
     "scripts": {
         "ng": "ng",
@@ -29,7 +29,7 @@
         "chart.js": "^3.3.2",
         "primeflex": "^3.3.1",
         "primeicons": "6.0.1",
-        "primeng": "17.1.0",
+        "primeng": "17.2.0",
         "quill": "^1.3.7",
         "rxjs": "~7.8.1",
         "tslib": "^2.5.0",
@@ -49,4 +49,4 @@
         "karma-jasmine-html-reporter": "~2.1.0",
         "typescript": "~5.2.2"
     }
-}
+}

src/app/layout/config/app.config.component.ts

@@ -1,23 +1,24 @@
 import { Component, Input } from '@angular/core';
-import { LayoutService } from "../service/app.layout.service";
-import { MenuService } from "../app.menu.service";
+import { LayoutService } from '../service/app.layout.service';
+import { MenuService } from '../app.menu.service';
 
 @Component({
     selector: 'app-config',
-    templateUrl: './app.config.component.html'
+    templateUrl: './app.config.component.html',
 })
 export class AppConfigComponent {
-
     @Input() minimal: boolean = false;
 
     scales: number[] = [12, 13, 14, 15, 16];
 
-    constructor(public layoutService: LayoutService, public menuService: MenuService) { }
+    constructor(
+        public layoutService: LayoutService,
+        public menuService: MenuService
+    ) {}
 
     get visible(): boolean {
         return this.layoutService.state.configSidebarVisible;
     }
-
     set visible(_val: boolean) {
         this.layoutService.state.configSidebarVisible = _val;
     }
@@ -25,7 +26,6 @@ export class AppConfigComponent {
     get scale(): number {
         return this.layoutService.config().scale;
     }
-
     set scale(_val: number) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -36,7 +36,6 @@ export class AppConfigComponent {
     get menuMode(): string {
         return this.layoutService.config().menuMode;
     }
-
     set menuMode(_val: string) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -47,7 +46,6 @@ export class AppConfigComponent {
     get inputStyle(): string {
         return this.layoutService.config().inputStyle;
     }
-
     set inputStyle(_val: string) {
         this.layoutService.config().inputStyle = _val;
     }
@@ -55,7 +53,6 @@ export class AppConfigComponent {
     get ripple(): boolean {
         return this.layoutService.config().ripple;
     }
-
     set ripple(_val: boolean) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -63,29 +60,40 @@ export class AppConfigComponent {
         }));
     }
 
+    set theme(val: string) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            theme: val,
+        }));
+    }
+    get theme(): string {
+        return this.layoutService.config().theme;
+    }
+
+    set colorScheme(val: string) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            colorScheme: val,
+        }));
+    }
+    get colorScheme(): string {
+        return this.layoutService.config().colorScheme;
+    }
+
     onConfigButtonClick() {
         this.layoutService.showConfigSidebar();
     }
 
     changeTheme(theme: string, colorScheme: string) {
-        this.layoutService.config.update((config) => ({ ...config, theme:theme,colorScheme:colorScheme }));
+        this.theme = theme;
+        this.colorScheme = colorScheme;
     }
 
-
     decrementScale() {
         this.scale--;
-        this.applyScale();
     }
 
     incrementScale() {
         this.scale++;
-        this.applyScale();
-    }
-
-    applyScale() {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            scale: this.scale,
-        }));
     }
 }

src/app/layout/service/app.layout.service.ts

@@ -23,7 +23,6 @@ interface LayoutState {
     providedIn: 'root',
 })
 export class LayoutService {
-
     _config: AppConfig = {
         ripple: false,
         inputStyle: 'outlined',
@@ -41,7 +40,7 @@ export class LayoutService {
         profileSidebarVisible: false,
         configSidebarVisible: false,
         staticMenuMobileActive: false,
-        menuHoverActive: false
+        menuHoverActive: false,
     };
 
     private configUpdate = new Subject<AppConfig>();
@@ -52,6 +51,24 @@ export class LayoutService {
 
     overlayOpen$ = this.overlayOpen.asObservable();
 
+    constructor() {
+        effect(() => {
+            const config = this.config();
+            if (this.updateStyle(config)) {
+                this.changeTheme();
+            }
+            this.changeScale(config.scale);
+            this.onConfigUpdate();
+        });
+    }
+
+    updateStyle(config: AppConfig) {
+        return (
+            config.theme !== this._config.theme ||
+            config.colorScheme !== this._config.colorScheme
+        );
+    }
+
     onMenuToggle() {
         if (this.isOverlay()) {
             this.state.overlayMenuActive = !this.state.overlayMenuActive;
@@ -61,10 +78,11 @@ export class LayoutService {
         }
 
         if (this.isDesktop()) {
-            this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
-        }
-        else {
-            this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
+            this.state.staticMenuDesktopInactive =
+                !this.state.staticMenuDesktopInactive;
+        } else {
+            this.state.staticMenuMobileActive =
+                !this.state.staticMenuMobileActive;
 
             if (this.state.staticMenuMobileActive) {
                 this.overlayOpen.next(null);
@@ -100,20 +118,9 @@ export class LayoutService {
         this.configUpdate.next(this.config());
     }
 
-    constructor() {
-        effect(() => {
-            const config = this.config();
-            this.changeTheme();
-            this.changeScale(config.scale);
-            this.onConfigUpdate();
-        });
-    }
-
     changeTheme() {
         const config = this.config();
-        const themeLink = <HTMLLinkElement>(
-            document.getElementById('theme-css')
-        );
+        const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
         const themeLinkHref = themeLink.getAttribute('href')!;
         const newHref = themeLinkHref
             .split('/')
@@ -149,5 +156,4 @@ export class LayoutService {
     changeScale(value: number) {
         document.documentElement.style.fontSize = `${value}px`;
     }
-
 }