sgh-navbar 0.0.37 → 0.0.38

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

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

@@ -1,493 +0,0 @@
-.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;
-  }
-}
-
-
-