fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-04-19 12:53:45 +07:00
commit 71a3a661dc
1943 changed files with 246917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/_layout/customizer/customizer.component.css Normal file
View File

@@ -0,0 +1,22 @@
.tabsborder{
border-bottom: none !important;
}
.h6, h6 {
font-size: 1rem;
}
:host ::ng-deep .tab-content{
padding: 1rem;
}
:host ::ng-deep .layout_space{
padding: 0%;
}
:host ::ng-deep .nav.nav-tabs.nav-underline .nav-item a.nav-link {
padding: 0.5rem 0rem;
}
:host ::ng-deep .btn-outline-info .active {
background: rgba(0, 0, 0, .05);
}

394
src/app/_layout/customizer/customizer.component.html Normal file
View File

@@ -0,0 +1,394 @@
<div class="customizer border-left-blue-grey border-left-lighten-4 d-none d-xl-block" id="customizer">
<a class="customizer-close" (click)="toggleCustomizer($event)"><i class="feather ft-x font-medium-3"></i></a>
<a class="customizer-toggle bg-danger box-shadow-3" (click)="toggleCustomizer($event)"><i
class="feather ft-settings font-medium-3 spinner white"></i></a>
<div class="customizer-content p-2" fxFlex="auto" [perfectScrollbar]="config">
<h4 class="text-uppercase mb-0">Theme Customizer</h4>
<hr>
<p>Customize & Preview in Real Time</p>
<h5 class="mt-1 mb-1 text-bold-500">Menu Color Options</h5>
<div class="form-group">
<!-- Outline Button group -->
<div class="btn-group customizer-sidebar-options" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-info _light" (click)="setMenuColor('menu-light',$event)"
data-sidebar="menu-light" id="light-menu">Light Menu
</button>
<button type="button" class="btn btn-outline-info _dark active" (click)="setMenuColor('menu-dark',$event)"
data-sidebar="menu-dark" id="dark-menu">Dark Menu
</button>
</div>
</div>
<hr>
<h5 class="mt-1 text-bold-500">Layout Options</h5>
<ul class="nav nav-tabs nav-underline nav-justified layout-options tabsborder">
<div class="col-lg-12 layout_space">
<div class="ngtab">
<ul ngbNav #nav="ngbNav" class="nav-pills">
<li ngbNavItem>
<a ngbNavLink>Layout</a>
<ng-template ngbNavContent>
<div role="tabpanel" class="tab-panel active px-1 pt-1" id="tabIcon21" aria-expanded="true"
aria-labelledby="baseIcon-tab21">
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" [checked]="_themeSettingsConfig.menu === 'collapse'" (change)="toggleFixMenu($event)"
[(ngModel)]="isCollapsedMenu" name="collapsed-sidebar" id="collapsed-sidebar" >
<label class="custom-control-label" for="collapsed-sidebar">Collapsed Menu</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input"
name="fixed-layout" id="fixed-layout" (ngModelChange)="toggleLayout('fixed')" [(ngModel)]="isfixChecked">
<label class="custom-control-label" for="fixed-layout">Fixed Layout</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input"
name="boxed-layout" id="boxed-layout" (ngModelChange)="toggleLayout('boxed')" [(ngModel)]="isboxChecked">
<label class="custom-control-label" for="boxed-layout">Boxed Layout</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" (change)="setLayout('static',$event)"
[(ngModel)]="isStaticLayout" name="static-layout" id="static-layout">
<label class="custom-control-label" for="static-layout">Static Layout</label>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Navigation</a>
<ng-template ngbNavContent>
<div class="tab-panel px-1 pt-1" id="tabIcon22" aria-labelledby="baseIcon-tab22">
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="right-side-icons"
[(ngModel)]="isRightSideIcons" (change)="setNavigation('menu-icon-right',$event)" id="right-side-icons">
<label class="custom-control-label" for="right-side-icons">Right Side Icons</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="bordered-navigation"
[(ngModel)]="isBorderedNavigation" (change)="setNavigation('menu-bordered',$event)" id="bordered-navigation">
<label class="custom-control-label" for="bordered-navigation">Bordered Navigation</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="flipped-navigation"
[(ngModel)]="isFlippedNavigation" (change)="setNavigation('menu-flipped',$event)" id="flipped-navigation">
<label class="custom-control-label" for="flipped-navigation">Flipped Navigation</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="collapsible-navigation"
[(ngModel)]="isCollapsibleNavigation" (change)="setNavigation('menu-collapsible',$event)" id="collapsible-navigation">
<label class="custom-control-label" for="collapsible-navigation">Collapsible Navigation</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="static-navigation"
[(ngModel)]="isStaticNavigation" (change)="setNavigation('menu-static',$event)" id="static-navigation">
<label class="custom-control-label" for="static-navigation">Static Navigation</label>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Navbar</a>
<ng-template ngbNavContent>
<div class="tab-panel px-1 pt-1" id="tabIcon23" aria-labelledby="baseIcon-tab23">
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="navbar-static-top"
[(ngModel)]="isStaticTop" (change)="setNavbar($event)" id="navbar-static-top">
<label class="custom-control-label" for="navbar-static-top">Static Top</label>
</div>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</div>
</ul>
<hr>
<h5 class="mt-1 text-bold-500">Navigation Color Options</h5>
<ul class="nav nav-tabs nav-underline nav-justified color-options tabsborder">
<div class="col-lg-12 layout_space">
<div [ngbNavOutlet]="nav" class="mt-2"></div>
<div class="ngtab">
<ul ngbNav #navColor="ngbNav" class="nav-pills" (navChange)="changeNavbarFontColor($event)">
<li [ngbNavItem]="1">
<a ngbNavLink id="semi-dark">Semi Dark</a>
<ng-template ngbNavContent class="px-1" >
<div class="row">
<div class="col-6">
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-sdark-clr" checked class="custom-control-input bg-default"
(click)="setColor('bg-default')" id="opt-default">
<label class="custom-control-label" (click)="setColor('bg-default')"
for="opt-default">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-sdark-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-primary')" id="opt-primary">
<label class="custom-control-label" (click)="setColor('bg-primary')"
for="opt-primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-sdark-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-danger')" id="opt-danger">
<label class="custom-control-label" (click)="setColor('bg-danger')"
for="opt-danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-sdark-clr" class="custom-control-input bg-success"
(click)="setColor('bg-success')" id="opt-success">
<label class="custom-control-label" (click)="setColor('bg-success')"
for="opt-success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-sdark-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-blue')" id="opt-blue">
<label class="custom-control-label" (click)="setColor('bg-blue')" for="opt-blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-sdark-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-cyan')" id="opt-cyan">
<label class="custom-control-label" (click)="setColor('bg-cyan')" for="opt-cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-sdark-clr" class="custom-control-input bg-pink"
(click)="setColor('bg-pink')" id="opt-pink">
<label class="custom-control-label" (click)="setColor('bg-pink')" for="opt-pink">Pink</label>
</div>
</div>
</div>
</ng-template>
</li>
<li [ngbNavItem] ="2" >
<a ngbNavLink id="semi-light">Semi Light</a>
<ng-template ngbNavContent>
<div class="row">
<div class="col-6">
<h6>Solid</h6>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-blue-grey')" id="default">
<label class="custom-control-label" (click)="setColor('bg-blue-grey')"
for="default">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-primary')" id="primary">
<label class="custom-control-label" (click)="setColor('bg-primary')" for="primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-danger')" id="danger">
<label class="custom-control-label" (click)="setColor('bg-danger')" for="danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-success"
(click)="setColor('bg-success')" id="success">
<label class="custom-control-label" (click)="setColor('bg-success')" for="success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-blue')" id="blue">
<label class="custom-control-label" (click)="setColor('bg-blue')" for="blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-cyan')" id="cyan">
<label class="custom-control-label" (click)="setColor('bg-cyan')" for="cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-pink"
(click)="setColor('bg-pink')" id="pink">
<label class="custom-control-label" (click)="setColor('bg-pink')" for="pink">Pink</label>
</div>
</div>
<div class="col-6">
<h6>Gradient</h6>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-gradient-x-grey-blue')" id="bg-gradient-x-grey-blue">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-grey-blue')"
for="bg-gradient-x-grey-blue">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-gradient-x-primary')" id="bg-gradient-x-primary">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-primary')"
for="bg-gradient-x-primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-gradient-x-danger')" id="bg-gradient-x-danger">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-danger')"
for="bg-gradient-x-danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-success"
(click)="setColor('bg-gradient-x-success')" id="bg-gradient-x-success">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-success')"
for="bg-gradient-x-success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-gradient-x-blue')" id="bg-gradient-x-blue">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-blue')"
for="bg-gradient-x-blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-gradient-x-cyan')" id="bg-gradient-x-cyan">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-cyan')"
for="bg-gradient-x-cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-pink"
(click)="setColor('bg-gradient-x-pink')" id="bg-gradient-x-pink">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-pink')"
for="bg-gradient-x-pink">Pink</label>
</div>
</div>
</div>
</ng-template>
</li>
<li [ngbNavItem] = "3" >
<a ngbNavLink id="dark">Dark</a>
<ng-template ngbNavContent>
<div class="row">
<div class="col-6">
<h3>Solid</h3>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-blue-grey')" id="default">
<label class="custom-control-label" (click)="setColor('bg-blue-grey')"
for="default">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-primary')" id="primary">
<label class="custom-control-label" (click)="setColor('bg-primary')" for="primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-danger')" id="danger">
<label class="custom-control-label" (click)="setColor('bg-danger')" for="danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-success"
(click)="setColor('bg-success')" id="success">
<label class="custom-control-label" (click)="setColor('bg-success')" for="success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-blue')" id="blue">
<label class="custom-control-label" (click)="setColor('bg-blue')" for="blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-cyan')" id="cyan">
<label class="custom-control-label" (click)="setColor('bg-cyan')" for="cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-pink"
(click)="setColor('bg-pink')" id="pink">
<label class="custom-control-label" (click)="setColor('bg-pink')" for="pink">Pink</label>
</div>
</div>
<div class="col-6">
<h3>Gradient</h3>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-gradient-x-grey-blue')" id="bg-gradient-x-grey-blue">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-grey-blue')"
for="bg-gradient-x-grey-blue">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-gradient-x-primary')" id="bg-gradient-x-primary">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-primary')"
for="bg-gradient-x-primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-gradient-x-danger')" id="bg-gradient-x-danger">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-danger')"
for="bg-gradient-x-danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-success"
(click)="setColor('bg-gradient-x-success')" id="bg-gradient-x-success">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-success')"
for="bg-gradient-x-success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-gradient-x-blue')" id="bg-gradient-x-blue">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-blue')"
for="bg-gradient-x-blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-gradient-x-cyan')" id="bg-gradient-x-cyan">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-cyan')"
for="bg-gradient-x-cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-pink"
id="bg-gradient-x-pink" (click)="setColor('bg-gradient-x-pink')">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-pink')"
for="bg-gradient-x-pink">Pink</label>
</div>
</div>
</div>
</ng-template>
</li>
<li [ngbNavItem] ="4">
<a ngbNavLink id="light">Light</a>
<ng-template ngbNavContent>
<div class="tab-pane" id="clrOpt4" aria-labelledby="color-opt-4">
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-blue-grey bg-lighten-4')" id="light-blue-grey">
<label class="custom-control-label" (click)="setColor('bg-blue-grey bg-lighten-4')"
for="light-blue-grey">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-primary bg-lighten-4')" id="light-primary">
<label class="custom-control-label" (click)="setColor('bg-primary bg-lighten-4')"
for="light-primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-danger bg-lighten-4')" id="light-danger">
<label class="custom-control-label" (click)="setColor('bg-danger bg-lighten-4')"
for="light-danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-success"
(click)="setColor('bg-success bg-lighten-4')" id="light-success">
<label class="custom-control-label" (click)="setColor('bg-success bg-lighten-4')"
for="light-success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-blue bg-lighten-4')" id="light-blue">
<label class="custom-control-label" (click)="setColor('bg-blue bg-lighten-4')"
for="light-blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-cyan bg-lighten-4')" id="light-cyan">
<label class="custom-control-label" (click)="setColor('bg-cyan bg-lighten-4')"
for="light-cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-pink"
(click)="setColor('bg-pink bg-lighten-4')" id="light-pink">
<label class="custom-control-label" (click)="setColor('bg-pink bg-lighten-4')"
for="light-pink">Pink</label>
</div>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="navColor"></div>
</div>
</div>
</ul>

25
src/app/_layout/customizer/customizer.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { CustomizerComponent } from './customizer.component';
describe('CustomizerComponent', () => {
let component: CustomizerComponent;
let fixture: ComponentFixture<CustomizerComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ CustomizerComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CustomizerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

386
src/app/_layout/customizer/customizer.component.ts Normal file
View File

@@ -0,0 +1,386 @@
import { Component, OnInit, Renderer2, Inject, ViewChild, HostListener } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { NavbarService } from 'src/app/_services/navbar.service';
import { ThemeSettingsService } from '../settings/theme-settings.service';
import { MenuSettingsService } from '../settings/menu-settings.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
import { AppConstants } from 'src/app/_helpers/app.constants';
declare var require: any;
const colors = require('../../../assets/data/customizer/customizerColor.json');
@Component({
selector: 'app-customizer',
templateUrl: './customizer.component.html',
styleUrls: ['./customizer.component.css']
})
export class CustomizerComponent implements OnInit {
private _unsubscribeAll: Subject<any>;
private _unsubscribeAllMenu: Subject<any>;
public _themeCustomizerConfig: any;
public _menuCustomizerConfig: any;
public _themeSettingsConfig: any;
public selectColorClass: string;
public activebutton: any;
public isCollapsedMenu = false;
public isfixChecked = false;
public isboxChecked = false;
public isStaticLayout = false;
public isRightSideIcons = false;
public isBorderedNavigation = false;
public isFlippedNavigation = false;
public isCollapsibleNavigation = false;
public isStaticNavigation = false;
public isStaticTop = false;
public config: PerfectScrollbarConfigInterface = { wheelPropagation: false };
collapsed = true;
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
constructor(
private _renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
private navbarService: NavbarService,
private _themeSettingsService: ThemeSettingsService,
private _menuSettingsService: MenuSettingsService
) {
this._unsubscribeAll = new Subject();
this._unsubscribeAllMenu = new Subject();
}
ngOnInit() {
// Subscribe to config changes
this._themeSettingsService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this._themeCustomizerConfig = config;
});
this._menuSettingsService.config
.pipe(takeUntil(this._unsubscribeAllMenu))
.subscribe((config) => {
this._menuCustomizerConfig = config;
});
this._themeSettingsService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this._themeSettingsConfig = config;
});
}
toggleCustomizer(event) {
const element = document.getElementById('customizer');
if (element && element.classList.contains('open')) {
this._renderer.removeClass(element, 'open');
} else {
this._renderer.addClass(element, 'open');
}
}
setLayout(layout, e) {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
const mainMenu = document.getElementsByClassName('main-menu');
if (layout === 'static' && e.currentTarget.checked === true) {
this.staticLayout(e);
} else if (layout === 'static' && e.currentTarget.checked === false) {
this._themeSettingsConfig.layout.pattern = '';
this._renderer.removeClass(headerNavbar.item(0), 'navbar-static-top');
this._renderer.removeClass(footer, 'footer-static');
this._renderer.addClass(headerNavbar.item(0), 'fixed-top');
this._renderer.addClass(document.body, 'fixed-navbar');
this._renderer.addClass(mainMenu.item(0), 'menu-fixed');
this.isStaticLayout = false;
}
}
toggleFixMenu(e) {
const toggleIcon = document.getElementsByClassName('toggle-icon');
if (this.document.body.classList.contains('menu-expanded') && e.currentTarget.checked === true) {
this._themeCustomizerConfig.navbar = 'collapse';
// show the left aside menu
this.navbarService.setFixedMenu(false);
this.document.body.classList.remove('menu-expanded');
this.document.body.classList.add('menu-collapsed');
// Change switch icon
this._renderer.removeClass(toggleIcon.item(0), 'ft-toggle-right');
this._renderer.addClass(toggleIcon.item(0), 'ft-toggle-left');
this.isCollapsedMenu = true;
} else {
this._themeCustomizerConfig.navbar = 'expand';
this.navbarService.setFixedMenu(true);
this.document.body.classList.remove('menu-collapsed');
this.document.body.classList.add('menu-expanded');
// Change switch icon
this._renderer.removeClass(toggleIcon.item(0), 'ft-toggle-left');
this._renderer.addClass(toggleIcon.item(0), 'ft-toggle-right');
this.isCollapsedMenu = false;
}
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
this.resetOpenMenu();
}
resetOpenMenu() {
for (let i = 0; i < this._menuCustomizerConfig.vertical_menu.items.length; i++) {
const menu = this._menuCustomizerConfig.vertical_menu.items[i];
if (!menu.submenu) {
menu['isOpen'] = false;
menu['isActive'] = false;
menu['hover'] = false;
} else if (menu.submenu) {
for (let j = 0; j < menu.submenu.items.length; j++) {
menu['isOpen'] = false;
menu['isActive'] = false;
menu['hover'] = false;
menu.submenu.items[j]['isOpen'] = false;
}
}
}
}
changeNavbarFontColor($event: NgbNavChangeEvent) {
const headerElement = document.getElementsByClassName('header-navbar');
if ($event.nextId === 1) {
console.log('hgdfh');
this._renderer.removeClass(headerElement.item(0), 'navbar-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
this._renderer.removeClass(headerElement.item(0), 'navbar-light');
this._renderer.addClass(headerElement.item(0), 'navbar-semi-dark');
this._themeCustomizerConfig.colorTheme = 'semi-dark';
} else if ($event.nextId === 2) {
this._renderer.removeClass(headerElement.item(0), 'navbar-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-light');
this._renderer.addClass(headerElement.item(0), 'navbar-semi-light');
this._themeCustomizerConfig.colorTheme = 'semi-light';
} else if ($event.nextId === 3) {
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-light');
this._renderer.addClass(headerElement.item(0), 'navbar-dark');
this._themeCustomizerConfig.colorTheme = 'dark';
} else if ($event.nextId === 4) {
this._renderer.removeClass(headerElement.item(0), 'navbar-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
this._renderer.addClass(headerElement.item(0), 'navbar-light');
this._themeCustomizerConfig.colorTheme = 'light';
}
this._themeSettingsService.config = {
color: ''
};
}
setMenuColor(colorClass, event) {
const darkMenuButton = document.getElementById('dark-menu');
const lightMenuButton = document.getElementById('light-menu');
if (event.currentTarget.className === 'btn btn-outline-info _dark') {
this._renderer.removeClass(lightMenuButton, 'active');
this._renderer.addClass(darkMenuButton, 'active');
} else if (event.currentTarget.className === 'btn btn-outline-info _light') {
this._renderer.removeClass(darkMenuButton, 'active');
this._renderer.addClass(lightMenuButton, 'active');
}
this._themeSettingsService.config = {
menuColor: colorClass, // light-menu, dark-menu
};
}
setNavigation(navigationClass, event) {
const navigationElement = document.getElementById('main-menu');
const element = document.getElementById('customizer');
if (event.target.checked === true && navigationClass !== 'menu-collapsible') {
this._themeSettingsService.config = {
navigation: navigationClass
};
if (navigationClass === 'menu-flipped') {
this._renderer.removeClass(element, 'open');
} else if (navigationClass === 'menu-static') {
this._renderer.removeClass(navigationElement, 'menu-fixed');
}
} else if (event.target.checked === false && navigationClass !== 'menu-collapsible') {
this._themeSettingsConfig.navigation = AppConstants.NAVIGATION_TYPE_ACCORDATION;
this._renderer.removeClass(navigationElement, navigationClass);
this._renderer.removeClass(document.body, navigationClass);
if (navigationClass === 'menu-static') {
this._renderer.addClass(navigationElement, 'menu-fixed');
}
}
if (event.target.checked === true && navigationClass === 'menu-collapsible') {
this._themeSettingsConfig.navigation = AppConstants.NAVIGATION_TYPE_ACCORDATION;
this._renderer.removeClass(navigationElement, navigationClass);
} else if (event.target.checked === false && navigationClass === 'menu-collapsible') {
this._themeSettingsService.config = {
navigation: navigationClass
};
}
if (navigationClass === 'menu-icon-right' && event.currentTarget.checked === true) {
this.isRightSideIcons = true;
} else if (navigationClass === 'menu-icon-right' && event.currentTarget.checked === false) {
this.isRightSideIcons = false;
}
if (navigationClass === 'menu-bordered' && event.currentTarget.checked === true) {
this.isBorderedNavigation = true;
} else if (navigationClass === 'menu-bordered' && event.currentTarget.checked === false) {
this.isBorderedNavigation = false;
}
if (navigationClass === 'menu-flipped' && event.currentTarget.checked === true) {
this.isFlippedNavigation = true;
} else if (navigationClass === 'menu-flipped' && event.currentTarget.checked === false) {
this.isFlippedNavigation = false;
}
if (navigationClass === 'menu-collapsible' && event.currentTarget.checked === true) {
this.isCollapsibleNavigation = true;
} else if (navigationClass === 'menu-collapsible' && event.currentTarget.checked === false) {
this.isCollapsibleNavigation = false;
}
if (navigationClass === 'menu-static' && event.currentTarget.checked === true) {
this.isStaticNavigation = true;
} else if (navigationClass === 'menu-static' && event.currentTarget.checked === false) {
this.isStaticNavigation = false;
}
}
setNavbar(event) {
const navbarElement = document.getElementsByClassName('header-navbar');
const navigationElement = document.getElementById('main-menu');
if (event.target.checked === true) {
this._renderer.removeClass(document.body, 'fixed-navbar');
this._renderer.removeClass(navbarElement.item(0), 'fixed-top');
this._renderer.removeClass(navigationElement, 'menu-fixed');
this._renderer.addClass(navbarElement.item(0), 'navbar-static-top');
this._renderer.addClass(navigationElement, 'menu-static');
this.isStaticTop = true;
} else if (event.target.checked === false) {
this._renderer.removeClass(navbarElement.item(0), 'navbar-static-top');
this._renderer.removeClass(navigationElement, 'menu-static');
this._renderer.addClass(document.body, 'fixed-navbar');
this._renderer.addClass(navbarElement.item(0), 'fixed-top');
this._renderer.addClass(navigationElement, 'menu-fixed');
this.isStaticTop = false;
}
}
setColor(colorClass) {
for (let i = 0; i <= colors.colorArray.length; i++) {
if (colorClass === colors.colorArray[i].cssClass) {
this.selectColorClass = colorClass;
break;
}
}
this._themeSettingsService.config = {
color: this.selectColorClass
};
}
toggleLayout(layout) {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
if (layout === 'boxed' && this.isboxChecked === false) {
this.boxedLayout();
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
} else if (layout === 'boxed' && this.isboxChecked === true) {
this._renderer.removeClass(headerNavbar.item(0), 'container');
this._renderer.removeClass(headerNavbar.item(0), 'boxed-layout');
this._renderer.removeClass(document.body, 'boxed-layout');
this._renderer.removeClass(document.body, 'container');
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
this._themeSettingsConfig.layout.pattern = '';
} else if (layout === 'fixed' && this.isfixChecked === false) {
this.fixedLayout();
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
} else if (layout === 'fixed' && this.isfixChecked === true) {
this._renderer.removeClass(footer, 'fixed-bottom');
this._themeSettingsConfig.layout.pattern = '';
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
}
}
fixedLayout() {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
this._renderer.removeClass(headerNavbar.item(0), 'container');
this._renderer.removeClass(headerNavbar.item(0), 'boxed-layout');
this._renderer.removeClass(document.body, 'boxed-layout');
this._renderer.removeClass(document.body, 'container');
this._renderer.addClass(footer, 'fixed-bottom');
if (this.isStaticLayout === true) {
this._renderer.addClass(headerNavbar.item(0), 'fixed-top');
this._renderer.addClass(document.body, 'fixed-navbar');
this._renderer.removeClass(footer, 'fixed-bottom');
}
this.isfixChecked = true;
this.isboxChecked = false;
this._themeSettingsConfig.layout.pattern = 'fixed';
}
boxedLayout() {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
this._renderer.removeClass(footer, 'fixed-bottom');
this._renderer.addClass(headerNavbar.item(0), 'container');
this._renderer.addClass(headerNavbar.item(0), 'boxed-layout');
this._renderer.addClass(headerNavbar.item(0), 'fixed-top');
this._renderer.addClass(document.body, 'boxed-layout');
this._renderer.addClass(document.body, 'container');
if (this.isStaticLayout === true) {
this._renderer.removeClass(headerNavbar.item(0), 'fixed-top');
this._renderer.removeClass(document.body, 'fixed-navbar');
}
this.isboxChecked = true;
this.isfixChecked = false;
this._themeSettingsConfig.layout.pattern = 'boxed';
}
staticLayout(e) {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
const mainMenu = document.getElementsByClassName('main-menu');
this._renderer.removeClass(document.body, 'fixed-navbar');
this._renderer.removeClass(headerNavbar.item(0), 'fixed-top');
this._renderer.removeClass(mainMenu.item(0), 'menu-fixed');
this._renderer.addClass(headerNavbar.item(0), 'navbar-static-top');
this._renderer.addClass(footer, 'footer-static');
this._renderer.removeClass(footer, 'fixed-bottom');
this.isStaticLayout = true;
this._themeSettingsConfig.layout.pattern = 'static';
}
@HostListener('window:resize', ['$event'])
onResize() {
if (this.document.body.classList.contains('menu-expanded')) {
this.collapsed = false;
} else {
this.collapsed = true;
}
}
}

19
src/app/_layout/customizer/horizontal-customizer/horizontal-customizer.component.css Normal file
View File

@@ -0,0 +1,19 @@
.tabsborder{
border-bottom: none !important;
}
.h6, h6 {
font-size: 1rem;
}
:host ::ng-deep .tab-content{
padding: 1rem;
}
:host ::ng-deep .layout_space{
padding: 0%;
}
:host ::ng-deep .nav.nav-tabs.nav-underline .nav-item a.nav-link {
padding: 0.5rem 0rem;
}

226
src/app/_layout/customizer/horizontal-customizer/horizontal-customizer.component.html Normal file
View File

@@ -0,0 +1,226 @@
<div class="customizer border-left-blue-grey border-left-lighten-4 d-none d-xl-block" id="customizer">
<a [routerLink]="" class="customizer-close" (click)="toggleCustomizer($event)"><i class="feather ft-x font-medium-3"></i></a>
<a [routerLink]="" class="customizer-toggle bg-danger box-shadow-3" (click)="toggleCustomizer($event)"><i
class="feather ft-settings font-medium-3 spinner white"></i></a>
<div class="customizer-content p-2" fxFlex="auto" [perfectScrollbar]="config">
<h4 class="text-uppercase mb-0">Theme Customizer</h4>
<hr>
<p>Customize & Preview in Real Time</p>
<h5 class="mt-1 mb-1 text-bold-500">Menu Color Options</h5>
<div class="form-group">
<!-- Outline Button group -->
<div class="btn-group customizer-sidebar-options" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-info _light active" (click)="setMenuColor($event)"
data-sidebar="navbar-light" id="light-menu">Light Menu
</button>
<button type="button" class="btn btn-outline-info _dark" (click)="setMenuColor($event)"
data-sidebar="navbar-dark" id="dark-menu">Dark Menu
</button>
</div>
</div>
<hr>
<h5 class="mt-1 text-bold-500">Layout Options</h5>
<ul class="nav nav-tabs nav-underline nav-justified layout-options tabsborder">
<div class="col-lg-12 layout_space">
<div class="ngtab">
<ul ngbNav #nav="ngbNav" class="nav-pills">
<li ngbNavItem>
<a ngbNavLink>Layout</a>
<ng-template ngbNavContent>
<div role="tabpanel" class="tab-panel active px-1 pt-1" id="tabIcon21" aria-expanded="true"
aria-labelledby="baseIcon-tab21">
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" (change)="toggleFixMenu($event)"
[(ngModel)]="isCollapsedMenu" name="collapsed-sidebar" id="collapsed-sidebar">
<label class="custom-control-label" for="collapsed-sidebar">Collapsed Menu</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="fixed-layout" id="fixed-layout"
[(ngModel)]="isfixChecked" (ngModelChange)="toggleLayout('fixed')">
<label class="custom-control-label" for="fixed-layout">Fixed Layout</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" [(ngModel)]="isboxChecked"
(ngModelChange)="toggleLayout('boxed')" name="boxed-layout" id="boxed-layout">
<label class="custom-control-label" for="boxed-layout">Boxed Layout</label>
</div>
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" (change)="setLayout('static',$event)"
[(ngModel)]="isStaticLayout" name="static-layout" id="static-layout">
<label class="custom-control-label" for="static-layout">Static Layout</label>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Navigation</a>
<ng-template ngbNavContent>
<div class="tab-panel px-1 pt-1" id="tabIcon22" aria-labelledby="baseIcon-tab22">
<div class="custom-control custom-checkbox mb-1">
<input type="checkbox" class="custom-control-input" name="right-side-icons"
[(ngModel)]="isRightSideIcons" (click)="setNavigation('navbar-icon-right',$event)"
id="right-side-icons">
<label class="custom-control-label" for="right-side-icons">Right Side Icons</label>
</div>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</div>
</ul>
<hr>
<h5 class="mt-1 text-bold-500">Navigation Color Options</h5>
<ul class="nav nav-tabs nav-underline nav-justified color-options tabsborder">
<div class="col-lg-12 layout_space">
<div class="ngtab">
<ul ngbNav #navColor="ngbNav" class="nav-pills" (navChange)="changeNavbarFontColor($event)">
<li [ngbNavItem]="1">
<a ngbNavLink id="dark">Dark</a>
<ng-template ngbNavContent class="px-1" >
<div class="row">
<div class="col-6">
<h3>Solid</h3>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-blue-grey')" id="default">
<label class="custom-control-label" (click)="setColor('bg-blue-grey')"
for="default">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-primary')" id="primary">
<label class="custom-control-label" (click)="setColor('bg-primary')" for="primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-danger')" id="danger">
<label class="custom-control-label" (click)="setColor('bg-danger')" for="danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-success"
(click)="setColor('bg-success')" id="success">
<label class="custom-control-label" (click)="setColor('bg-success')" for="success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-blue')" id="blue">
<label class="custom-control-label" (click)="setColor('bg-blue')" for="blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-cyan')" id="cyan">
<label class="custom-control-label" (click)="setColor('bg-cyan')" for="cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-pink"
(click)="setColor('bg-pink')" id="pink">
<label class="custom-control-label" (click)="setColor('bg-pink')" for="pink">Pink</label>
</div>
</div>
<div class="col-6">
<h3>Gradient</h3>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-gradient-x-grey-blue')" id="bg-gradient-x-grey-blue">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-grey-blue')"
for="bg-gradient-x-grey-blue">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-gradient-x-primary')" id="bg-gradient-x-primary">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-primary')"
for="bg-gradient-x-primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-gradient-x-danger')" id="bg-gradient-x-danger">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-danger')"
for="bg-gradient-x-danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-success"
(click)="setColor('bg-gradient-x-success')" id="bg-gradient-x-success">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-success')"
for="bg-gradient-x-success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-gradient-x-blue')" id="bg-gradient-x-blue">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-blue')"
for="bg-gradient-x-blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-gradient-x-cyan')" id="bg-gradient-x-cyan">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-cyan')"
for="bg-gradient-x-cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-slight-clr" class="custom-control-input bg-pink"
id="bg-gradient-x-pink" (click)="setColor('bg-gradient-x-pink')">
<label class="custom-control-label" (click)="setColor('bg-gradient-x-pink')"
for="bg-gradient-x-pink">Pink</label>
</div>
</div>
</div>
</ng-template>
</li>
<li [ngbNavItem] ="2" >
<a ngbNavLink id="light">Light</a>
<ng-template ngbNavContent>
<div class="tab-pane" id="clrOpt4" aria-labelledby="color-opt-4">
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-blue-grey"
(click)="setColor('bg-blue-grey bg-lighten-4')" id="light-blue-grey">
<label class="custom-control-label" (click)="setColor('bg-blue-grey bg-lighten-4')"
for="light-blue-grey">Default</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-primary"
(click)="setColor('bg-primary bg-lighten-4')" id="light-primary">
<label class="custom-control-label" (click)="setColor('bg-primary bg-lighten-4')"
for="light-primary">Primary</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-danger"
(click)="setColor('bg-danger bg-lighten-4')" id="light-danger">
<label class="custom-control-label" (click)="setColor('bg-danger bg-lighten-4')"
for="light-danger">Danger</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-success"
(click)="setColor('bg-success bg-lighten-4')" id="light-success">
<label class="custom-control-label" (click)="setColor('bg-success bg-lighten-4')"
for="light-success">Success</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-blue"
(click)="setColor('bg-blue bg-lighten-4')" id="light-blue">
<label class="custom-control-label" (click)="setColor('bg-blue bg-lighten-4')"
for="light-blue">Blue</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-cyan"
(click)="setColor('bg-cyan bg-lighten-4')" id="light-cyan">
<label class="custom-control-label" (click)="setColor('bg-cyan bg-lighten-4')"
for="light-cyan">Cyan</label>
</div>
<div class="custom-control custom-radio mb-1">
<input type="radio" name="nav-light-clr" class="custom-control-input bg-pink"
(click)="setColor('bg-pink bg-lighten-4')" id="light-pink">
<label class="custom-control-label" (click)="setColor('bg-pink bg-lighten-4')"
for="light-pink">Pink</label>
</div>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="navColor"></div>
</div>
</div>
</ul>
</div>
</div>

25
src/app/_layout/customizer/horizontal-customizer/horizontal-customizer.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { HorizontalCustomizerComponent } from './horizontal-customizer.component';
describe('HorizontalCustomizerComponent', () => {
let component: HorizontalCustomizerComponent;
let fixture: ComponentFixture<HorizontalCustomizerComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ HorizontalCustomizerComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HorizontalCustomizerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

273
src/app/_layout/customizer/horizontal-customizer/horizontal-customizer.component.ts Normal file
View File

@@ -0,0 +1,273 @@
import { Component, OnInit, Renderer2, Inject, ViewChild } from '@angular/core';
import { ThemeSettingsService } from '../../settings/theme-settings.service';
import { DOCUMENT } from '@angular/common';
import { NavbarService } from 'src/app/_services/navbar.service';
import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
import { MenuSettingsService } from '../../settings/menu-settings.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { AppConstants } from 'src/app/_helpers/app.constants';
declare var require: any;
const colors = require('../../../../assets/data/customizer/customizerColor.json');
@Component({
selector: 'app-horizontal-customizer',
templateUrl: './horizontal-customizer.component.html',
styleUrls: ['./horizontal-customizer.component.css']
})
export class HorizontalCustomizerComponent implements OnInit {
private _unsubscribeAll: Subject<any>;
public _themeCustomizerConfig: any;
public _menuCustomizerConfig: any;
private _themeSettingsConfig: any;
public selectColorClass: string;
public isCollapsedMenu = false;
public isfixChecked = false;
public isboxChecked = false;
public isStaticLayout = false;
public isRightSideIcons = false;
activeIdString = 'light';
public config: PerfectScrollbarConfigInterface = { wheelPropagation: false };
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
constructor(private _renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
private navbarService: NavbarService,
private _themeSettingsService: ThemeSettingsService,
private _menuSettingsService: MenuSettingsService, ) {
this._unsubscribeAll = new Subject();
}
ngOnInit() {
this._themeSettingsService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this._themeCustomizerConfig = config;
});
this._themeSettingsService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this._themeSettingsConfig = config;
});
}
toggleCustomizer(event) {
const element = document.getElementById('customizer');
if (element && element.classList.contains('open')) {
this._renderer.removeClass(element, 'open');
} else {
this._renderer.addClass(element, 'open');
}
}
changeNavbarFontColor($event: NgbNavChangeEvent) {
const headerElement = document.getElementsByClassName('top-header');
if ($event.nextId === 1) {
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-light');
this._renderer.removeClass(headerElement.item(0), 'navbar-shadow');
this._renderer.addClass(headerElement.item(0), 'navbar-dark');
} else if ($event.nextId === 2) {
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
this._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
this._renderer.removeClass(headerElement.item(0), 'navbar-dark');
this._renderer.addClass(headerElement.item(0), 'navbar-light');
this._renderer.addClass(headerElement.item(0), 'navbar-shadow');
}
this._themeSettingsService.config = {
color: ''
};
}
setColor(colorClass) {
for (let i = 0; i <= colors.colorArray.length; i++) {
if (colorClass === colors.colorArray[i].cssClass) {
this.selectColorClass = colorClass;
break;
}
}
this._themeSettingsService.config = {
color: this.selectColorClass
};
}
setMenuColor(e) {
const darkMenuButton = document.getElementById('dark-menu');
const lightMenuButton = document.getElementById('light-menu');
const menuHeaderElement = document.getElementById('menu-header');
if (e.currentTarget.className === 'btn btn-outline-info _dark') {
this._renderer.removeClass(lightMenuButton, 'active');
this._renderer.removeClass(menuHeaderElement, 'navbar-light');
this._renderer.addClass(darkMenuButton, 'active');
this._renderer.addClass(menuHeaderElement, 'navbar-dark');
} else if (e.currentTarget.className === 'btn btn-outline-info _light') {
this._renderer.removeClass(menuHeaderElement, 'navbar-dark');
this._renderer.removeClass(darkMenuButton, 'active');
this._renderer.addClass(lightMenuButton, 'active');
this._renderer.addClass(menuHeaderElement, 'navbar-light');
}
// this._themeSettingsService.config = {
// menuColor: colorClass, // menu-dark, menu-light
// };
}
toggleFixMenu(e) {
if (this.document.body.classList.contains('menu-expanded') && e.currentTarget.checked === true) {
// show the left aside menu
this.navbarService.setFixedMenu(false);
this.document.body.classList.remove('menu-expanded');
this.document.body.classList.add('menu-collapsed');
// Change switch icon
e.srcElement.classList.remove('ft-toggle-right');
e.srcElement.classList.add('ft-toggle-left');
this.isCollapsedMenu = true;
} else {
this.navbarService.setFixedMenu(true);
this.document.body.classList.remove('menu-collapsed');
this.document.body.classList.add('menu-expanded');
// Change switch icon
e.srcElement.classList.remove('ft-toggle-left');
e.srcElement.classList.add('ft-toggle-right');
this.isCollapsedMenu = false;
}
}
setLayout(layout, e) {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
const menuHeader = document.getElementById('menu-header');
const isSticky = document.getElementsByClassName('sticky-wrapper');
const element = document.getElementById('sticky-wrapper');
if (e.currentTarget.checked === true && layout === 'static') {
// this._renderer.removeClass(headerNavbar.item(0), 'fixed-top');
this._renderer.addClass(headerNavbar.item(0), 'navbar-static-top');
this._renderer.addClass(menuHeader, 'navbar-static');
this._renderer.addClass(footer, 'footer-static');
this.isStaticLayout = true;
this._themeSettingsConfig.layout.pattern = 'static';
element.classList.add('is-static');
if (this.isboxChecked === false ) {
this._renderer.removeClass(footer, 'fixed-bottom');
}
} else {
this._themeSettingsConfig.layout.pattern = '';
this._renderer.removeClass(headerNavbar.item(0), 'navbar-static-top');
this._renderer.removeClass(footer, 'footer-static');
this._renderer.removeClass(menuHeader, 'navbar-static');
this._renderer.removeClass(isSticky.item(0), 'is-static');
this.isStaticLayout = false;
if (this.isboxChecked === true) {
this.boxedLayout();
}
if (this.isfixChecked === true) {
this.fixedLayout();
}
}
}
setNavigation(navigationClass, event) {
const navigationElement = document.getElementById('menu-header');
if (event.target.checked === true) {
this._themeSettingsService.config = {
navigation: navigationClass,
};
} else if (event.target.checked === false) {
this._renderer.removeClass(navigationElement, navigationClass);
this._renderer.removeClass(document.body, navigationClass);
}
if (navigationClass === 'menu-icon-right' && event.currentTarget.checked === true) {
this.isRightSideIcons = true;
} else if (navigationClass === 'menu-icon-right' && event.currentTarget.checked === false) {
this.isRightSideIcons = false;
}
}
toggleLayout(layout) {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
const element = document.getElementById('sticky-wrapper');
if (layout === 'boxed' && this.isboxChecked === true) {
this.boxedLayout();
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
} else if (layout === 'boxed' && this.isboxChecked === false) {
this._renderer.removeClass(headerNavbar.item(0), 'container');
this._renderer.removeClass(headerNavbar.item(0), 'boxed-layout');
this._renderer.removeClass(document.body, 'boxed-layout');
this._renderer.removeClass(document.body, 'container');
element.classList.remove('container');
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
this._themeSettingsConfig.layout.pattern = '';
} else if (layout === 'fixed' && this.isfixChecked === true) {
this.fixedLayout();
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
} else if (layout === 'fixed' && this.isfixChecked === false) {
this._renderer.removeClass(footer, 'fixed-bottom');
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
this._themeSettingsConfig.layout.pattern = '';
}
}
fixedLayout() {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
const menuHeader = document.getElementById('menu-header');
const element = document.getElementById('sticky-wrapper');
this._renderer.addClass(footer, 'fixed-bottom');
this._renderer.removeClass(document.body, 'boxed-layout');
this._renderer.removeClass(headerNavbar.item(0), 'boxed-layout');
this._renderer.removeClass(headerNavbar.item(0), 'container');
this._renderer.removeClass(document.body, 'container');
element.classList.remove('container');
if (this.isStaticLayout === true) {
this._renderer.removeClass(headerNavbar.item(0), 'fixed-top');
this._renderer.removeClass(footer, 'fixed-bottom');
this._renderer.addClass(headerNavbar.item(0), 'navbar-static-top');
this._renderer.addClass(menuHeader, 'navbar-static');
this._renderer.addClass(footer, 'footer-static');
}
this.isfixChecked = true;
this.isboxChecked = false;
this._themeSettingsConfig.layout.pattern = 'fixed';
}
boxedLayout() {
const footer = document.getElementById('footer');
const headerNavbar = document.getElementsByClassName('header-navbar');
const menuHeader = document.getElementById('menu-header');
const element = document.getElementById('sticky-wrapper');
this._renderer.removeClass(footer, 'fixed-bottom');
this._renderer.addClass(headerNavbar.item(0), 'container');
this._renderer.addClass(headerNavbar.item(0), 'boxed-layout');
this._renderer.addClass(document.body, 'boxed-layout');
this._renderer.addClass(document.body, 'container');
element.classList.add('container');
if (this.isStaticLayout === true) {
this._renderer.removeClass(headerNavbar.item(0), 'fixed-top');
this._renderer.addClass(headerNavbar.item(0), 'navbar-static-top');
this._renderer.addClass(menuHeader, 'navbar-static');
this._renderer.addClass(footer, 'footer-static');
}
this.isboxChecked = true;
this.isfixChecked = false;
this._themeSettingsConfig.layout.pattern = 'boxed';
}
}