ng-responsive-nav
Version:
A mobile friendly navigation solution
56 lines • 6.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: app/desktop-navigation/desktop-navigation.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Inject } from '@angular/core';
import { NavConfig } from '../models/nav.config';
import { WINDOW } from '../window/window.provider';
var DesktopNavigationComponent = /** @class */ (function () {
function DesktopNavigationComponent(navConfig, window) {
this.canFadeBoxShadowOut = false;
this.navConfig = navConfig;
this._window = window;
}
/**
* @return {?}
*/
DesktopNavigationComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._window.addEventListener('scroll', (/**
* @return {?}
*/
function () {
_this.canFadeBoxShadowOut = _this._window.scrollY > 0;
}));
};
DesktopNavigationComponent.decorators = [
{ type: 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}"]
}] }
];
/** @nocollapse */
DesktopNavigationComponent.ctorParameters = function () { return [
{ type: NavConfig },
{ type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] }
]; };
return DesktopNavigationComponent;
}());
export { DesktopNavigationComponent };
if (false) {
/** @type {?} */
DesktopNavigationComponent.prototype.navConfig;
/** @type {?} */
DesktopNavigationComponent.prototype.canFadeBoxShadowOut;
/**
* @type {?}
* @private
*/
DesktopNavigationComponent.prototype._window;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVza3RvcC1uYXZpZ2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLXJlc3BvbnNpdmUtbmF2LyIsInNvdXJjZXMiOlsiYXBwL2Rlc2t0b3AtbmF2aWdhdGlvbi9kZXNrdG9wLW5hdmlnYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFDeEQsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxNQUFNLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUVqRDtJQVdFLG9DQUFZLFNBQW9CLEVBQWtCLE1BQWM7UUFKekQsd0JBQW1CLEdBQUcsS0FBSyxDQUFDO1FBS2pDLElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1FBQzNCLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO0lBQ3hCLENBQUM7Ozs7SUFFTSw2Q0FBUTs7O0lBQWY7UUFBQSxpQkFJQztRQUhDLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsUUFBUTs7O1FBQUU7WUFDdEMsS0FBSSxDQUFDLG1CQUFtQixHQUFHLEtBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxHQUFHLENBQUMsQ0FBQztRQUN0RCxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7O2dCQXBCRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLHdCQUF3QjtvQkFDbEMsZ2dDQUFrRDs7aUJBRW5EOzs7O2dCQVBPLFNBQVM7Z0JBYzJDLE1BQU0sdUJBQTdCLE1BQU0sU0FBQyxNQUFNOztJQVdsRCxpQ0FBQztDQUFBLEFBdEJELElBc0JDO1NBakJZLDBCQUEwQjs7O0lBQ3JDLCtDQUE0Qjs7SUFDNUIseURBQW1DOzs7OztJQUVuQyw2Q0FBaUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5qZWN0LCBPbkluaXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge05hdkNvbmZpZ30gZnJvbSAnLi4vbW9kZWxzL25hdi5jb25maWcnO1xyXG5pbXBvcnQge1dJTkRPV30gZnJvbSAnLi4vd2luZG93L3dpbmRvdy5wcm92aWRlcic7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1kZXNrdG9wLW5hdmlnYXRpb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kZXNrdG9wLW5hdmlnYXRpb24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2Rlc2t0b3AtbmF2aWdhdGlvbi5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEZXNrdG9wTmF2aWdhdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgcHVibGljIG5hdkNvbmZpZzogTmF2Q29uZmlnO1xyXG4gIHB1YmxpYyBjYW5GYWRlQm94U2hhZG93T3V0ID0gZmFsc2U7XHJcblxyXG4gIHByaXZhdGUgcmVhZG9ubHkgX3dpbmRvdzogV2luZG93O1xyXG5cclxuICBjb25zdHJ1Y3RvcihuYXZDb25maWc6IE5hdkNvbmZpZywgQEluamVjdChXSU5ET1cpIHdpbmRvdzogV2luZG93KSB7XHJcbiAgICB0aGlzLm5hdkNvbmZpZyA9IG5hdkNvbmZpZztcclxuICAgIHRoaXMuX3dpbmRvdyA9IHdpbmRvdztcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuX3dpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCAoKSA9PiB7XHJcbiAgICAgIHRoaXMuY2FuRmFkZUJveFNoYWRvd091dCA9IHRoaXMuX3dpbmRvdy5zY3JvbGxZID4gMDtcclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbn1cclxuIl19