sgh-navbar 0.0.36 → 0.0.37

package/src/lib/sidenav/nav-data.ts

@@ -0,0 +1,98 @@
+import { INavbarData } from "./helper";
+
+export const navbarData: INavbarData[] = [
+  {
+    "label": "Dashboard",
+    "icon": "home",
+    "routeLink": "dashboard",
+    "visible": true,
+    "items": [
+      {
+        "label": "Cards",
+        "icon": "home",
+        "routeLink": "dashboard/cards",
+        "visible": true,
+      },
+      {
+        "label": "Charts",
+        "icon": "home",
+        "routeLink": "dashboard/charts",
+        "visible": true,
+        "items": [
+          {
+            "label": "Vertical bar chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/vertical-bar-chart",
+            "visible": true
+          },
+          {
+            "label": "Horizontal bar chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/horizontal-bar-chart",
+            "visible": true
+          },
+          {
+            "label": "Grouped horizontal bar chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/grouped-horizontal-bar-chart",
+            "visible": true
+          },
+          {
+            "label": "Grouped vertical bar chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/grouped-vertical-bar-chart",
+            "visible": true
+          },
+          {
+            "label": "Pie chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/pie-chart",
+            "visible": true
+          },
+          {
+            "label": "Advanced pie chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/advanced-pie-chart",
+            "visible": true
+          },
+          {
+            "label": "Pie grid chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/pie-grid-chart",
+            "visible": true
+          },
+          {
+            "label": "Line chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/line-chart",
+            "visible": true
+          },
+          {
+            "label": "Number card chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/number-card-chart",
+            "visible": true
+          },
+          {
+            "label": "Linear gauge chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/linear-gauge-chart",
+            "visible": true
+          },
+          {
+            "label": "Combo chart",
+            "icon": "",
+            "routeLink": "dashboard/charts/pages/combo-chart",
+            "visible": true
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Form elements",
+    "icon": "home",
+    "routeLink": "main",
+    "visible": true,
+  },
+];

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

@@ -0,0 +1,12 @@
+import {INavbarData} from "./helper";
+import {ClientListItem, SubClientListItem} from "../toolbar/toolbar-data";
+
+export class SidenavData {
+  navData:INavbarData[];
+  bgColor:string;
+  imgSm:string;
+  imgLg:string;
+  client?: ClientListItem;
+  subclient?: SubClientListItem;
+  activeRole?: string;
+}

package/src/lib/sidenav/sidenav.component.html

@@ -0,0 +1,34 @@
+<div class="close sidenav-overlay" *ngIf="expanded"></div>
+<aside class="sgh-sidebar" *ngIf="expanded" [@slideInOut]>
+  <div class="menu-wrapper">
+    <div class="sidebar_div " *ngFor="let data of sidenavData.navData">
+      <a (click)="onItemSelected(data)"
+         [routerLink]="[data.routeLink]" routerLinkActive="item-active" *ngIf="data.visible">
+        <div class="text-wrap">
+          <div class="icon-wrapper">
+            <i class="fa-size fa fa-{{data.icon}}"></i>
+          </div>
+          <div>
+            {{data.label}}
+          </div>
+        </div>
+        <i class="fa-size fa fa-angle-down" *ngIf="!(data.items == undefined)"
+           [@indicatorRotate]="data.expanded ? 'expanded': 'collapsed'"></i>
+      </a>
+      <div class="sub-link-wrapper" *ngIf="data.expanded">
+        <app-menu-list-item [items]="data.items">
+        </app-menu-list-item>
+      </div>
+    </div>
+    <div class="auth-info-wrp">
+      <div *ngIf="client && subclient" class="client-info-wrp">
+        <div>{{client?.text}}</div>
+        <i class="fa fa-angle-right"></i>
+        <div>{{subclient?.text}}</div>
+      </div>
+      <div *ngIf="sidenavData.activeRole" class="role-info-wrp">
+        <span class="role-info-text">Logged in as </span>
+        <span class="role-info-text role">{{sidenavData.activeRole}}</span></div>
+    </div>
+  </div>
+</aside>

package/src/lib/sidenav/sidenav.component.scss

@@ -0,0 +1,173 @@
+.sidebar_div a > div > i {
+  padding-right: 10px;
+}
+.menu-wrapper{
+  min-height: calc(100vh - 70px);
+  overflow: auto;
+  position: relative;
+  .auth-info-wrp{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding-top: 5px;
+    border-top: 1px solid lightgrey;
+    color: #005860;
+    display: flex;
+    flex-direction: column;
+    .client-info-wrp {
+      display: flex;
+      gap: 10px;
+      font-size: 12px;
+      font-weight: bold;
+    }
+    .role-info-wrp {
+      font-size: 12px;
+      .role-info-text{
+        font-weight: normal;
+        &.role{
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+.fa-size {
+  font-size: 1.6em;
+  line-height: .75em;
+  vertical-align: -15%;
+}
+
+.sgh-sidebar {
+  height: auto;
+  min-height: 100% !important;
+  max-height: calc(100vh - 60px);
+  box-shadow: 0 1px 0 -1px rgba(0, 0, 0, 0), 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1215686275);
+  border-right: none;
+  overflow-y: auto;
+  padding: 5px 0;
+  font-size: 12px;
+  margin-right: 10px;
+  background: white;
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: center !important;
+  z-index: 1;
+}
+
+.sidebar_div {
+  margin: 0;
+  padding: 0;
+  width: 220px;
+  overflow: hidden !important;
+}
+
+/* sidebar_div links */
+.sidebar_div a {
+  color: #005860;
+  padding: 10px 14px;
+  text-decoration: none;
+  margin: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+}
+
+/* Active/current link */
+.sidebar_div a.active {
+  background-color: #006068;
+  border-radius: 13px;
+
+  .text-wrap , .text-wrapper{
+    color: white !important;
+  }
+}
+
+.text-wrap{
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  .icon-wrapper{
+    width: 15%;
+  }
+}
+/* Links on mouse-over */
+.sidebar_div a:hover:not(.active) {
+  background-color: #26787f !important;
+  color: white;
+  border-radius: 12px;
+}
+
+/* Page content. The value of the margin-left property should match the value of the sidebar_div's width property */
+div.content {
+  margin-left: 200px;
+  padding: 1px 16px;
+  height: 1000px;
+}
+
+/* On screens that are less than 700px wide, make the sidebar_div into a topbar */
+@media screen and (max-width: 700px) {
+  .sidebar_div {
+    //width: 100%;
+    height: auto;
+    position: relative;
+  }
+  div.content {
+    margin-left: 0;
+  }
+}
+
+/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
+@media screen and (max-width: 400px) {
+  .sidebar_div a {
+    text-align: center;
+    float: none;
+  }
+}
+
+
+.nav-list li a {
+  text-decoration: none;
+  display: block;
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #515151 !important;
+  color: #9d9d9d;
+}
+
+.nav-list > li > a {
+  color: #C4C4C4;
+  font-size: 14px;
+  padding-left: 15px !important;
+  border-bottom: 1px solid #585858;
+}
+
+.nav-list > li > a:hover {
+  background-color: #444444;
+}
+
+.sidenav-overlay {
+  display: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: #00000063 !important;
+  left: 0%;
+  top: 0;
+  z-index: 1;
+  cursor: default;
+}
+
+@media screen and (max-width: 600px) {
+  .sidebar_div{
+    margin: 0 0 !important;
+  }
+  .sgh-sidebar {
+    position: fixed !important;
+    background: white !important;
+  }
+  .sidenav-overlay {
+    display: block;
+  }
+}

package/src/lib/sidenav/sidenav.component.ts

@@ -0,0 +1,84 @@
+import {animate, keyframes, state, style, transition, trigger} from '@angular/animations';
+import {
+  Component,
+  Output,
+  EventEmitter,
+  OnInit,
+  Input,
+} from '@angular/core';
+import {Router} from '@angular/router';
+import {navbarData} from './nav-data';
+import {SghNavbarService} from "../sgh-navbar.service";
+import {SidenavData} from "./sidenav-data";
+
+interface SideNavToggle {
+  screenWidth: number;
+  collapsed: boolean;
+}
+
+@Component({
+  selector: 'app-sidenav',
+  templateUrl: './sidenav.component.html',
+  styleUrls: ['./sidenav.component.scss'],
+  animations: [
+    trigger('rotate', [
+      transition(':enter', [
+        animate('1000ms',
+          keyframes([
+            style({transform: 'rotate(0deg)', offset: '0'}),
+            style({transform: 'rotate(2turn)', offset: '1'})
+          ])
+        )
+      ])
+    ]),
+    trigger('indicatorRotate', [
+      state('collapsed', style({transform: 'rotate(0deg)'})),
+      state('expanded', style({transform: 'rotate(180deg)'})),
+      transition('expanded <=> collapsed',
+        animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
+      ),
+    ]),
+    trigger('slideInOut', [
+      transition(':enter', [style({transform: 'translateX(-100px)'}), animate('.5s ease-out', style({transform: 'translateX(0%)'}))]),
+      transition(':leave', [
+        style({ transform: 'translateX(0%)' }),
+        animate('.5s ease-out', style({ transform: 'translateX(-100%)' }))
+      ])
+    ])
+  ]
+})
+export class SidenavComponent implements OnInit {
+
+  @Output() onToggleSideNav: EventEmitter<SideNavToggle> = new EventEmitter();
+  @Input() expanded:boolean;
+  @Input() sidenavData: SidenavData = {
+    navData: navbarData,
+    bgColor: '#fff',
+    imgSm: '',
+    imgLg: ''
+  }
+  client;
+  subclient;
+
+  constructor(public router: Router, private sidebarService: SghNavbarService) {
+    this.sidebarService.getClient().subscribe((client) => {
+      this.client = client;
+    });
+    this.sidebarService.getSubclient().subscribe((subclient) => {
+      this.subclient = subclient;
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+
+  onItemSelected(item: any) {
+    if (!item.items || !item.items.length) {
+      this.router.navigate([item.routeLink]).then();
+    }
+    if (item.items && item.items.length) {
+      item.expanded = !item.expanded;
+    }
+  }
+}

package/src/lib/sidenav/sublevel-menu.component.ts

@@ -0,0 +1,106 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { fadeInOut, INavbarData } from './helper';
+
+@Component({
+  selector: 'app-sublevel-menu',
+  template: `
+    <ul *ngIf="collapsed && data.items && data.items.length > 0"
+    [@submenu]="expanded
+      ? {value: 'visible',
+          params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '*'}}
+      : {value: 'hidden',
+          params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '0'}}"
+      class="sublevel-nav"
+    >
+      <li *ngFor="let item of data.items" class="sublevel-nav-item">
+          <a class="sublevel-nav-link"
+          (click)="handleClick(item)"
+            *ngIf="item.items && item.items.length > 0 && item.visible"
+            [ngClass]="getActiveClass(item)"
+          >
+            <i class="sublevel-link-icon fa fa-circle"></i>
+            <span class="sublevel-link-text" @fadeInOut
+                *ngIf="collapsed">{{item.label}}</span>
+            <i *ngIf="item.items && collapsed" class="menu-collapse-icon"
+              [ngClass]="!item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'"
+            ></i>
+          </a>
+          <a class="sublevel-nav-link"
+            *ngIf="(!item.items || (item.items && item.items.length === 0)) && item.visible"
+            [routerLink]="[item.routeLink]"
+            routerLinkActive="active-sublevel"
+            [routerLinkActiveOptions]="{exact: true}"
+          >
+            <i class="sublevel-link-icon fa fa-circle"></i>
+            <span class="sublevel-link-text" @fadeInOut
+               *ngIf="collapsed">{{item.label}}</span>
+          </a>
+          <div *ngIf="item.items && item.items.length > 0">
+            <app-sublevel-menu
+              [data]="item"
+              [collapsed]="collapsed"
+              [multiple]="multiple"
+              [expanded]="item.expanded"
+            ></app-sublevel-menu>
+          </div>
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./sidenav.component.scss'],
+  animations: [
+    fadeInOut,
+    trigger('submenu', [
+      state('hidden', style({
+        height: '0',
+        overflow: 'hidden'
+      })),
+      state('visible', style({
+        height: '*'
+      })),
+      transition('visible <=> hidden', [style({overflow: 'hidden'}),
+        animate('{{transitionParams}}')]),
+      transition('void => *', animate(0))
+    ])
+  ]
+})
+export class SublevelMenuComponent implements OnInit {
+
+  @Input() data: INavbarData = {
+    routeLink: '',
+    icon: '',
+    label: '',
+    visible: true,
+    items: []
+  }
+  @Input() collapsed = false;
+  @Input() animating: boolean | undefined;
+  @Input() expanded: boolean | undefined;
+  @Input() multiple: boolean = false;
+
+  constructor(public router: Router) {}
+
+  ngOnInit(): void {
+  }
+
+  handleClick(item: any): void {
+    if (!this.multiple) {
+      if (this.data.items && this.data.items.length > 0) {
+        for(let modelItem of this.data.items) {
+          if (item !==modelItem && modelItem.expanded) {
+            modelItem.expanded = false;
+          }
+        }
+      }
+    }
+    item.expanded = !item.expanded;
+  }
+
+  getActiveClass(item: INavbarData): string {
+    return item.expanded && this.router.url.includes(item.routeLink)
+      ? 'active-sublevel'
+      : '';
+  }
+
+}

package/src/lib/toolbar/noftification-list/noftification-list.component.html

@@ -0,0 +1,18 @@
+<div class="notifications-list-wrapper">
+  <div class="notifications-list">
+    <div class="notifications-title">
+      <span class="title mat-h3">Notifications</span>
+    </div>
+    <div class="notifications-list-item">
+      <span class="item-title mat-h4">David James</span>
+      <span class="item-description mat-h5">A notification box show message</span>
+    </div>
+    <div class="notifications-list-item">
+      <span class="item-title mat-h4">David James</span>
+      <span class="item-description mat-h5">A notification box show message</span>
+    </div>
+    <div class="notifications-title">
+      <span class="see-all mat-h4">See all</span>
+    </div>
+  </div>
+</div>

package/src/lib/toolbar/noftification-list/noftification-list.component.scss

@@ -0,0 +1,67 @@
+$border-bottom-color: #f1f1f3;
+$sgh-color-palette-50:#e0eced;
+$sgh-color-palette-500:#006068;
+$text-color: rgba(0,0,0,0.87);
+.notifications-list-wrapper {
+  padding: 10px;
+  position: absolute;
+  right: 10px;
+  top: 45px;
+  z-index: 2;
+  color: $text-color;
+  width: 400px;
+  .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 30px;
+      background-color: $sgh-color-palette-50;
+      border-bottom: 1px solid $border-bottom-color;
+      .item-title {
+        margin: 0;
+        white-space: normal;
+        margin-right: 5px;
+      }
+      .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;
+  }
+}

package/src/lib/toolbar/noftification-list/noftification-list.component.spec.ts

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

package/src/lib/toolbar/noftification-list/noftification-list.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-noftification-list',
+  templateUrl: './noftification-list.component.html',
+  styleUrls: ['./noftification-list.component.scss']
+})
+export class NoftificationListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

package/src/lib/toolbar/search.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'search'
+})
+export class SearchPipe implements PipeTransform {
+
+  transform(values: any, args?: any): any {
+    if (args === undefined) {
+      return values;
+    }
+
+    return values.filter(value => {
+      return value.text.toLowerCase().includes(args.toLowerCase());
+    });
+  }
+
+}

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

@@ -0,0 +1,14 @@
+<div class="subclientlist-wrapper dialog-wrapper">
+  <h4 class="subclientlist-header">Select Sub Client</h4>
+  <div class="subclientlist-body">
+    <div>
+      <mat-radio-group class="subclientlist-radiogrp" aria-label="Select an option">
+        <mat-radio-button [value]="item.value" *ngFor="let item of subClientList;index as i" (click)="onSubClientSelect(item)" [checked]="item.checked">{{item.text}}</mat-radio-button>
+      </mat-radio-group>
+    </div>
+  </div>
+  <div class="subclientlist-btns">
+    <button class="sgh-btn-primary" (click)="onSelectBtnClick()">Select</button>
+  </div>
+</div>
+