general-library-union 3.3.3 → 3.3.4

package/src/app/layout/app.topbar.component.ts

@@ -0,0 +1,343 @@
+import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { MegaMenuItem } from 'primeng/api';
+import { LayoutService } from './service/app.layout.service';
+import { TareasModel } from '../seguridad/modelos/TareasModel';
+import { ModulosModel } from '../seguridad/modelos/ModulosModel';
+import { ActivatedRoute, Router } from '@angular/router';
+import { StorageService } from '../core/servicios/storage.service';
+import { MenuService } from '../core/servicios/menu.service';
+import { AuthService } from '../core/servicios/auth.service';
+import { CargarControlFuncionalidadService } from '../core/servicios/cargar-control-funcionalidad.service';
+import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
+import { GeneralPipe } from '../webcommon/pipes/general.pipe';
+import { UtilsService } from '../core/servicios/utils.service';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { StyleClassModule } from 'primeng/styleclass';
+import { InputSwitchModule } from 'primeng/inputswitch';
+@Component({
+    selector: 'app-topbar',
+    imports: [CommonModule, AutoCompleteModule, FormsModule, StyleClassModule, InputSwitchModule] , 
+    standalone: true,
+    templateUrl: './app.topbar.component.html'
+})
+export class AppTopbarComponent implements OnInit, AfterViewInit, OnDestroy {
+  //Variables
+
+  modulosDisponibles: ModulosModel[] = new Array(); // una matriz de objetos ModulosModel
+  modulo: string; // una cadena que indica el módulo seleccionado
+  searchClick: boolean = false; // un valor booleano que indica si se ha hecho clic en el botón de búsqueda o no
+  tareaSeleccionadas: TareasModel; // un objeto TareasModel que representa la tarea seleccionada
+  tareasFiltradas: TareasModel[]; // una matriz de objetos TareasModel que representa las tareas filtradas
+  documentClickListener!: () => void;
+  topbarItemClick: boolean = false;
+  activeTopbarItem: string = '';
+  menuClick: boolean = false;
+  mobileMenuActive: boolean = false;
+  search: boolean = false;
+  intervalId: number;
+  tareas: TareasModel[]
+  empresa: string;
+  rol: string;
+  conexion: string;
+  logoComprimido;
+  codigo
+  @ViewChild('menuButton') menuButton!: ElementRef; // una referencia al botón del menú
+  @ViewChild('mobileMenuButton') mobileMenuButton!: ElementRef; // una referencia al botón del menú móvil
+  @ViewChild('searchInput') searchInput!: ElementRef; // una referencia al campo de búsqueda
+  @ViewChild('searchInput', { static: false })   autocomplete!: AutoComplete;
+  switch: boolean;
+  colores: string[] = ["#f3d9dc", "#aed9e0", "#c7e7b0", "#fdf2ab", "#e6d1e1", "#f9dbbd", "#e4e3e7", "#f9d5d3"];
+  color: string ;
+  iniciales: string;
+  url = window.location.href;
+  mostrarSearch: boolean=false;
+
+  toggleSwitch() {
+    this.switch = !this.switch;
+    this.cambioSwitch({ checked: this.switch }); // Pasa un objeto con la propiedad checked
+  }
+
+  constructor(
+    public layoutService: LayoutService,
+    public el: ElementRef,
+    private activatedRoute: ActivatedRoute,
+    private storage: StorageService,
+    private router: Router,
+    private renderer: Renderer2,
+    private menuService: MenuService,
+    private authService: AuthService,
+    private controlFuncionalidad: CargarControlFuncionalidadService,
+    public generalPipe : GeneralPipe,
+    private storageService: StorageService,
+    public utilsService: UtilsService,
+    @Inject(DOCUMENT) private document: Document,
+  ) {
+    this.codigo = this.authService.getTokenKey('aplicacion')
+    let resultadoComprimido = this.generalPipe.MAPALOGO.filter(item => item.codigo == this.authService.getTokenKey('aplicacion') );
+    this.logoComprimido = resultadoComprimido[0]?.nombre != null ? resultadoComprimido[0]?.nombre : this.generalPipe.LOGO_SARA;
+
+  }
+
+  calcularIniciales() {
+    let colorUsuario = this.storageService.getItem('colorUsuario')
+    if (colorUsuario) {
+      this.color = colorUsuario;
+    } else {
+      const indice: number = Math.floor(Math.random() * this.colores.length);
+      this.color = this.colores[indice];
+      this.storageService.setItem('colorUsuario', this.color);
+    }
+    var nombreUsuario = this.authService.getTokenKey('nombreUsuario');
+    var cantidadPalabras: number = this.contarPalabras(nombreUsuario);
+    if (cantidadPalabras == 0 || cantidadPalabras == undefined || cantidadPalabras == null) {
+      this.iniciales = 'US'
+    } else if (cantidadPalabras == 1) {
+      this.iniciales = this.obtenerInicial(nombreUsuario);
+    } else {
+      this.iniciales = this.obtenerInicial(this.obtenerPalabra(nombreUsuario, cantidadPalabras-1)) + 
+                    this.obtenerInicial(this.obtenerPalabra(nombreUsuario, cantidadPalabras)) 
+    }
+  }
+
+  obtenerPalabra(frase: string, numeroPalabra: number): string {
+    const palabras = frase.split(/\s+/);
+    if (numeroPalabra < 1 || numeroPalabra > palabras.length) {
+        return null;
+    }
+    const indicePalabra = numeroPalabra - 1;
+    return palabras[indicePalabra];
+  }
+
+  obtenerInicial(palabra: string): string {
+    if (palabra.length === 0) {
+        return '';
+    }
+    const inicial = palabra.charAt(0).toUpperCase();
+    return inicial;
+  }
+
+  contarPalabras(texto: string): number {
+    if (texto == null || texto == undefined) {
+      return 0;
+    }
+    texto = texto.trim();
+    const palabras = texto.split(/\s+/);
+    return palabras.length;
+  }
+
+  ngOnDestroy(): void {
+    clearInterval(this.intervalId);
+  }
+  ngAfterViewInit(): void {
+    this.documentClickListener = this.renderer.listen('body', 'click', () => {
+      if (!this.topbarItemClick) {
+        this.activeTopbarItem = '';
+      }
+
+      if (!this.menuClick) {
+        if (this.mobileMenuActive) {
+          this.mobileMenuActive = false;
+        }
+      }
+
+      if (!this.searchClick) {
+        this.search = false;
+      }
+
+      this.searchClick = false;
+      this.topbarItemClick = false;
+      this.menuClick = false;
+      this.modulo = this.storage.getItem('moduloSeleccionado')
+    });
+
+    this.menuService.loadTareas().subscribe(() => {
+      setTimeout(() => {
+        this.menuService.setTareasDelModulo(this.modulo);
+      });
+    });
+
+    // Cada 5 minutos verifica que el token no haya expirado
+    this.intervalId = window.setInterval(() => {
+      if (!this.authService.isTokenValid()) {
+        this.authService.deleteToken();
+        if (window.location.href.toString().includes('admonPortal')) {
+          this.router.navigateByUrl(this.utilsService.obtenerBase() + '/admonPortal/timeout');
+        } else {
+          this.router.navigateByUrl(this.utilsService.obtenerBase() + '/timeout');
+        }
+      }
+    }, 300_000);
+  }
+
+  ngOnInit(): void {
+    let tema = this.storageService.getItem('tema');
+    this.switch = tema == 'temaOscuro' ? true : false;
+    if (tema) {
+      this.cambiarTema();
+    } else {
+      this.switch = false;
+    }
+    this.calcularIniciales();
+    this.empresa = this.authService.getTokenKey('numeroEmpresa') + ' - ' + this.authService.getTokenKey('nombreEmpresa')
+    this.rol = this.authService.getTokenKey('nombreRol')
+    this.conexion = this.authService.getTokenKey('nombreConexion')
+    this.modulosDisponibles = JSON.parse(this.storage.getItem('modulos'));
+    this.tareas = this.storage.getItem('__tareas') != null ? JSON.parse(this.storage.getItem('__tareas')) : '';
+    this.activatedRoute.data.subscribe((v) => {
+      //this.modulosDisponibles = v['modulosDisponibles'];
+      this.modulo = this.storage.getItem('moduloSeleccionado')
+      let moduloSeleccionado: ModulosModel = new ModulosModel(this.modulo, '');
+      this.cambioModulo(moduloSeleccionado, false)
+    });
+  }
+
+  activeItem!: number; // un número que representa el elemento activo
+
+  //Dummi de barra de elementos por si se necesita.
+  model: MegaMenuItem[] = [
+    {
+      label: 'UI KIT',
+      items: [
+        [
+          {
+            label: 'UI KIT 1',
+            items: [
+              { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout'] },
+              { label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input'] },
+              { label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel'] },
+              { label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'] },
+              { label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file'] },
+            ],
+          },
+        ],
+        [
+          {
+            label: 'UI KIT 2',
+            items: [
+              { label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'] },
+              { label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list'] },
+              { label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree'] },
+              { label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel'] },
+              { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts'] },
+            ],
+          },
+        ],
+        [
+          {
+            label: 'UI KIT 3',
+            items: [
+              { label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay'] },
+              { label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media'] },
+              { label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'] },
+              { label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message'] },
+              { label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc'] },
+            ],
+          },
+        ],
+      ],
+    },
+    {
+      label: 'UTILITIES',
+      items: [
+        [
+          {
+            label: 'UTILITIES 1',
+            items: [
+              { label: 'Icons', icon: 'pi pi-fw pi-prime', routerLink: ['utilities/icons'] },
+              { label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: 'https://www.primefaces.org/primeflex/', target: '_blank' },
+            ],
+          },
+        ],
+      ],
+    },
+  ];
+
+  // un getter que devuelve el estado activo del menú superior móvil
+  get mobileTopbarActive(): boolean {
+    return this.layoutService.state.topbarMenuActive;
+  }
+
+  onMenuButtonClick() {
+    this.layoutService.onMenuToggle();
+  }
+
+  onRightMenuButtonClick() {
+    this.layoutService.openRightSidebar();
+  }
+
+  onMobileTopbarMenuButtonClick() {
+    this.layoutService.onTopbarMenuToggle();
+  }
+
+  // un método que se ejecuta para enfocar el campo de búsqueda
+  focusSearchInput() {
+    setTimeout(() => {
+      if (this.autocomplete) {
+     //   this.autocomplete.focusInput();
+      }
+      //this.searchInput.nativeElement.focus();
+    }, 0);
+  }
+
+  // un método que se ejecuta cuando se selecciona una tarea
+  tareaSeleccion() {
+    if (this.tareaSeleccionadas != null) {
+      this.router.navigate([this.utilsService.obtenerBase() +  this.tareaSeleccionadas.urlprincipal.replace(/.jsf/, '')]);
+    }
+  }
+
+  salir() {
+    this.authService.deleteToken();
+    this.storageService.removeItem('roles')
+    this.storageService.removeItem('autenticacionUsuarioDTO')
+    this.storageService.removeItem('rol_seleccionado')
+    this.storageService.removeItem('token')
+    this.storageService.removeItem('__tareas')
+    this.storageService.removeItem('modulos')
+    this.storageService.removeItem('moduloSeleccionado')
+    this.storageService.removeItem('moduloFavorito')
+    this.controlFuncionalidad.eliminarFuncionalidades();
+    this.router.navigateByUrl(this.utilsService.obtenerBase() + '/login');
+  }
+
+  cambioModulo(modulo: ModulosModel, navegar: boolean): void {
+    this.storage.setItem('moduloSeleccionado', modulo.llave)
+    this.menuService.setTareasDelModulo(modulo.llave);
+    if (navegar) {
+      if (window.location.href.toString().includes('admonPortal')) {
+        this.router.navigateByUrl(this.utilsService.obtenerBase() + '/admonPortal/inicio');
+      } else {
+        this.router.navigateByUrl(this.utilsService.obtenerBase() + '/inicio');
+      }
+    }
+  }
+
+  // un método que se ejecuta para filtrar las tareas
+  filterTarea(event) {
+    const filtered: TareasModel[] = [];
+    const query = event.query;
+    for (let i = 0; i < this.tareas.length; i++) {
+      const country = this.tareas[i];
+      if (country.descripcion.toLowerCase().includes(query.toLowerCase()) || country.palabras?.replace(/,/g, "")?.toLowerCase()?.includes(query.toLowerCase())) {
+        filtered.push(country);
+      }
+    }
+    this.tareasFiltradas = filtered;
+  }
+
+  cambioSwitch(cambio){
+    this.switch = cambio.checked;
+    this.cambiarTema()
+  }
+
+  cambiarTema(){
+    let tema = this.switch ? 'temaOscuro' : 'temaClaro';
+    localStorage.setItem(this.utilsService.obtenerBase() + '_' +'tema', tema);
+    let linkTema = this.document.getElementById('temaApp') as HTMLLinkElement;
+    linkTema.href = `${tema}.css`
+  }
+
+  onEnter(){this.mostrarSearch=true}
+}
+

package/src/app/layout/config/app.config.component.html

@@ -0,0 +1,125 @@
+<p-button type="button" (click)="onConfigButtonClick()" icon="pi pi-cog" styleClass="layout-config-button"></p-button>
+
+<p-sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'">
+    <div class="p-3">
+        <h5>Layout/Theme Scale</h5>
+        <div class="flex align-items-center">
+            <button icon="pi pi-minus" type="button" pButton (click)="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" [disabled]="scale === scales[0]"></button>
+            <div class="flex gap-2 align-items-center">
+                <i class="pi pi-circle-fill text-300" *ngFor="let s of scales" [ngClass]="{'text-primary-500': s === scale}"></i>
+            </div>
+            <button icon="pi pi-plus"  type="button" pButton (click)="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" [disabled]="scale === scales[scales.length - 1]"></button>
+        </div>
+    
+        <h5>Color Scheme</h5>
+        <div class="flex gap-4">
+            <div class="field-radiobutton flex-1">
+                <p-radioButton name="colorScheme" value="light" [(ngModel)]="colorScheme" inputId="light"></p-radioButton>
+                <label for="light">Light</label>
+            </div>
+            <div class="field-radiobutton flex-1">
+                <p-radioButton name="colorScheme" value="dark" [(ngModel)]="colorScheme" inputId="dark"></p-radioButton>
+                <label for="dark">Dark</label>
+            </div>
+        </div>
+    
+        <ng-container *ngIf="!minimal">
+            <h5>Menu Mode</h5>
+            <div class="flex flex-wrap row-gap-3">
+                <div class="flex align-items-center gap-2 w-6">
+                    <p-radioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></p-radioButton>
+                    <label for="mode1">Static</label>
+                </div>
+                <div class="flex align-items-center gap-2 w-6">
+                    <p-radioButton name="menuMode" value="overlay" [(ngModel)]="menuMode" inputId="mode2"></p-radioButton>
+                    <label for="mode2">Overlay</label>
+                </div>
+                <div class="flex align-items-center gap-2 w-6">
+                    <p-radioButton name="menuMode" value="slim" [(ngModel)]="menuMode" inputId="mode3"></p-radioButton>
+                    <label for="mode3">Slim</label>
+                </div>
+                <div class="flex align-items-center gap-2 w-6">
+                    <p-radioButton name="menuMode" value="slim-plus" [(ngModel)]="menuMode" inputId="mode4"></p-radioButton>
+                    <label for="mode3">Slim +</label>
+                </div>
+                <div class="flex align-items-center gap-2 w-6 ">
+                    <p-radioButton name="menuMode" value="reveal" [(ngModel)]="menuMode" inputId="mode6"></p-radioButton>
+                    <label for="mode5">Reveal</label>
+                </div>
+                <div class="flex align-items-center gap-2 w-6">
+                    <p-radioButton name="menuMode" value="drawer" [(ngModel)]="menuMode" inputId="mode7"></p-radioButton>
+                    <label for="mode6">Drawer</label>
+                </div>
+                <div class="flex align-items-center gap-2 w-6">
+                    <p-radioButton name="menuMode" value="horizontal" [(ngModel)]="menuMode" inputId="mode5"></p-radioButton>
+                    <label for="mode4">Horizontal</label>
+                </div>
+            </div>
+    
+            <h5>Menu Profile Position</h5>
+            <div class="flex gap-4">
+                <div class="field-radiobutton flex-1">
+                    <p-radioButton name="position" value="start" [(ngModel)]="menuProfilePosition" inputId="start"></p-radioButton>
+                    <label for="star">Start</label>
+                </div>
+                <div class="field-radiobutton flex-1">
+                    <p-radioButton name="position" value="end" [(ngModel)]="menuProfilePosition" inputId="end"></p-radioButton>
+                    <label for="end">End</label>
+                </div>
+            </div>
+        </ng-container>
+
+        <ng-container *ngIf="!minimal">
+            <h5>Input Style</h5>
+            <div class="flex gap-4">
+                <div class="field-radiobutton flex-1">
+                    <p-radioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="outlined_input"></p-radioButton>
+                    <label for="outlined_input">Outlined</label>
+                </div>
+                <div class="field-radiobutton flex-1">
+                    <p-radioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></p-radioButton>
+                    <label for="filled_input">Filled</label>
+                </div>
+            </div>
+        </ng-container>
+
+        <h5>Ripple Effect</h5>
+        <p-inputSwitch [(ngModel)]="ripple" styleClass="mb-3"></p-inputSwitch>
+        
+        <ng-container *ngIf="!minimal">
+            <h5>Menu Themes</h5>
+            <p *ngIf="colorScheme === 'dark';else menu_theme_selector">Menu themes are only available in light mode by design as large surfaces can emit too much brightness in dark mode.</p>
+            <ng-template #menu_theme_selector>
+                <div class="flex flex-wrap row-gap-3 pb-3">
+                    <div class="w-3" *ngFor="let theme of menuThemes">
+                        <button type="button" 
+                            class="cursor-pointer p-link w-2rem h-2rem border-round shadow-2 flex-shrink-0 flex justify-content-center align-items-center border-circle" 
+                            (click)="changeMenuTheme(theme.name)" 
+                            [ngStyle]="{'background-color': theme.color}"><i *ngIf="menuTheme === theme.name" class="pi pi-check text-lg" [ngClass]="{'text-white': menuTheme !== 'light'}"></i></button>
+                    </div>
+                </div>
+            </ng-template>
+            
+            <h5>Topbar Themes</h5>
+            <div class="flex flex-wrap row-gap-3 pb-3">
+                <div class="w-3" *ngFor="let theme of topbarThemes">
+                    <button type="button" 
+                    class="cursor-pointer p-link w-2rem h-2rem border-round shadow-2 flex-shrink-0 flex justify-content-center align-items-center border-circle" 
+                    (click)="changeTopbarTheme(theme.name)" 
+                    [ngStyle]="{'background-color': theme.color}"><i *ngIf="topbarTheme === theme.name" class="pi pi-check text-lg" [ngClass]="{'text-white': topbarTheme !== 'white'}"></i></button>
+                </div>
+            </div>
+        </ng-container>
+
+    
+        <h5>Component Themes</h5>
+        <div class="flex flex-wrap row-gap-3">
+            <div class="w-3" *ngFor="let theme of componentThemes">
+                <button type="button" 
+                class="cursor-pointer p-link w-2rem h-2rem border-round shadow-2 flex-shrink-0 flex justify-content-center align-items-center border-circle" 
+                (click)="changeTheme(theme.name)"
+                [ngStyle]="{'background-color': theme.color}"><i *ngIf="componentTheme === theme.name" class="pi pi-check text-lg text-white"></i></button>
+            </div>
+        </div>
+    </div>
+</p-sidebar>

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

@@ -0,0 +1,206 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MenuService } from '../app.menu.service';
+import { ColorScheme, LayoutService, MenuMode } from '../service/app.layout.service';
+import { CommonModule } from '@angular/common';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { FormsModule } from '@angular/forms';
+import { SidebarModule } from 'primeng/sidebar';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+    selector: 'app-config',
+    imports: [CommonModule, InputSwitchModule, RadioButtonModule, FormsModule, SidebarModule, ButtonModule,],
+    standalone: true,
+    templateUrl: './app.config.component.html'
+})
+export class AppConfigComponent implements OnInit {
+
+    @Input() minimal: boolean = false;
+
+    componentThemes: any[] = [];
+
+    menuThemes: any[] = [];
+
+    topbarThemes: any[] = [];
+
+    scales: number[] = [12,13,14,15,16];
+
+    constructor(public layoutService: LayoutService, public menuService: MenuService) { }
+
+    get visible(): boolean {
+        return this.layoutService.state.configSidebarVisible;
+    }
+
+    set visible(_val: boolean) {
+        this.layoutService.state.configSidebarVisible = _val;
+    }
+
+    get scale(): number {
+        return this.layoutService.config.scale;
+    }
+
+    set scale(_val: number) {
+        this.layoutService.config.scale = _val;
+    }
+
+    get menuMode(): MenuMode {
+        return this.layoutService.config.menuMode;
+    }
+
+    set menuMode(_val: MenuMode) {
+        this.layoutService.config.menuMode = _val;
+        if (this.layoutService.isSlim() || this.layoutService.isHorizontal()) {
+            this.menuService.reset();
+        }
+    }
+
+    get menuProfilePosition(): string {
+        return this.layoutService.config.menuProfilePosition;
+    }
+
+    set menuProfilePosition(_val: string) {
+        this.layoutService.config.menuProfilePosition = _val;
+        if (this.layoutService.isSlimPlus() || this.layoutService.isSlim() || this.layoutService.isHorizontal()) {
+            this.menuService.reset();
+        }
+    }
+
+    get colorScheme(): ColorScheme {
+        return this.layoutService.config.colorScheme;
+    }
+
+    set colorScheme(_val: ColorScheme) {
+        this.changeColorScheme(_val);
+    }
+
+    get inputStyle(): string {
+        return this.layoutService.config.inputStyle;
+    }
+
+    set inputStyle(_val: string) {
+        this.layoutService.config.inputStyle = _val;
+    }
+
+    get ripple(): boolean {
+        return this.layoutService.config.ripple;
+    }
+
+    set ripple(_val: boolean) {
+        this.layoutService.config.ripple = _val;
+    }
+
+    get menuTheme(): string {
+        return this.layoutService.config.menuTheme;
+    }
+
+    get topbarTheme(): string {
+        return this.layoutService.config.topbarTheme;
+    }
+
+    get componentTheme(): string {
+        return this.layoutService.config.componentTheme;
+    }
+
+    ngOnInit() {
+        this.componentThemes = [
+            {name: 'indigo', color: '#3F51B5'},
+            {name: 'pink', color: '#E91E63'},
+            {name: 'purple', color: '#9C27B0'},
+            {name: 'deeppurple', color: '#673AB7'},
+            {name: 'blue', color: '#2196F3'},
+            {name: 'lightblue', color: '#03A9F4'},
+            {name: 'cyan', color: '#00BCD4'},
+            {name: 'teal', color: '#009688'},
+            {name: 'green', color: '#4CAF50'},
+            {name: 'lightgreen', color: '#8BC34A'},
+            {name: 'lime', color: '#CDDC39'},
+            {name: 'yellow', color: '#FFEB3B'},
+            {name: 'amber', color: '#FFC107'},
+            {name: 'orange', color: '#FF9800'},
+            {name: 'deeporange', color: '#FF5722'},
+            {name: 'brown', color: '#795548'},
+            {name: 'bluegrey', color: '#607D8B'}
+        ];
+
+        this.menuThemes = [
+            {name: 'light', color: '#FDFEFF'},
+            {name: 'dark', color: '#434B54'},
+            {name: 'indigo', color: '#1A237E'},
+            {name: 'bluegrey', color: '#37474F'},
+            {name: 'brown', color: '#4E342E'},
+            {name: 'cyan', color: '#006064'},
+            {name: 'green', color: '#2E7D32'},
+            {name: 'deeppurple', color: '#4527A0'},
+            {name: 'deeporange', color: '#BF360C'},
+            {name: 'pink', color: '#880E4F'},
+            {name: 'purple', color: '#6A1B9A'},
+            {name: 'teal', color: '#00695C'}
+        ];
+
+        this.topbarThemes = [
+            {name: 'lightblue', color: '#2E88FF'},
+            {name: 'dark', color: '#363636'},
+            {name: 'white', color: '#FDFEFF'},
+            {name: 'blue', color: '#1565C0'},
+            {name: 'deeppurple', color: '#4527A0'},
+            {name: 'purple', color: '#6A1B9A'},
+            {name: 'pink', color: '#AD1457'},
+            {name: 'cyan', color: '#0097A7'},
+            {name: 'teal', color: '#00796B'},
+            {name: 'green', color: '#43A047'},
+            {name: 'lightgreen', color: '#689F38'},
+            {name: 'lime', color: '#AFB42B'},
+            {name: 'yellow', color: '#FBC02D'},
+            {name: 'amber', color: '#FFA000'},
+            {name: 'orange', color: '#FB8C00'},
+            {name: 'deeporange', color: '#D84315'},
+            {name: 'brown', color: '#5D4037'},
+            {name: 'grey', color: '#616161'},
+            {name: 'bluegrey', color: '#546E7A'},
+            {name: 'indigo', color: '#3F51B5'}
+        ];
+    }
+
+    onConfigButtonClick() {
+        this.layoutService.showConfigSidebar();
+    }
+
+    changeColorScheme(colorScheme: ColorScheme) {
+        this.layoutService.onColorSchemeChange(colorScheme);
+    }
+
+    changeTheme(theme: string) {
+        const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+        const newHref = themeLink.getAttribute('href')!.replace(this.layoutService.config.componentTheme, theme);
+        this.layoutService.replaceThemeLink(newHref, () => {
+            this.layoutService.config.componentTheme = theme;
+            this.layoutService.onConfigUpdate();
+        });
+    }
+
+    changeTopbarTheme(theme:string) {
+        this.layoutService.config.topbarTheme = theme;
+        this.layoutService.onConfigUpdate();
+    }
+
+    changeMenuTheme(theme:string) {
+        this.layoutService.config.menuTheme = theme;
+        this.layoutService.onConfigUpdate();
+    }
+
+    decrementScale() {
+        this.scale--;
+        this.applyScale();
+    }
+
+    incrementScale() {
+        this.scale++;
+        this.applyScale();
+    }
+
+    applyScale() {
+        document.documentElement.style.fontSize = this.scale + 'px';
+    }
+    
+}

package/src/app/layout/config/app.config.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+@NgModule({
+    imports: [
+    ],
+    declarations: [
+        
+    ],
+    exports: [
+    ]
+})
+export class AppConfigModule { }