fix conflict

src/app/api/appconfig.ts

@@ -0,0 +1,6 @@
+export interface AppConfig {
+    inputStyle?: string;
+    dark?: boolean;
+    theme?: string;
+    ripple?: boolean;
+}

src/app/app.component.ts

@@ -8,22 +8,10 @@ export class AppComponent {
 
     menuMode = 'static';
 
-    inputStyle = 'outlined';
+    constructor(private primengConfig: PrimeNGConfig) { }
-
-    ripple: boolean;
-
-    darkMode: boolean = false;
-
-    lightMode: boolean = true;
-
-    theme = 'light';
-
-    constructor(private primengConfig: PrimeNGConfig) {
-    }
 
     ngOnInit() {
         this.primengConfig.ripple = true;
-        this.ripple = true;
         document.documentElement.style.fontSize = '14px';
     }
 }

src/app/app.config.component.html

@@ -14,19 +14,19 @@
             <h6>Input Style</h6>
             <div class="p-formgroup-inline">
                 <div class="field-radiobutton">
-                    <p-radioButton name="inputStyle" value="outlined" [(ngModel)]="app.inputStyle"
+                    <p-radioButton name="inputStyle" value="outlined" [(ngModel)]="config.inputStyle" (onClick)="onInputStyleChange()"
                                    inputId="inputStyle1"></p-radioButton>
                     <label for="inputStyle1">Outlined</label>
                 </div>
                 <div class="field-radiobutton">
-                    <p-radioButton name="inputStyle" value="filled" [(ngModel)]="app.inputStyle"
+                    <p-radioButton name="inputStyle" value="filled" [(ngModel)]="config.inputStyle" (onClick)="onInputStyleChange()"
                                    inputId="inputStyle2"></p-radioButton>
                     <label for="inputStyle2">Filled</label>
                 </div>
             </div>
 
             <h6>Ripple Effect</h6>
-            <p-inputSwitch [ngModel]="app.ripple" (onChange)="appMain.onRippleChange($event)"></p-inputSwitch>
+            <p-inputSwitch [ngModel]="config.ripple" (onChange)="onRippleChange($event.checked)"></p-inputSwitch>
 
             <h6>Menu Type</h6>
             <div class="p-formgroup-inline">
@@ -44,22 +44,22 @@
             <h6>Bootstrap</h6>
             <div class="grid free-themes">
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('bootstrap4-light-blue', false)">
+                    <button class="p-link" (click)="changeTheme('bootstrap4-light-blue', false)">
                         <img src="assets/layout/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('bootstrap4-light-purple', false)">
+                    <button class="p-link" (click)="changeTheme('bootstrap4-light-purple', false)">
                         <img src="assets/layout/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Purple">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('bootstrap4-dark-blue', true)">
+                    <button class="p-link" (click)="changeTheme('bootstrap4-dark-blue', true)">
                         <img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('bootstrap4-dark-purple', true)">
+                    <button class="p-link" (click)="changeTheme('bootstrap4-dark-purple', true)">
                         <img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Purple">
                     </button>
                 </div>
@@ -68,22 +68,22 @@
             <h6>Material Design</h6>
             <div class="grid free-themes">
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('md-light-indigo', false)">
+                    <button class="p-link" (click)="changeTheme('md-light-indigo', false)">
                         <img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('md-light-deeppurple', false)">
+                    <button class="p-link" (click)="changeTheme('md-light-deeppurple', false)">
                         <img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('md-dark-indigo', true)">
+                    <button class="p-link" (click)="changeTheme('md-dark-indigo', true)">
                         <img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('md-dark-deeppurple', true)">
+                    <button class="p-link" (click)="changeTheme('md-dark-deeppurple', true)">
                         <img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
                     </button>
                 </div>
@@ -92,22 +92,22 @@
             <h6>Material Design Compact</h6>
             <div class="grid free-themes">
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('mdc-light-indigo', false)">
+                    <button class="p-link" (click)="changeTheme('mdc-light-indigo', false)">
                         <img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('mdc-light-deeppurple', false)">
+                    <button class="p-link" (click)="changeTheme('mdc-light-deeppurple', false)">
                         <img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('mdc-dark-indigo', true)">
+                    <button class="p-link" (click)="changeTheme('mdc-dark-indigo', true)">
                         <img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('mdc-dark-deeppurple', true)">
+                    <button class="p-link" (click)="changeTheme('mdc-dark-deeppurple', true)">
                         <img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
                     </button>
                 </div>
@@ -116,7 +116,7 @@
             <h6>Tailwind</h6>
             <div class="grid free-themes">
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('tailwind-light', false)">
+                    <button class="p-link" (click)="changeTheme('tailwind-light', false)">
                         <img src="assets/layout/images/themes/tailwind-light.png" alt="Tailwind Light">
                     </button>
                 </div>
@@ -125,7 +125,7 @@
             <h6>Fluent UI</h6>
             <div class="grid free-themes">
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('fluent-light', false)">
+                    <button class="p-link" (click)="changeTheme('fluent-light', false)">
                         <img src="assets/layout/images/themes/fluent-light.png" alt="Fluent Light">
                     </button>
                 </div>
@@ -134,42 +134,42 @@
             <h6>PrimeOne Design - 2022</h6>
             <div class="grid free-themes">
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-light-indigo', false)">
+                    <button class="p-link" (click)="changeTheme('lara-light-indigo', false)">
                         <img src="assets/layout/images/themes/lara-light-indigo.png" alt="Lara Light Indigo">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-light-blue', false)">
+                    <button class="p-link" (click)="changeTheme('lara-light-blue', false)">
                         <img src="assets/layout/images/themes/lara-light-blue.png" alt="Lara Light Blue">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-light-purple', false)">
+                    <button class="p-link" (click)="changeTheme('lara-light-purple', false)">
                         <img src="assets/layout/images/themes/lara-light-purple.png" alt="Lara Light Purple">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-light-teal', false)">
+                    <button class="p-link" (click)="changeTheme('lara-light-teal', false)">
                         <img src="assets/layout/images/themes/lara-light-teal.png" alt="Lara Light Teal">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-dark-indigo', true)">
+                    <button class="p-link" (click)="changeTheme('lara-dark-indigo', true)">
                         <img src="assets/layout/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-dark-blue', true)">
+                    <button class="p-link" (click)="changeTheme('lara-dark-blue', true)">
                         <img src="assets/layout/images/themes/lara-dark-blue.png" alt="Lara Dark Blue">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-dark-purple', true)">
+                    <button class="p-link" (click)="changeTheme('lara-dark-purple', true)">
                         <img src="assets/layout/images/themes/lara-dark-purple.png" alt="Lara Dark Purple">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('lara-dark-teal', true)">
+                    <button class="p-link" (click)="changeTheme('lara-dark-teal', true)">
                         <img src="assets/layout/images/themes/lara-dark-teal.png" alt="Lara Dark Teal">
                     </button>
                 </div>
@@ -178,62 +178,62 @@
             <h6>PrimeOne Design - 2021</h6>
             <div class="grid free-themes">
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('saga-blue', false)">
+                    <button class="p-link" (click)="changeTheme('saga-blue', false)">
                         <img src="assets/layout/images/themes/saga-blue.png" alt="Saga Blue">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('saga-green', false)">
+                    <button class="p-link" (click)="changeTheme('saga-green', false)">
                         <img src="assets/layout/images/themes/saga-green.png" alt="Saga Green">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('saga-orange', false)">
+                    <button class="p-link" (click)="changeTheme('saga-orange', false)">
                         <img src="assets/layout/images/themes/saga-orange.png" alt="Saga Orange">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('saga-purple', false)">
+                    <button class="p-link" (click)="changeTheme('saga-purple', false)">
                         <img src="assets/layout/images/themes/saga-purple.png" alt="Saga Purple">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('vela-blue', true)">
+                    <button class="p-link" (click)="changeTheme('vela-blue', true)">
                         <img src="assets/layout/images/themes/vela-blue.png" alt="Vela Blue">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('vela-green', true)">
+                    <button class="p-link" (click)="changeTheme('vela-green', true)">
                         <img src="assets/layout/images/themes/vela-green.png" alt="Vela Green">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('vela-orange', true)">
+                    <button class="p-link" (click)="changeTheme('vela-orange', true)">
                         <img src="assets/layout/images/themes/vela-orange.png" alt="Vela Orange">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('vela-purple', true)">
+                    <button class="p-link" (click)="changeTheme('vela-purple', true)">
                         <img src="assets/layout/images/themes/vela-purple.png" alt="Vela Purple">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('arya-blue', true)">
+                    <button class="p-link" (click)="changeTheme('arya-blue', true)">
                         <img src="assets/layout/images/themes/arya-blue.png" alt="Arya Blue">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('arya-green', true)">
+                    <button class="p-link" (click)="changeTheme('arya-green', true)">
                         <img src="assets/layout/images/themes/arya-green.png" alt="Arya Green">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('arya-orange', true)">
+                    <button class="p-link" (click)="changeTheme('arya-orange', true)">
                         <img src="assets/layout/images/themes/arya-orange.png" alt="Arya Orange">
                     </button>
                 </div>
                 <div class="col-3 text-center">
-                    <button class="p-link" (click)="appMain.changeTheme('arya-purple', true)">
+                    <button class="p-link" (click)="changeTheme('arya-purple', true)">
                         <img src="assets/layout/images/themes/arya-purple.png" alt="Arya Purple">
                     </button>
                 </div>

src/app/app.config.component.ts

@@ -1,51 +1,36 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { PrimeNGConfig } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { AppConfig } from './api/appconfig';
 import { AppComponent } from './app.component';
 import { AppMainComponent } from './app.main.component';
+import { ConfigService } from './service/app.config.service';
 
 @Component({
     selector: 'app-config',
     templateUrl: './app.config.component.html'
 })
-export class AppConfigComponent implements OnInit{
+export class AppConfigComponent implements OnInit, OnDestroy {
-
-    topbarThemes: any[];
-
-    componentThemes: any[];
-
-    topbarColor = 'light';
-
-    componentColor = 'blue';
 
     scale: number = 14;
 
     scales: any[] = [12, 13, 14, 15, 16];
 
-    constructor(public app: AppComponent, public appMain: AppMainComponent) {}
+    config: AppConfig;
 
-    ngOnInit() { }
+    subscription: Subscription;
-    replaceLink(linkElement, href) {
-        if (this.isIE()) {
-            linkElement.setAttribute('href', href);
-        }
-        else {
-            const id = linkElement.getAttribute('id');
-            const cloneLinkElement = linkElement.cloneNode(true);
 
-            cloneLinkElement.setAttribute('href', href);
+    constructor(public app: AppComponent, public appMain: AppMainComponent, public configService: ConfigService, public primengConfig: PrimeNGConfig) { }
-            cloneLinkElement.setAttribute('id', id + '-clone');
 
-            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+    ngOnInit() {
+        this.config = this.configService.config;
+        this.subscription = this.configService.configUpdate$.subscribe(config => {
+            this.config = config;
+            this.scale = 14;
 
-            cloneLinkElement.addEventListener('load', () => {
+            this.applyScale();
-                linkElement.remove();
-                cloneLinkElement.setAttribute('id', id);
         });
     }
-    }
-
-    isIE() {
-        return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
-    }
 
     onConfigButtonClick(event) {
         this.appMain.configActive = !this.appMain.configActive;
@@ -67,4 +52,24 @@ export class AppConfigComponent implements OnInit{
         document.documentElement.style.fontSize = this.scale + 'px';
     }
 
+    onRippleChange(ripple) {
+        this.primengConfig.ripple = ripple;
+        this.configService.updateConfig({...this.config, ...{ripple}});
+    }
+
+    onInputStyleChange() {
+        this.configService.updateConfig(this.config);
+    }
+
+    changeTheme(theme:string, dark:boolean){
+        let themeElement = document.getElementById('theme-css');
+        themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css');
+        this.configService.updateConfig({...this.config, ...{theme, dark}});
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }

src/app/app.footer.component.html

@@ -1,5 +1,5 @@
 <div class="layout-footer">
-    <img src="assets/layout/images/{{app.darkMode ? 'logo-white' : 'logo-dark'}}.svg" alt="Logo" height="20" class="mr-2"/>
+    <img src="assets/layout/images/{{appMain.config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Logo" height="20" class="mr-2"/>
     by 
     <span class="font-medium ml-2">PrimeNG</span>
 </div>

src/app/app.footer.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
 
 @Component({
     selector: 'app-footer',
     templateUrl: './app.footer.component.html'
 })
 export class AppFooterComponent{
-    constructor(public app: AppComponent) {}
+    constructor(public appMain: AppMainComponent) {}
 }

src/app/app.main.component.html

@@ -1,11 +1,11 @@
 <div class="layout-wrapper" [ngClass]="{'layout-overlay':isOverlay(),
                                 'layout-static':isStatic(),
-                                'layout-theme-light':!app.darkMode,
+                                'layout-theme-light':!config.dark,
-                                'layout-theme-dark':app.darkMode,
+                                'layout-theme-dark':config.dark,
                                 'layout-overlay-sidebar-active': overlayMenuActive,
                                 'layout-static-sidebar-inactive': staticMenuInactive,
                                 'layout-mobile-sidebar-active':menuActiveMobile,
-                                'p-ripple-disabled': !app.ripple, 'p-input-filled': app.inputStyle === 'filled'}">
+                                'p-ripple-disabled': !config.ripple, 'p-input-filled': config.inputStyle === 'filled'}">
     <app-topbar></app-topbar>
     <div class="layout-sidebar">
         <app-menu></app-menu>

src/app/app.main.component.ts

@@ -1,7 +1,9 @@
 import { Component, AfterViewInit, OnDestroy, Renderer2, OnInit } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { PrimeNGConfig } from 'primeng/api';
 import { AppComponent } from './app.component';
+import { ConfigService } from './service/app.config.service';
+import { AppConfig } from './api/appconfig';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-main',
@@ -47,10 +49,15 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
 
     configClick: boolean;
 
-    constructor(public renderer: Renderer2, private primengConfig: PrimeNGConfig, public app: AppComponent) {}
+    config: AppConfig;
+
+    subscription: Subscription;
+    
+    constructor(public renderer: Renderer2, public app: AppComponent, public configService: ConfigService) { }
 
     ngOnInit() {
-        this.primengConfig.ripple = true;
+        this.config = this.configService.config;
+        this.subscription = this.configService.configUpdate$.subscribe(config => this.config = config);
     }
 
     ngAfterViewInit() {
@@ -69,6 +76,9 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
                 if (!this.menuClick && this.isOverlay()) {
                     this.menuInactiveDesktop = true;
                 }
+                if (!this.menuClick){
+                    this.overlayMenuActive = false;
+                }
             }
 
             if (this.configActive && !this.configClick) {
@@ -135,11 +145,6 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
         this.menuClick = true;
     }
 
-    onRippleChange(event) {
-        this.app.ripple = event.checked;
-        this.primengConfig.ripple = event.checked;
-    }
-
     onConfigClick(event) {
         this.configClick = true;
     }
@@ -168,11 +173,10 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
         if (this.documentClickListener) {
             this.documentClickListener();
         }
-    }
 
-    changeTheme(theme:string, darkMode:boolean){
+
-        let themeElement = document.getElementById('theme-css');
+        if (this.subscription) {
-        themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css');
+            this.subscription.unsubscribe();
-        this.app.darkMode = darkMode;
+        }
     }
 }

src/app/app.menu.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
 
 @Component({
     selector: 'app-menu',
@@ -13,7 +13,7 @@ import { AppComponent } from './app.component';
                     </ul>
                 </li>
                 <a href="https://www.primefaces.org/primeblocks-ng/#/">
-                    <img src="assets/layout/images/{{app.darkMode ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
+                    <img src="assets/layout/images/{{appMain.config.dark ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
                 </a>
             </ul>
         </div>
@@ -23,10 +23,9 @@ export class AppMenuComponent implements OnInit {
 
     model: any[];
 
-    constructor(public app: AppComponent){}
+    constructor(public appMain: AppMainComponent) { }
 
     ngOnInit() {
-
         this.model = [
             {
                 label: 'Home',

src/app/app.module.ts

@@ -97,6 +97,7 @@ import { AppFooterComponent } from './app.footer.component';
 import { AppConfigComponent } from './app.config.component';
 import { AppMenuComponent } from './app.menu.component';
 import { AppMenuitemComponent } from './app.menuitem.component';
+
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { FormLayoutComponent } from './components/formlayout/formlayout.component';
 import { FloatLabelComponent } from './components/floatlabel/floatlabel.component';
@@ -120,11 +121,11 @@ import { CrudComponent } from './components/crud/crud.component';
 import { TimelineComponent } from './components/timeline/timeline.component';
 import { IconsComponent } from './components/icons/icons.component';
 import { BlocksComponent } from './components/blocks/blocks.component';
-
 import { PaymentComponent} from './components/menus/payment.component';
 import { ConfirmationComponent } from './components/menus/confirmation.component';
 import { PersonalComponent } from './components/menus/personal.component';
 import { SeatComponent } from './components/menus/seat.component';
+
 import { CountryService } from './service/countryservice';
 import { CustomerService } from './service/customerservice';
 import { EventService } from './service/eventservice';
@@ -133,7 +134,11 @@ import { NodeService } from './service/nodeservice';
 import { PhotoService } from './service/photoservice';
 import { ProductService } from './service/productservice';
 import { MenuService } from './service/app.menu.service';
+<<<<<<< HEAD
 import { LandingComponent } from './components/landing/landing.component';
+=======
+import { ConfigService } from './service/app.config.service';
+>>>>>>> ffd58ddc301f2db09fb646ebb6e97e77fc2ab70e
 
 @NgModule({
     imports: [
@@ -267,7 +272,7 @@ import { LandingComponent } from './components/landing/landing.component';
     providers: [
         {provide: LocationStrategy, useClass: HashLocationStrategy},
         CountryService, CustomerService, EventService, IconService, NodeService,
-        PhotoService, ProductService, MenuService
+        PhotoService, ProductService, MenuService, ConfigService
     ],
     bootstrap: [AppComponent]
 })

src/app/app.topbar.component.html

@@ -1,6 +1,6 @@
 <div class="layout-topbar">
     <a class="layout-topbar-logo" routerLink="">
-        <img src="assets/layout/images/{{app.darkMode ? 'logo-white' : 'logo-dark'}}.svg" alt="logo">
+        <img src="assets/layout/images/{{appMain.config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="logo">
         <span>SAKAI</span>
     </a>
 

src/app/app.topbar.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnDestroy } from '@angular/core';
-import { AppComponent } from './app.component';
 import { AppMainComponent } from './app.main.component';
 import { Subscription } from 'rxjs';
 import { MenuItem } from 'primeng/api';
@@ -8,17 +7,9 @@ import { MenuItem } from 'primeng/api';
     selector: 'app-topbar',
     templateUrl: './app.topbar.component.html'
 })
-export class AppTopBarComponent implements OnDestroy{
+export class AppTopBarComponent {
-
-    subscription: Subscription;
 
     items: MenuItem[];
 
-    constructor(public app: AppComponent, public appMain: AppMainComponent) {}
+    constructor(public appMain: AppMainComponent) { }
-
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
 }

src/app/components/blockviewer/blockviewer.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core';
-import { environment } from '../../../environments/environment';
 
 enum BlockView {
   PREVIEW,
@@ -18,19 +17,18 @@ enum BlockView {
             </span>
             <div class="block-actions">
                 <a tabindex="0" [ngClass]="{'block-action-active': blockView == BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
-                <a [attr.tabindex]="codeDisabled ? null: '0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE, 'block-action-disabled': codeDisabled}" (click)="activateView($event, BlockView.CODE)">
+                <a [attr.tabindex]="'0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE}" (click)="activateView($event, BlockView.CODE)">
-                    <i class="pi pi-lock" *ngIf="codeDisabled"></i>
                     <span>Code</span>
                 </a>
-                <a [attr.tabindex]="codeDisabled ? null: '0'" class="block-action-copy" [ngClass]="{'block-action-disabled': codeDisabled}" (click)="copyCode($event)" 
+                <a [attr.tabindex]="'0'" class="block-action-copy" (click)="copyCode($event)" 
-                    pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom" [tooltipDisabled]="codeDisabled"><i class="pi pi-copy"></i></a>
+                    pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom"><i class="pi pi-copy m-0"></i></a>
             </div>
         </div>
         <div class="block-content">
             <div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView == BlockView.PREVIEW">
                 <ng-content></ng-content>
             </div>
-            <div *ngIf="blockView == BlockView.CODE && !codeDisabled">
+            <div *ngIf="blockView == BlockView.CODE">
                 <app-code lang="markup" ngPreserveWhitespaces>{{code}}
                 </app-code>
             </div>
@@ -49,7 +47,7 @@ export class BlockViewer {
 
   @Input() previewStyle: string;
 
-  @Input() free: boolean = false;
+  @Input() free: boolean = true;
 
   @Input() new: boolean = false;
 
@@ -58,23 +56,14 @@ export class BlockViewer {
   blockView: BlockView = BlockView.PREVIEW;
 
   activateView(event: Event, blockView: BlockView) {
-      if (!this.codeDisabled) {
-          this.blockView = blockView;
-      }
 
+    this.blockView = blockView;  
     event.preventDefault();
   }
 
   async copyCode(event: Event) {
-      if (!this.codeDisabled) {
     await navigator.clipboard.writeText(this.code);
-      }
-
     event.preventDefault();
   }
 
-  get codeDisabled() {
-      return this.free ? false : (environment ? environment.production: false);
-  }
-
 }

src/app/components/charts/charts.component.ts

@@ -1,9 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { AppConfig } from 'src/app/api/appconfig';
+import { ConfigService } from 'src/app/service/app.config.service';
 
 @Component({
     templateUrl: './charts.component.html'
 })
-export class ChartsComponent implements OnInit {
+export class ChartsComponent implements OnInit, OnDestroy {
 
     lineData: any;
 
@@ -25,7 +28,19 @@ export class ChartsComponent implements OnInit {
 
     radarOptions: any;
 
+    config: AppConfig;
+
+    subscription: Subscription;
+    
+    constructor(public configService: ConfigService) { }
+
     ngOnInit() {
+        this.config = this.configService.config;
+        this.subscription = this.configService.configUpdate$.subscribe(config => {
+            this.config = config;
+            this.updateChartOptions();
+        });
+
         this.lineData = {
             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
             datasets: [
@@ -52,7 +67,7 @@ export class ChartsComponent implements OnInit {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#FFFFFF'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -96,7 +111,7 @@ export class ChartsComponent implements OnInit {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -143,7 +158,7 @@ export class ChartsComponent implements OnInit {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             }
@@ -180,7 +195,7 @@ export class ChartsComponent implements OnInit {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -223,7 +238,7 @@ export class ChartsComponent implements OnInit {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -236,4 +251,222 @@ export class ChartsComponent implements OnInit {
             }
         };
     }
+
+    updateChartOptions() {
+        if (this.config.dark)
+            this.applyDarkTheme();
+        else
+            this.applyLightTheme();
+    }
+
+    applyLightTheme() {
+        this.lineOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
+
+        this.barOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
+
+        this.pieOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            }
+        };
+
+        this.polarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
+
+        this.radarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
+
+    }
+
+    applyDarkTheme() {
+        this.lineOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
+
+        this.barOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
+
+        this.pieOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            }
+        };
+
+        this.polarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
+
+        this.radarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }

src/app/service/app.config.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { AppConfig } from '../api/appconfig';
+
+@Injectable()
+export class ConfigService {
+
+    config: AppConfig = {
+        theme: 'lara-light-indigo',
+        dark: false,
+        inputStyle: 'outlined',
+        ripple: true
+    };
+
+    private configUpdate = new Subject<AppConfig>();
+
+    configUpdate$ = this.configUpdate.asObservable();
+
+    updateConfig(config: AppConfig) {
+        this.config = config;
+        this.configUpdate.next(config);
+    }
+
+    getConfig() {
+        return this.config;
+    }
+}

src/app/service/app.menu.service.ts

@@ -15,6 +15,6 @@ export class MenuService {
     }
 
     reset() {
-    //    this.resetSource.next(true);
+       this.resetSource.next(true);
     }
 }