sgh-navbar 0.0.36 → 0.0.37

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/sgh-navbar'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/sgh-navbar",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,31 +1,11 @@
-{
-  "name": "sgh-navbar",
-  "version": "0.0.36",
-  "peerDependencies": {
-    "@angular/common": "^15.2.8",
-    "@angular/core": "^15.2.8"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2015/sgh-navbar.mjs",
-  "es2020": "fesm2020/sgh-navbar.mjs",
-  "esm2020": "esm2020/sgh-navbar.mjs",
-  "fesm2020": "fesm2020/sgh-navbar.mjs",
-  "fesm2015": "fesm2015/sgh-navbar.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/sgh-navbar.mjs",
-      "es2020": "./fesm2020/sgh-navbar.mjs",
-      "es2015": "./fesm2015/sgh-navbar.mjs",
-      "node": "./fesm2015/sgh-navbar.mjs",
-      "default": "./fesm2020/sgh-navbar.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "sgh-navbar",
+  "version": "0.0.37",
+  "peerDependencies": {
+    "@angular/common": "^15.2.8",
+    "@angular/core": "^15.2.8"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/src/lib/sgh-navbar.component.spec.ts

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

package/src/lib/sgh-navbar.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-sgh-navbar',
+  template: `
+    <p>
+      sgh-navbar works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class SghNavbarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/sgh-navbar.module.ts

@@ -0,0 +1,48 @@
+import {NgModule} from '@angular/core';
+import {SghNavbarComponent} from './sgh-navbar.component';
+import {SublevelMenuComponent} from './sidenav/sublevel-menu.component';
+import {SidenavComponent} from './sidenav/sidenav.component';
+import {ToolbarComponent} from './toolbar/toolbar.component';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {FormsModule} from '@angular/forms';
+import {MenuListItemComponent} from "./sidenav/menu-list-item/menu-list-item.component";
+import {SghNavbarService} from "./sgh-navbar.service";
+import {NoftificationListComponent} from "./toolbar/noftification-list/noftification-list.component";
+import {MatMenuModule} from "@angular/material/menu";
+import {SearchPipe} from "./toolbar/search.pipe";
+import {MatRippleModule} from "@angular/material/core";
+import { SubClientDialogComponent } from './toolbar/sub-client-dialog/sub-client-dialog.component';
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatRadioModule} from "@angular/material/radio";
+
+@NgModule({
+  declarations: [
+    SghNavbarComponent,
+    SublevelMenuComponent,
+    SidenavComponent,
+    ToolbarComponent,
+    MenuListItemComponent,
+    NoftificationListComponent,
+    SearchPipe,
+    SubClientDialogComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    FormsModule,
+    MatMenuModule,
+    MatRippleModule,
+    MatDialogModule,
+    MatRadioModule
+  ],
+  exports: [
+    SghNavbarComponent,
+    SublevelMenuComponent,
+    SidenavComponent,
+    ToolbarComponent
+  ],
+  providers: [SghNavbarService],
+})
+export class SghNavbarModule {
+}

package/src/lib/sgh-navbar.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SghNavbarService } from './sgh-navbar.service';
+
+describe('SghNavbarService', () => {
+  let service: SghNavbarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SghNavbarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/sgh-navbar.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SghNavbarService {
+  expanded:boolean;
+  client = new BehaviorSubject({});
+  subClient = new BehaviorSubject({});
+  setExpanded(value: boolean) {
+    this.expanded = value;
+  }
+
+  getExpanded() {
+    return this.expanded;
+  }
+
+  setClient(client) {
+    this.client.next(client);
+  }
+
+  getClient() {
+    return this.client;
+  }
+
+  setSubclient(subclient) {
+    this.subClient.next(subclient);
+  }
+
+  getSubclient() {
+    return this.subClient;
+  }
+}

package/src/lib/sidenav/helper.ts

@@ -0,0 +1,25 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+
+export interface INavbarData {
+    routeLink: string;
+    icon?: string;
+    label: string;
+    expanded?: boolean;
+    visible: boolean;
+    items?: INavbarData[];
+}
+
+export const fadeInOut = trigger('fadeInOut', [
+    transition(':enter', [
+      style({opacity: 0}),
+      animate('350ms',
+        style({opacity: 1})
+      )
+    ]),
+    transition(':leave', [
+      style({opacity: 1}),
+      animate('350ms',
+        style({opacity: 0})
+      )
+    ])
+  ])

package/src/lib/sidenav/menu-list-item/item1/item1.component.html

@@ -0,0 +1 @@
+<p>item1 works!</p>

package/src/lib/sidenav/menu-list-item/item1/item1.component.spec.ts

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

package/src/lib/sidenav/menu-list-item/item1/item1.component.ts

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

package/src/lib/sidenav/menu-list-item/item1/sub-item1/sub-item1.component.html

@@ -0,0 +1 @@
+<p>sub-item1 works!</p>

package/src/lib/sidenav/menu-list-item/item1/sub-item1/sub-item1.component.spec.ts

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

package/src/lib/sidenav/menu-list-item/item1/sub-item1/sub-item1.component.ts

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

package/src/lib/sidenav/menu-list-item/item2/item2.component.html

@@ -0,0 +1 @@
+<p>item2 works!</p>

package/src/lib/sidenav/menu-list-item/item2/item2.component.spec.ts

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

package/src/lib/sidenav/menu-list-item/item2/item2.component.ts

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

package/src/lib/sidenav/menu-list-item/item3/item3.component.html

@@ -0,0 +1 @@
+<p>item3 works!</p>

package/src/lib/sidenav/menu-list-item/item3/item3.component.spec.ts

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

package/src/lib/sidenav/menu-list-item/item3/item3.component.ts

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

package/src/lib/sidenav/menu-list-item/menu-list-item.component.html

@@ -0,0 +1,17 @@
+<div class="sidebar_div" *ngFor="let data of items">
+  <a (click)="onItemSelected(data)" class="sub-link"
+     [routerLink]="[data.routeLink]" routerLinkActive="item-active" *ngIf="data.visible">
+    <div class="text-wrapper">
+      <i class="fa-size fa fa-{{data.icon}} {{data.icon ? '' : 'padding-10'}}"></i>
+      <div class="text-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>

package/src/lib/sidenav/menu-list-item/menu-list-item.component.scss

@@ -0,0 +1,128 @@
+.padding-10{
+  padding-left: 10px;
+}
+.text-div{
+  text-align: initial;
+  padding-left: 10px;
+}
+.sub-link {
+  padding-left: 30px !important;
+}
+
+.sidebar_div {
+  margin: 0;
+  padding: 0;
+  //width: 200px;
+
+  //position: fixed;
+  //height: 100%;
+  overflow: auto;
+
+}
+
+/* sidebar_div links */
+.sidebar_div a {
+  color: #005860;
+  padding: 10px 13px;
+  text-decoration: none;
+  margin: 0px 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+}
+
+/* Active/current link */
+.sidebar_div a.active {
+  background-color: #006068;
+  color: white;
+  border-radius: 13px;
+}
+
+/* Links on mouse-over */
+.sidebar_div a:hover:not(.active) {
+  background-color: #26787f !important;
+  color: white;
+  border-radius: 13px;
+}
+
+/* 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;
+  }
+  .sidebar_div a {
+    float: left;
+    width: -webkit-fill-available;
+  }
+  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: 13px !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: #0009 !important;
+  left: 0%;
+  top: 0;
+  z-index: -1;
+  cursor: default;
+}
+
+.text-wrapper {
+  display: flex !important;
+  align-items: center !important;
+  margin-left: 10px !important;
+}
+
+@media screen and (max-width: 600px) {
+  .sgh-sidebar {
+    position: absolute !important;
+    background: white !important;
+  }
+  .sidenav-overlay {
+    display: block;
+  }
+
+}

package/src/lib/sidenav/menu-list-item/menu-list-item.component.spec.ts

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

package/src/lib/sidenav/menu-list-item/menu-list-item.component.ts

@@ -0,0 +1,42 @@
+import {Component, HostBinding, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {INavbarData} from '../helper';
+import {Router} from '@angular/router';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+@Component({
+  selector: 'app-menu-list-item',
+  templateUrl: './menu-list-item.component.html',
+  styleUrls: ['./menu-list-item.component.scss'],
+  encapsulation:ViewEncapsulation.None,
+  animations: [
+    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)')
+      ),
+    ])
+  ]
+})
+export class MenuListItemComponent implements OnInit {
+  expanded: boolean;
+  expandMenu: boolean;
+  // @ts-ignore
+  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
+  @Input() items: any;
+
+  constructor(public router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  onItemSelected(item: INavbarData) {
+    if (!item.items || !item.items.length) {
+      this.router.navigate([item.routeLink]).then();
+    }
+    if (item.items && item.items.length) {
+      item.expanded = !item.expanded;
+    }
+  }
+
+}