sgh-navbar 0.0.36 → 0.0.37

package/src/lib/toolbar/sub-client-dialog/sub-client-dialog.component.scss

@@ -0,0 +1,40 @@
+.subclientlist-wrapper {
+
+  .subclientlist-header {
+    font-weight: 500;
+    line-height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 0;
+    margin: 0;
+  }
+
+  .subclientlist-body {
+    font-weight: 400;
+    text-align: center;
+    color: black;
+    padding: 0 15px 15px 15px;
+    .subclientlist-radiogrp {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+  }
+
+  .subclientlist-btns {
+    padding: 0;
+    min-height: 48px
+  }
+
+  button {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  .mat-mdc-dialog-actions .mat-mdc-button-base + .mat-mdc-button-base {
+    margin-left: 0
+  }
+}
+

package/src/lib/toolbar/sub-client-dialog/sub-client-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubClientDialogComponent } from './sub-client-dialog.component';
+
+describe('SubclientDialogComponent', () => {
+  let component: SubClientDialogComponent;
+  let fixture: ComponentFixture<SubClientDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SubClientDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SubClientDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/toolbar/sub-client-dialog/sub-client-dialog.component.ts

@@ -0,0 +1,41 @@
+import {Component, EventEmitter, Inject, Output} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ClientListItem, SubClientListItem} from "../toolbar-data";
+import {SghNavbarService} from "../../sgh-navbar.service";
+
+@Component({
+  selector: 'lib-subclient-dialog',
+  templateUrl: './sub-client-dialog.component.html',
+  styleUrls: ['./sub-client-dialog.component.scss']
+})
+export class SubClientDialogComponent {
+  client: ClientListItem;
+  subClientList: SubClientListItem[];
+  @Output() subClient = new EventEmitter<any>();
+  selectedSubClient: SubClientListItem;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<SubClientDialogComponent>, private sghNavbarService: SghNavbarService) {
+    this.client = data.client;
+    this.subClientList = data.client.subClientList;
+    // find the selected sub client
+    let selectedSubClientIndex = this.subClientList.findIndex((subClient) => subClient.checked == true);
+    this.selectedSubClient = this.subClientList[selectedSubClientIndex];
+  }
+
+  onSubClientSelect(item: SubClientListItem) {
+
+    // update the sub client list with newly selected values
+    this.subClientList.forEach((subClient) => {
+      if (subClient == item) {
+        subClient.checked = true
+      } else {
+        subClient.checked = false;
+      }
+    });
+    this.selectedSubClient = item;
+  }
+
+  onSelectBtnClick() {
+    this.dialogRef.close({data: {selectedSubClient: this.selectedSubClient}});
+  }
+}

package/src/lib/toolbar/toolbar-data.ts

@@ -0,0 +1,35 @@
+export class ToolbarData {
+  themeOptions: ThemeOption[]
+  clientList?: ClientListItem[]
+  bgColor: string;
+  img: string;
+  searchEnable?: boolean;
+  notificationEnable?: boolean;
+  profileEnable?: boolean;
+  settingsEnable?: boolean;
+  profileView?: boolean;
+  profileContent?: any;
+  clientConfigurationEnable?: boolean;
+  applicationConfigurationEnable?: boolean;
+  isThemeCollapsed?: boolean;
+  isNotifNavCollapsed?: boolean;
+}
+
+export class ThemeOption {
+  name: string;
+  value: string;
+  checked: boolean;
+}
+
+export class ClientListItem {
+  text: string;
+  value: string;
+  selected: boolean;
+  subClientList?: SubClientListItem[]
+}
+
+export class SubClientListItem {
+  text: string;
+  value: string;
+  checked: boolean
+}

package/src/lib/toolbar/toolbar.component.html

@@ -0,0 +1,79 @@
+<nav class="toolbar-main-wrapper" [style.background-color]="toolbarData.bgColor" id="toolBarWrapper">
+  <div class="logo-wrapper">
+    <img class="logo" [src]="toolbarData.img"/>
+  </div>
+  <div>
+    <button class="toggle-button" (click)="toggleSidebar()">
+      <i class="fa fa-lg fa-bars"></i>
+    </button>
+  </div>
+  <div class="search">
+    <div class="form" *ngIf="toolbarData.searchEnable">
+      <input type="text" name="text" autocomplete="off" required/>
+      <label class="label-name">
+    <span class="content-name">
+      Search
+    </span>
+      </label>
+      <button class="search-wrapper">
+        <i class="fa fa-search"></i>
+      </button>
+    </div>
+  </div>
+  <div *ngIf="toolbarData.notificationEnable" class="icon" id="bell" (click)="toggleNotificationList()">
+    <i class="fa fa-bell"></i>
+  </div>
+  <div *ngIf="toolbarData.profileEnable" class="icon" id="bell3" (click)="clickProfile()">
+    <i class="fa fa-user"></i>
+  </div>
+  <div *ngIf="toolbarData.settingsEnable" class="icon" id="bell2" [matMenuTriggerFor]="settingsMenu">
+    <i class="fa fa-gear"></i>
+  </div>
+</nav>
+
+<div *ngIf="toolbarData.profileView" class="notifications">
+  <div class="notifications-list-wrapper profile-list-wrapper">
+    <div class="notifications-list">
+      <div class="notifications-list-item">
+        <div [innerHTML]="toolbarData.profileContent"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!--Settings related menus start-->
+<mat-menu #settingsMenu="matMenu" xPosition="before">
+  <button mat-menu-item [matMenuTriggerFor]="appConfig" *ngIf="toolbarData.applicationConfigurationEnable">Application Settings</button>
+  <button mat-menu-item [matMenuTriggerFor]="clientConfig" *ngIf="toolbarData.clientConfigurationEnable" #clientMenuTrigger>Client Settings</button>
+</mat-menu>
+<mat-menu #appConfig="matMenu" xPosition="after">
+  <div *ngFor="let themeoption of toolbarData.themeOptions">
+    <button mat-menu-item class="radio" (click)="onRadioClick(themeoption.value)">
+      <input value="{{themeoption.value}}" name="radio" type="radio" checked [ngModel]="selected"
+             (ngModelChange)="setClass($event)">
+      <span>{{themeoption.name}}</span>
+    </button>
+  </div>
+</mat-menu>
+<mat-menu #clientConfig="matMenu" xPosition="after">
+  <div style="width: 250px" class="client-menu-wrapper">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm-12" (click)="$event.stopPropagation();">
+          <input type="text" class="search-input" placeholder="Search Client" [(ngModel)]="searchText"/>
+        </div>
+        <div class="col-sm-12">
+          <div class="mt-2 list-item-container">
+            <div class="list-item text-truncate" *ngFor="let item of toolbarData.clientList | search : searchText;let i = index"
+                 [ngClass]="{'client-selected': item.selected}"
+                 (click)="toggleSelect($event, item);" mat-ripple>{{item.text}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</mat-menu>
+
+<!--Settings related menus end-->
+
+<app-noftification-list *ngIf="toolbarData.isNotifNavCollapsed"></app-noftification-list>

package/src/lib/toolbar/toolbar.component.scss

@@ -0,0 +1,493 @@
+.toolbar-main-wrapper {
+  background: url('./assets/Synergen_Logo-Large2.png') repeat-x;
+  background-size: 730px;
+  background-position: 0 -85px;
+  position: relative;
+  box-shadow: 0 1px 0px -1px rgb(0 0 0 / 0%), 0px 1px 1px 0px rgb(0 0 0 / 20%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+  z-index: 2;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  background: #494553;
+  height: 60px;
+  position: relative;
+  box-shadow: 0 1px 0 -1px #0000, 0 1px 1px #0003, 0 1px 3px #0000001f;
+}
+
+.logo-wrapper {
+  width: 15%;
+}
+
+.icon {
+  cursor: pointer;
+  margin-right: 34px;
+  border-radius: 20px;
+  padding: 0;
+
+  i {
+    color: #005860 !important;
+  }
+
+}
+
+.icon span {
+  background: #f00;
+  padding: 7px;
+  border-radius: 50%;
+  color: #fff;
+  vertical-align: top;
+  margin-left: -25px
+}
+
+.icon img {
+  display: inline-block;
+  width: 26px;
+}
+
+.icon:hover {
+  background: rgb(0 0 0 / 4%) !IMPORTANT;
+}
+
+.search {
+  flex: 1;
+  margin-left: 50px;
+  color: #eee;
+  font-size: 20px;
+  font-family: monospace
+}
+
+
+.notifications h2 {
+  font-size: 14px;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  color: #999
+}
+
+.notifications h2 span {
+  color: #f00
+}
+
+.notifications-item {
+  display: flex;
+  border-bottom: 1px solid #eee;
+  padding: 6px 9px;
+  margin-bottom: 0;
+  cursor: pointer
+}
+
+.notifications-item:hover {
+  background-color: #eee
+}
+
+.notifications-item img {
+  display: block;
+  width: 50px;
+  height: 50px;
+  margin-right: 9px;
+  border-radius: 50%;
+  margin-top: 2px
+}
+
+.notifications-item .text h4 {
+  color: #777;
+  font-size: 16px;
+  margin-top: 3px
+}
+
+.notifications-item .text p {
+  color: #aaa;
+  font-size: 12px
+}
+
+
+.box {
+  width: 280px;
+  height: auto;
+  background-color: white;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border-bottom: 2px solid #005860;
+}
+
+.box > i {
+  font-size: 20px;
+  color: #777;
+}
+
+.box > input {
+  flex: 1;
+  height: 35px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  padding-left: 10px;
+}
+
+.box > button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.toggle-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  i {
+    color: #005860 !important;
+  }
+}
+
+.search-wrapper {
+  border-radius: 20px;
+  padding: 13px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  i {
+    color: #005860 !important;
+  }
+}
+
+.search-wrapper:hover {
+  background: rgb(0 0 0 / 4%) !IMPORTANT;
+}
+
+.logo {
+  width: 49% !important;
+  padding: 0px 19px;
+}
+
+$border-bottom-color: #f1f1f3;
+$sgh-color-palette-50: #e0eced;
+$sgh-color-palette-500: #006068;
+$text-color: rgba(0, 0, 0, 0.87);
+.theme-list-wrapper {
+  width: 300px !important;
+}
+
+.profile-list-wrapper {
+  width: 300px !important;
+}
+
+.notifications-list-wrapper {
+  padding: 10px;
+  position: absolute;
+  right: 10px;
+  top: 45px;
+  z-index: 2;
+  color: $text-color;
+  width: 450px;
+
+  .notifications-list {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    position: relative;
+
+    .notifications-title {
+      background-color: #ffffff;
+      text-align: center;
+      padding: 20px 10px;
+      border-bottom: 1px solid $border-bottom-color;
+    }
+
+    .notifications-list-item {
+      padding: 10px 10px 10px 10px;
+      background-color: #ffffff;
+      border-bottom: 1px solid $border-bottom-color;
+      font-size: 14px;
+
+      .item-title {
+        margin: 0;
+        white-space: normal;
+      }
+
+      .item-description {
+        margin: 0;
+        color: $text-color;
+        opacity: 0.5;
+        white-space: normal;
+      }
+    }
+
+    .see-all {
+      background-color: #ffffff;
+      color: $sgh-color-palette-500;
+      font-weight: 500;
+    }
+  }
+}
+
+@media screen and (max-width: 599px) {
+  .notifications-list-wrapper {
+    width: auto;
+  }
+}
+
+.notifications-list-wrapper {
+  -webkit-animation: cardAnim 1s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none;
+  animation: cardAnim 1s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none;
+}
+
+@keyframes cardAnim {
+  0% {
+    opacity: 0;
+    transform: rotateX(-100deg);
+    transform-origin: top;
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotateX(0deg);
+    transform-origin: top;
+  }
+}
+
+select {
+  padding: 10px 20px;
+  border-radius: 5px;
+  width: 100%;
+  margin: 3% 10%;
+  border: 1px solid #005860;
+}
+
+select:focus {
+  outline: none;
+}
+
+
+//additional css
+.form {
+  width: 30%;
+  position: relative;
+  height: 40px;
+  overflow: hidden;
+  display: flex;
+}
+
+.form input {
+  width: 100%;
+  height: 100%;
+  color: #000000;
+  padding-top: 10px;
+  border: none;
+  background-color: #ffffff;
+}
+
+.form label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border-bottom: 1px solid rgba(0, 88, 96, 0.58);
+
+}
+
+.form label::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-bottom: 3px solid #005860bd;
+  transform: translateX(-100%);
+  transition: all 0.3s ease;
+}
+
+.content-name {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding-bottom: 5px;
+  font-size: 13px;
+  color: #005860bd;
+  transition: all 0.3s ease;
+  font-family: sans-serif;
+}
+
+.form input:focus {
+  outline: none;
+}
+
+.form input:focus + .label-name .content-name,
+.form input:valid + .label-name .content-name {
+  transform: translateY(-80%);
+  font-size: 12px;
+  left: 0;
+  color: #005860;
+}
+
+.form input:focus + .label-name::after,
+.form input:valid + .label-name::after {
+  transform: translateX(0%);
+}
+
+.radio {
+  display: block;
+  cursor: pointer;
+  user-select: none;
+  text-align: left;
+
+  & + .radio {
+    margin-top: 12px;
+  }
+
+  input {
+    display: none;
+
+    & + span {
+      display: inline-block;
+      position: relative;
+      padding-left: 30px;
+
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 50%;
+        margin-right: 5px;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #ccc;
+        background: #fff;
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        width: 11px;
+        height: 11px;
+        background: #005860;
+        position: absolute;
+        border-radius: 50%;
+        top: 3px;
+        left: 3px;
+        opacity: 0;
+        transform: scale(0, 0);
+        transition: all .2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
+      }
+    }
+
+    &:checked + span:after {
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+  }
+}
+
+
+.client-menu-wrapper{
+  .container-fluid{
+    padding-right: 15px;
+    padding-left: 15px;
+    margin: 10px;
+    .row{
+      display: flex;
+      flex-wrap: wrap;
+      margin-right: -15px;
+      margin-left: -15px;
+      flex-direction: column;
+      .search-input{
+        width: 100%;
+        display: block;
+        padding: 0.375rem 0.75rem;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+
+      }
+      .search-input:focus{
+        color: #495057;
+        background-color: #fff;
+        border-color: #80bdff;
+        outline: 0;
+        box-shadow: 0 0 0 0.2rem #007bff40;
+      }
+      .list-item-container{
+        border: 0.5px rgba(0, 0, 0, 0.12) solid;
+        margin-top: 5px;
+        border-radius: 5px;
+        overflow: hidden;
+        .mat-ripple{
+          padding: 8px;
+          font-size: 12px;
+        }
+        .mat-ripple:hover{
+          background:rgba(118,118,118,.26) ;
+          cursor: pointer;
+          transition: all .3s ease 0s;
+        }
+        .client-selected {
+          color: white;
+          background-color: #005860;
+        }
+      }
+    }
+  }
+}
+
+//media queries
+@media screen and (max-width: 600px) {
+  .search {
+    display: none;
+  }
+  .logo-wrapper {
+    width: 30%;
+
+    .logo {
+      width: 78% !important;
+      padding: 9px;
+    }
+  }
+  .sgh-sidebar {
+    z-index: 1 !important;
+    position: absolute !important;
+    background: #fff !important;
+  }
+  .icon {
+    cursor: pointer;
+    margin-right: 0;
+    margin-left: 34px;
+  }
+  .toggle-button {
+    order: -1;
+  }
+  .logo-wrapper {
+    order: 1;
+  }
+  .icon {
+    order: 1;
+  }
+  #toolBarWrapper {
+    padding: 0 15px;
+    justify-content: space-between;
+  }
+}
+
+
+@media screen and (min-width: 1900px) {
+  .logo {
+    width: 29% !important;
+    padding: 0 35px;
+  }
+}
+
+
+