File

src/lib/kiewit-header/kiewit-header.component.ts

Implements

OnInit

Metadata

selector kiewit-header
styleUrls kiewit-header.component.css
templateUrl ./kiewit-header.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(element: ElementRef, renderer: Renderer)
Parameters :
Name Type Optional Description
element ElementRef
renderer Renderer

Inputs

isMenuEnabled

Type: boolean

menuItems

Type: KiewitMenuItem[]

Outputs

buttonSettingsClick $event type: EventEmitter<any>
subMenuClick $event type: EventEmitter<any>

Methods

ngOnInit
ngOnInit()
Returns : void
OpenComponent
OpenComponent(subitem: )
Parameters :
Name Type Optional Description
subitem
Returns : void
settingsClick
settingsClick()
Returns : void
subMenuOnClick
subMenuOnClick(eventData: )
Parameters :
Name Type Optional Description
eventData
Returns : void
toggleHelpMenu
toggleHelpMenu()
Returns : void
toggleUserInformation
toggleUserInformation()
Returns : void

Properties

Public element
element: ElementRef
Type : ElementRef
helpMenuOpen
helpMenuOpen: string
Type : string
kiewitmenu
kiewitmenu: KiewitMenuComponent
Type : KiewitMenuComponent
Decorators : ViewChild
showUserInformationPanel
showUserInformationPanel: string
Type : string
import {
    Component, Output, Input, OnInit, ElementRef, Renderer,
    EventEmitter, trigger, animate, transition, state, style, ViewChild
} from '@angular/core';
import { KiewitMenuItem } from '../kiewit-header/kiewit-header';
import { KiewitMenuComponent } from '../kiewit-menu/kiewit-menu.component';

@Component({
    selector: 'kiewit-header',
    templateUrl: './kiewit-header.component.html',
    styleUrls: ['./kiewit-header.component.css'],
    animations: [
        trigger('slideDownUp', [
            state('down', style({
                overflow: 'hidden',
                height: 'auto',
                width: 'max-content'
            })),
            state('up', style({
                opacity: '0',
                overflow: 'hidden',
                height: '0px',
                width: 'max-content'
            })),
            transition('down => up', animate('400ms ease-in-out')),
            transition('up => down', animate('400ms ease-in-out'))
        ]),
        trigger('slideLeftRight', [
            state('true', style({
                overflow: 'hidden',
                height: 'auto',
                width: 'max-content'
            })),
            state('false', style({
                opacity: '0',
                backgroundColor: '#000',
                overflow: 'hidden',
                height: '0px',
                width: '0px'
            })),
            transition('true => false', animate('3000ms ease-in-out')),
            transition('false => true', animate('3000ms ease-in-out'))
        ]),
        trigger('userInformationAnimation', [
            state('down', style({
                overflow: 'hidden',
                height: 'auto',
                width: '270px'
            })),
            state('up', style({
                opacity: '0',
                overflow: 'hidden',
                height: '0px',
                width: '270px'
            })),
            transition('down => up', animate('400ms ease-in-out')),
            transition('up => down', animate('400ms ease-in-out'))
        ])
    ]
})
export class KiewitHeaderComponent implements OnInit {
    @Output()
    buttonSettingsClick: EventEmitter<any> = new EventEmitter();

    @Output()
    subMenuClick: EventEmitter<any> = new EventEmitter();

    @Input()
    isMenuEnabled: boolean;

    @Input()
    menuItems: KiewitMenuItem[];

    settingsClick() {
        this.buttonSettingsClick.emit();
    };

    subMenuOnClick(eventData) {
        this.subMenuClick.emit({ title: eventData.title });
    }

    helpMenuOpen: string;
    showUserInformationPanel: string;

    @ViewChild('kiewitmenu') kiewitmenu: KiewitMenuComponent;

    constructor(public element: ElementRef, private renderer: Renderer) {

    }

    ngOnInit() {
        this.helpMenuOpen = 'up';
        this.showUserInformationPanel = 'up';
        //this.subMenuOpen = 'true';
    }

    //ngAfterViewInit() {
    //    var la = this.element.nativeElement;//.querySelector('li');
    //    //alert(la);
    //    this.renderer.setElementClass(la, 'kiewit-menu-item', true);
    //    //this.renderer.setStyle(second.nativeElement, 'color', 'blue');
    //}
    /*
    toggleMenu(menuItem: KiewitMenuItem): void {
        //Hide others SubMenuItems        
        for (let i = 0; i < this.menuItems.length; i++) {

            if (this.menuItems[i].MenuItemId != menuItem.MenuItemId) {
                this.menuItems[i].IsActive = true;
            }
        }
        //Active only the current MenuItem
        menuItem.IsActive = !menuItem.IsActive
    }*/

    toggleHelpMenu(): void {
        //this.helpMenuOpen = this.helpMenuOpen === 'up' ? 'down' : 'up';
        this.kiewitmenu.toggleHelpMenu();
    }

    toggleUserInformation(): void {
        this.showUserInformationPanel = this.showUserInformationPanel === 'up' ? 'down' : 'up';
    }

    OpenComponent(subitem): void {

    }
}
<div id="platform-navbar" class="ng-scope">
  <div style="width: 128px">
    <ul site-menu="" style="margin-left:-9px" class="platform-bg-transparent k-hide-arrows k-widget k-reset k-header k-menu k-menu-horizontal" data-role="menu" tabindex="0" role="menubar" aria-activedescendant="platform-main-menu-dropdown_mn_active" *ngIf="isMenuEnabled">
      <li class="platform-bg-transparent k-item k-state-default k-first k-last" role="menuitem" style="z-index: auto;cursor:pointer;">
        <span class="k-link">
          <span (click)="toggleHelpMenu()" style="padding: 5px; display: flex; position:relative; width:auto; margin-left:20px;  background-color: rgba(255, 255, 255, 0.2); color: #FFF; border-radius: 5px; font-family: Roboto Light; font-size: 14px;">
            <i class="core-align-middle icon icon-burger" style="font-size: 16px; color:#FFFFFF; padding-top:1px"></i>
            <span style="position: relative; top: 0px; padding: 0 .3em; color: white"><strong>|</strong></span>
            <span style="position: relative; top: 1px; color: white; font-family:'Roboto Regular'!important" class="ng-binding">MENU</span>
          </span><span class="k-icon k-i-arrow-s"></span>
        </span>


        <kiewit-menu #kiewitmenu [menuItems]="menuItems" (subMenuClick)="subMenuOnClick($event)"></kiewit-menu>


        <ul id="platform-main-menu-dropdown" site-menu="" kendo-menu="kendoDynamicMenu" k-data-source="DynamicMenu" k-orientation="menuList" k-rebind="menuList" class="platform-menu-dropdown k-widget k-reset k-header k-menu k-menu-Vertical k-group k-menu-group k-popup" style="padding-top: 0px; max-width: 270px !important; display: none; position: absolute; font-size: 14px; font-family: 'Roboto Regular', 'Segoe UI', Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: translateY(-400px);" data-role="menu" role="menu" tabindex="0" aria-activedescendant="platform-main-menu-dropdown_mn_active" aria-hidden="true"><li class="k-item k-state-default k-first ng-scope" role="menuitem"><span class="k-link"><img class="k-image" alt="" src="https://in8-dev.hds.ineight.com/Content/icon/ineight-project-suite.svg"></span></li><li class="k-item k-state-default platform-left-menu-ellipsis-tooltip ng-scope" title="" ng-show="true" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppCore/Projects">Projects</a></li><li class="k-item k-state-default k-separator ng-scope" role="menuitem">&nbsp;</li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Contract<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" ng-click="selectProject('Packages')" role="menuitem"><span class="k-link">Bid packages</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" title="" ng-click="selectProject('Contracts')" role="menuitem"><span class="k-link">Contracts</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppContract/ChangeManagement">Change management</a></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" name="Workspace" ng-click="selectProject('Workspace')" ng-show="true" role="menuitem"><span class="k-link">Control</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true" id="platform-main-menu-dropdown_mn_active" style="z-index: auto;"><span class="k-link">Plan<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group k-popup k-reset" style="display: none; max-height: 233.996px; overflow: auto; position: absolute; font-size: 14px; font-family: &quot;Roboto Regular&quot;, &quot;Segoe UI&quot;, Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: matrix(1, 0, 0, 1, 0, 0);" role="menu" data-role="popup"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" name="QuantityTracking" ng-click="selectProject('QuantityTracking')" role="menuitem"><span class="k-link">Quantity tracking</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" title="" name="WorkPlanning" ng-click="selectProject('WorkPlanning')" role="menuitem"><span class="k-link">Work packaging</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" name="DailyPlanning" ng-click="selectProject('DailyPlanning')" role="menuitem"><span class="k-link">Daily planning</span></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true" style="z-index: auto;"><span class="k-link">Inspect<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group k-popup k-reset" style="display: none; max-height: 233.996px; overflow: auto; position: absolute; font-size: 14px; font-family: &quot;Roboto Regular&quot;, &quot;Segoe UI&quot;, Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: matrix(1, 0, 0, 1, 0, 0);" role="menu" data-role="popup"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" navigate="https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/review/inspection-submissions" title="" ng-click="navigate('https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/review/inspection-submissions')" role="menuitem"><span class="k-link">Review</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" navigate="https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/inspections" title="" ng-click="navigate('https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/inspections')" role="menuitem"><span class="k-link">Inspection setup</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" navigate="https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/questions" title="" ng-click="navigate('https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/questions')" role="menuitem"><span class="k-link">Question setup</span></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true" style="z-index: auto;"><span class="k-link">Report<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group k-popup k-reset" style="display: none; max-height: 233.996px; overflow: auto; position: absolute; font-size: 14px; font-family: &quot;Roboto Regular&quot;, &quot;Segoe UI&quot;, Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: translateX(-112px);" role="menu" data-role="popup" aria-hidden="true"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppReport/Reporting/Dashboard/">Dashboards</a></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppReport/Reporting/Reports/">Reports</a></li></ul></li><li class="k-item k-state-default k-separator ng-scope" role="menuitem">&nbsp;</li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" name="Model manager" ng-show="true" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppInfinyD/">Model Manager</a></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Estimate<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-disabled platform-menu-ellipsis-tooltip k-state-default k-first" title="You have no environments. Contact your administrator" name="LaunchEstimate" ng-click="selectEnvironment()" ng-class="{false:'k-state-disabled', true:'k-state-default'}[isLaunchEstimate]" role="menuitem" aria-disabled="true"><span class="k-link">Launch Estimate</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" navigate="https://in8-dev.hds.ineight.com/AppCore/environmentsetup/environments" title="" name="Environment" ng-click="navigate('https://in8-dev.hds.ineight.com/AppCore/','estimate')" role="menuitem"><span class="k-link">Environment setup</span></li></ul></li><li class="k-item k-state-default k-separator ng-scope" role="menuitem">&nbsp;</li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Benchmarking<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppBenchmark/">Home</a></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppBenchmark/ManageRecords/Index#/">Manage records</a></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppBenchmark/ManageCalculations/Index#/">Manage calculations</a></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" name="HDDesign" ng-click="selectProject('HDDesign')" ng-show="true" role="menuitem"><span class="k-link">Design</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-last ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Billing<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip k-first" title="" name="Invoice" ng-click="selectProject('Invoice')" role="menuitem"><span class="k-link">Invoices</span></li></ul></li></ul>
      </li>
    </ul>
  </div>
  <div style="text-align: center; font-size: 20px; font-weight: 400; font-family: Roboto Regular;" class="ng-binding">Business Planning Tool</div>
  <div style="width: 128px">
    <ul id="platform-settings-menu-dropdown" site-menu="" class="platform-bg-transparent k-hide-arrows k-widget k-reset k-header k-menu k-menu-horizontal" style="float: right" data-role="menu" tabindex="0" role="menubar">
      <li class="platform-bg-transparent  k-item k-state-default k-first" style="border-width: 0" role="menuitem">
        <span class="k-link"><span class="icon icon-help platform-icon-menu"></span><span class="k-icon k-i-arrow-s"></span></span>
      </li>
      <li class="platform-bg-transparent  k-item k-state-default k-first" style="border-width: 0" role="menuitem" (click)="settingsClick()">
        <span class="k-link"><span class="icon icon-settings platform-icon-menu"></span><span class="k-icon k-i-arrow-s"></span></span>
      </li>
      <li class="platform-bg-transparent k-item k-state-default k-last" style="border-width: 0; cursor: pointer" role="menuitem" (click)="toggleUserInformation()">
        <img class="media-object img-circle" src="favicon.ico" style="height:35px;width:35px;" alt="...">
      </li>
    </ul>
    <div style="clear: both"></div>
  </div>
  <span id="userNotification" kendo-notification="userNotification" k-options="userNotificationOptions" data-role="notification" style=""></span>
</div>

<!-- added the style display: none as it is distoring the existing UI of BPT -->
<div [@userInformationAnimation]="showUserInformationPanel" class="kiewit-userInfo shadow-right-bottom" style="display:none">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object img-circle" src="../assets/images/icons/64x64.jpg" alt="...">
          </a>
        </div>
        <div class="media-body">
          Gonzalo Ferrando
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <span class="badge yellow">3</span>
      <span class="badge red">4</span>
      View alerts
    </li>
    <li class="list-group-item">
      User profile
    </li>
  </ul>
  <hr />
  <button type="button" class="btn btn-default pull-right">Sign out</button>
</div>
Implementation
In Type Script File

import {
  Component, Output, Input, OnInit, ElementRef, Renderer,
  EventEmitter, trigger, animate, transition, state, style, ViewChild
} from '@angular/core';
@Component({
  selector: 'kiewit-header',
  templateUrl: './kiewit-header.component.html',
  styleUrls: ['./kiewit-header.component.css']
});
export class KiewitHeaderComponent implements OnInit {

  private menuItems: any = [];
  constructor() {
    super();
    this.menuItems = [];
    this.getMenuItems(); // for binding menu items
  }
  getMenuItems() {
    this.dashboardService.getMenuItems().subscribe(data => {
      this.menuItems = data;
    });
  }
  subMenuOnClick(eventData) { }
}
         
In HTML File

 <kiewit-header [isMenuEnabled]="true" [menuItems]="menuItems" (subMenuClick)="subMenuOnClick($event)"></kiewit-header>
         
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""