sgh-navbar 0.0.37 → 0.0.39

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

@@ -1,173 +0,0 @@
-.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

@@ -1,84 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,18 +0,0 @@
-<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

@@ -1,67 +0,0 @@
-$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

@@ -1,25 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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>
-

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

@@ -1,40 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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
-}