ng-responsive-nav/bundles/ng-responsive-nav.umd.min.js

A mobile friendly navigation solution

!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser"),require("@angular/router"),require("rxjs"),require("@fortawesome/free-solid-svg-icons/faBars"),require("@fortawesome/free-solid-svg-icons"),require("@fortawesome/angular-fontawesome")):"function"==typeof define&&define.amd?define("ng-responsive-nav",["exports","@angular/core","@angular/common","@angular/platform-browser","@angular/router","rxjs","@fortawesome/free-solid-svg-icons/faBars","@fortawesome/free-solid-svg-icons","@fortawesome/angular-fontawesome"],i):i((n=n||self)["ng-responsive-nav"]={},n.ng.core,n.ng.common,n.ng.platformBrowser,n.ng.router,n.rxjs,n.faBars,n.freeSolidSvgIcons,n.angularFontawesome)}(this,(function(n,i,o,e,t,r,a,l,s){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */var g=function(n,i){return(g=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,i){n.__proto__=i}||function(n,i){for(var o in i)i.hasOwnProperty(o)&&(n[o]=i[o])})(n,i)};function c(n,i){var o="function"==typeof Symbol&&n[Symbol.iterator];if(!o)return n;var e,t,r=o.call(n),a=[];try{for(;(void 0===i||i-- >0)&&!(e=r.next()).done;)a.push(e.value)}catch(n){t={error:n}}finally{try{e&&!e.done&&(o=r.return)&&o.call(r)}finally{if(t)throw t.error}}return a}function d(){for(var n=[],i=0;i<arguments.length;i++)n=n.concat(c(arguments[i]));return n}var m=function(){function n(){}return n.decorators=[{type:i.Component,args:[{selector:"ng-responsive-nav",template:'<app-desktop-navigation class="display-flex">\r\n  <div desktopExtras>\r\n    <ng-content select="[ngDesktopNavExtras]"></ng-content>\r\n  </div>\r\n</app-desktop-navigation>\r\n\r\n<app-mobile-navigation-component>\r\n  <div mobileExtras>\r\n    <ng-content select="[ngMobileNavExtras]"></ng-content>\r\n  </div>\r\n</app-mobile-navigation-component>\r\n',styles:[".link.desktop-link{margin:0 7px}.link.desktop-link.primary{text-decoration:none}.link.desktop-link.primary:hover{-webkit-filter:brightness(60%);filter:brightness(60%);text-decoration:underline}.link.desktop-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.link.mobile-link{margin:7px 0}.link.mobile-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.display-flex{display:flex}"]}]}],n}(),u=function(){};var v=new i.InjectionToken("WindowToken"),f=function(){function n(n,i){this.canFadeBoxShadowOut=!1,this.navConfig=n,this._window=i}return n.prototype.ngOnInit=function(){var n=this;this._window.addEventListener("scroll",(function(){n.canFadeBoxShadowOut=n._window.scrollY>0}))},n.decorators=[{type:i.Component,args:[{selector:"app-desktop-navigation",template:'<div class="navigation-container"\r\n     [ngStyle]="{\r\n      \'background-color\': navConfig.navBrandConfig.colorPalette.backGroundColor,\r\n      \'z-index\': navConfig.navBrandConfig.zIndex,\r\n      \'box-shadow\': navConfig.navBrandConfig.boxShadow === true ? \'0 0.5rem 1rem rgba(0, 0, 0, 0.15)\' : \'none\'\r\n}">\r\n  <div class="navigation-inner-container">\r\n    <div class="navigation-links">\r\n      <img class="navigation-image"\r\n           [routerLink]="navConfig.navigationHomeRoute.routePath"\r\n           [src]="navConfig.navBrandConfig.brandImageUrl">\r\n      <a class="link desktop-link primary"\r\n         [ngStyle]="{ \'color\': navConfig.navBrandConfig.colorPalette.linkColor }"\r\n         *ngFor="let route of navConfig.navigationMenuRoutes"\r\n         [routerLink]="route.routePath">{{route.routeName}}</a>\r\n    </div>\r\n\r\n    <div class="navigation-extras">\r\n      <ng-content select="[desktopExtras]"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n',styles:[".link.desktop-link{margin:0 7px}.link.desktop-link.primary{text-decoration:none}.link.desktop-link.primary:hover{-webkit-filter:brightness(60%);filter:brightness(60%);text-decoration:underline}.link.desktop-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.link.mobile-link{margin:7px 0}.link.mobile-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.display-flex{display:flex}.navigation-container{height:64px;width:100%;position:fixed}@media only screen and (max-width:576px){.navigation-container{display:none}}.navigation-container .navigation-inner-container{display:flex!important;justify-content:space-between!important;height:100%}.navigation-container .navigation-inner-container .navigation-links{display:flex!important;align-items:center!important;height:100%}.navigation-container .navigation-inner-container .navigation-links .navigation-image{height:100%;cursor:pointer}.navigation-container .navigation-inner-container .navigation-extras{display:flex!important;align-items:center!important;height:100%;padding-right:1rem}"]}]}],n.ctorParameters=function(){return[{type:u},{type:Window,decorators:[{type:i.Inject,args:[v]}]}]},n}();var p=function(){function n(n,i,o){this.faBars=a.faBars,this.faTimes=l.faTimes,this.canActivateMobileNav=!1,this._subscriptions=new r.Subscription,this._router=n,this._document=i,this.navConfig=o}return n.prototype.ngOnInit=function(){this._document.body.style.overflowY="scroll",this._watchNavigationChanges(this._router)},n.prototype.ngOnDestroy=function(){this.canActivateMobileNav=!1,this._setOverFlowY(),this._subscriptions.unsubscribe()},n.prototype.toggleCanActivateMobileNavBar=function(){this.canActivateMobileNav=!this.canActivateMobileNav,this._setOverFlowY()},n.prototype._setOverFlowY=function(){this.canActivateMobileNav?this._document.body.style.overflowY="hidden":this._document.body.style.overflowY="scroll"},n.prototype._watchNavigationChanges=function(n){var i=this;this._subscriptions.add(n.events.subscribe((function(n){n instanceof t.NavigationEnd&&i.canActivateMobileNav&&i.toggleCanActivateMobileNavBar()})))},n.decorators=[{type:i.Component,args:[{selector:"app-mobile-navigation-component",template:'<div class="mobile-navigation-burger-menu-button circle-container"\r\n     [ngStyle]="{\r\n      \'background-color\': navConfig.navBrandConfig.colorPalette.primaryColor,\r\n      \'z-index\': navConfig.navBrandConfig.zIndex + 1\r\n     }"\r\n     (click)="toggleCanActivateMobileNavBar()"\r\n     [class.animation-slide-burger-right]="canActivateMobileNav"\r\n     [class.animation-slide-burger-left]="!canActivateMobileNav" >\r\n\r\n  <div class="mobile-navigation-burger-menu-button-inner" [ngStyle]="{\'z-index\': navConfig.navBrandConfig.zIndex + 1}">\r\n    <fa-icon class="icon" *ngIf="!canActivateMobileNav"  [ngStyle]="{ \'color\': navConfig.navBrandConfig.colorPalette.secondaryColor }" [icon]="faBars"></fa-icon>\r\n    <fa-icon class="icon" *ngIf="canActivateMobileNav" [ngStyle]="{ \'color\': navConfig.navBrandConfig.colorPalette.primaryColor }" [icon]="faTimes"></fa-icon>\r\n  </div>\r\n</div>\r\n\r\n<div appCheckOrientation class="mobile-navigation-menu" *ngIf="canActivateMobileNav" [ngStyle]="{\'z-index\': navConfig.navBrandConfig.zIndex}">\r\n  <div class="mobile-navigation-menu-items"\r\n       [ngStyle]="{ \'background-color\': navConfig.navBrandConfig.colorPalette.backGroundColor }"\r\n       [class.animation-slide-in-nav-menu]="canActivateMobileNav"\r\n       [class.animation-slide-out-nav-menu]="!canActivateMobileNav">\r\n\r\n    <div class="mobile-navigation-button-runner"\r\n         [ngStyle]="{ \'background-color\': navConfig.navBrandConfig.colorPalette.primaryColor }"\r\n         *ngIf="canActivateMobileNav">\r\n      <div class="runner-inner"></div>\r\n    </div>\r\n\r\n    <div class="mobile-navigation-links">\r\n      <div class="mobile-navigation-links-inner">\r\n        <img class="mobile-navigation-inner-icon"\r\n             [routerLink]="navConfig.navigationHomeRoute.routePath"\r\n             [src]="navConfig.navBrandConfig.brandImageUrl" />\r\n      </div>\r\n      <a class="link mobile-link"\r\n         *ngFor="let route of navConfig.navigationMenuRoutes"\r\n         [routerLink]="route.routePath"\r\n         [ngStyle]="{ \'color\': navConfig.navBrandConfig.colorPalette.primaryColor }">{{route.routeName}}</a>\r\n    </div>\r\n\r\n    <div class="mobile-navigation-extras">\r\n      <ng-content select="[mobileExtras]"></ng-content>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n',styles:["@-webkit-keyframes slide-burger-right{to{right:29%;margin:18px 0 0;background-color:transparent;color:#1976d2}}@keyframes slide-burger-right{to{right:29%;margin:18px 0 0;background-color:transparent;color:#1976d2}}@-webkit-keyframes slide-burger-left{from{right:29%}to{right:68%}}@keyframes slide-burger-left{from{right:29%}to{right:68%}}@-webkit-keyframes animation-slide-in-nav-left{from{right:100%}to{right:25%}}@keyframes animation-slide-in-nav-left{from{right:100%}to{right:25%}}@-webkit-keyframes animation-slide-in-left{from{right:100%}to{right:0}}@keyframes animation-slide-in-left{from{right:100%}to{right:0}}@-webkit-keyframes animation-slide-out-nav-right{from{right:0}to{right:100%}}@keyframes animation-slide-out-nav-right{from{right:0}to{right:100%}}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes rotate-clockwise{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate-clockwise{from{transform:rotate(0)}to{transform:rotate(360deg)}}.animation-slide-burger-right{-webkit-animation:.2s 75ms forwards slide-burger-right;animation:.2s 75ms forwards slide-burger-right}.animation-slide-burger-left{-webkit-animation:.2s forwards slide-burger-left;animation:.2s forwards slide-burger-left}.animation-slide-in-nav-menu{-webkit-animation:.2s forwards animation-slide-in-nav-left;animation:.2s forwards animation-slide-in-nav-left}.animation-slide-out-nav-menu{-webkit-animation:.2s forwards animation-slide-out-nav-right;animation:.2s forwards animation-slide-out-nav-right}.link.desktop-link{margin:0 7px}.link.desktop-link.primary{text-decoration:none}.link.desktop-link.primary:hover{-webkit-filter:brightness(60%);filter:brightness(60%);text-decoration:underline}.link.desktop-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.link.mobile-link{margin:7px 0}.link.mobile-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.display-flex{display:flex}.mobile-navigation-burger-menu-button{position:fixed;z-index:1001;font-size:1.25rem;color:#fff;width:50px;height:50px;text-align:center;cursor:pointer;margin:18px 59px 0 0;right:68%}.mobile-navigation-burger-menu-button .mobile-navigation-burger-menu-button-inner{padding-top:27%}.mobile-navigation-burger-menu-button .mobile-navigation-burger-menu-button-inner .icon{font-weight:600!important;padding-top:14px}.mobile-navigation-burger-menu-button.circle-container{border-radius:50%;color:#fff;border:none}.mobile-navigation-menu{height:100%;z-index:1}@media only screen and (min-width:576px){.mobile-navigation-burger-menu-button,.mobile-navigation-menu{display:none}}.mobile-navigation-menu .mobile-navigation-menu-items{box-shadow:7px 4px 12px -8px rgba(0,0,0,.75);width:75%;height:100%;z-index:1;position:fixed;color:#fff}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-extras{padding:12px!important;height:50vh;display:flex!important;flex-direction:column!important}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-button-runner{padding-right:3rem;z-index:13;height:3px;width:60%;margin-top:41px}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-button-runner .runner-inner{border-radius:50%;height:inherit;margin-top:.25rem;width:100%}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-links{display:flex!important;flex-direction:column!important;height:50vh;margin-top:3rem!important;text-align:center}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-links .mobile-navigation-links-inner{display:flex!important;justify-content:center!important}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-links .mobile-navigation-inner-icon{width:80px;height:80px;margin-bottom:12px;padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%}.mobile-navigation-menu .mobile-navigation-menu-items .sticky-bottom{height:400px}"]}]}],n.ctorParameters=function(){return[{type:t.Router},{type:Document,decorators:[{type:i.Inject,args:[o.DOCUMENT]}]},{type:u}]},n}();var b=function(){function n(n,i,o){this.window=i,this.mobileNavMenu=o,this.onInitialise()}return n.prototype.onInitialise=function(){var n=this;this.window.addEventListener("orientationchange",(function(){n._isLandScape()&&(n.mobileNavMenu.canActivateMobileNav=!1,document.body.style.overflowY="scroll")}))},n.prototype._isLandScape=function(){return this.window.outerWidth<this.window.outerHeight},n.decorators=[{type:i.Directive,args:[{selector:"[appCheckOrientation]"}]}],n.ctorParameters=function(){return[{type:Document,decorators:[{type:i.Inject,args:[o.DOCUMENT]}]},{type:Window,decorators:[{type:i.Inject,args:[v]}]},{type:p}]},n}();var h=function(){function n(){}return Object.defineProperty(n.prototype,"nativeWindow",{get:function(){throw new Error("Not Implemented")},enumerable:!0,configurable:!0}),n}(),y=function(n){function i(){return n.call(this)||this}return function(n,i){function o(){this.constructor=n}g(n,i),n.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}(i,n),Object.defineProperty(i.prototype,"nativeWindow",{get:function(){return window},enumerable:!0,configurable:!0}),i}(h);function k(n,i){return o.isPlatformBrowser(i)?n.nativeWindow:{}}var w=[{provide:h,useClass:y},{provide:v,useFactory:k,deps:[h,i.PLATFORM_ID]}],C={navBrandConfig:{colorPalette:{primaryColor:"#1976D2",secondaryColor:"#ffffff",linkActiveColor:"#1976D2",linkColor:"#1976D2",tertiaryColor:"#1976D2",backGroundColor:"#ffffff"},brandImageUrl:"https://placehold.it/300x300",zIndex:1,boxShadow:!0},navigationHomeRoute:{routePath:"/",routeName:"home"},navigationMenuRoutes:[]},x=function(){function n(){}return n.prototype._mapNavigationMenuRoutes=function(n){return n||C.navigationMenuRoutes},n.prototype._mapNavigationHomeRoute=function(n){return n||C.navigationHomeRoute},n.prototype._mapBrandConfig=function(n){return void 0!==n?{brandImageUrl:n.brandImageUrl?n.brandImageUrl:C.navBrandConfig.brandImageUrl,colorPalette:this._mapColorPalette(n.colorPalette),zIndex:n.zIndex?n.zIndex:C.navBrandConfig.zIndex,boxShadow:!1===n.boxShadow||!0===n.boxShadow?n.boxShadow:C.navBrandConfig.boxShadow}:C.navBrandConfig},n.prototype._mapColorPalette=function(n){return n?{primaryColor:n.primaryColor,secondaryColor:n.secondaryColor,linkActiveColor:n.linkActiveColor,linkColor:n.linkColor,tertiaryColor:n.tertiaryColor,backGroundColor:n.backGroundColor}:{primaryColor:C.navBrandConfig.colorPalette.primaryColor,secondaryColor:C.navBrandConfig.colorPalette.secondaryColor,linkActiveColor:C.navBrandConfig.colorPalette.linkActiveColor,linkColor:C.navBrandConfig.colorPalette.linkColor,tertiaryColor:C.navBrandConfig.colorPalette.tertiaryColor,backGroundColor:C.navBrandConfig.colorPalette.backGroundColor}},n.prototype.for=function(n){return{navigationMenuRoutes:this._mapNavigationMenuRoutes(n.navigationMenuRoutes),navigationHomeRoute:this._mapNavigationHomeRoute(n.navigationHomeRoute),navBrandConfig:this._mapBrandConfig(n.navBrandConfig)}},n}(),N=[f,p,b,m],B=function(){function n(){}return n.forRoot=function(i){var o=(new x).for(i);return{ngModule:n,providers:[{provide:u,useValue:o}]}},n.decorators=[{type:i.NgModule,args:[{declarations:d(N),imports:[o.CommonModule,e.BrowserModule,t.RouterModule,s.FontAwesomeModule],exports:[m],providers:[w]}]}],n}(),M=function(){};var _=function(){};n.BrowserWindowRef=y,n.DesktopNavigationComponent=f,n.MobileNavigationComponent=p,n.NavBrandConfig=M,n.NavConfig=u,n.NavigationMenuRoute=_,n.NgResponsiveNavComponent=m,n.NgResponsiveNavModule=B,n.WINDOW=v,n.WINDOW_PROVIDERS=w,n.WindowFactory=k,n.WindowRef=h,n.ɵa=b,Object.defineProperty(n,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-responsive-nav.umd.min.js.map