moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
133 lines • 11.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
/**
* HeaderComponent is the stylized blue header at the top of every single
* application. It has a built-in "Skip to Content" tab-accessible section
* that's best practice for screen readers. **You must create an element with
* `id='content'` for this to work!** Best practice is to put this "content"
* element as a wrapper aroud your `<router-outlet>`
*
*/
var HeaderComponent = /** @class */ (function () {
function HeaderComponent(router) {
this.router = router;
this.serviceName = '';
this.urlBaseName = '';
this.logoSrc = 'assets/gov3_bc_logo.png';
this.shouldShowPrintLogo = false;
this.printLogoSrc = 'assets/logo_print.png';
this.SKIP_CONTENT_HASH = '#content';
}
/**
* @return {?}
*/
HeaderComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.router.events.pipe(filter((/**
* @param {?} ev
* @return {?}
*/
function (ev) { return ev instanceof NavigationEnd; }))).subscribe(this.updateSkipContentLink.bind(this));
this.updateSkipContentLink();
};
/**
* @param {?} url
* @return {?}
*/
HeaderComponent.prototype.routeIsActive = /**
* @param {?} url
* @return {?}
*/
function (url) {
return this.router.url.includes(url);
};
/**
* @return {?}
*/
HeaderComponent.prototype.updateSkipContentLink = /**
* @return {?}
*/
function () {
this.skipLinkPath = this.generateSkipToContentLink();
};
// Slightly complicated because we have to include the deployUrl in manually.
// If deployUrl changes this code must too.
//
// "http://full-url.com/fpcare/example#content"
// Slightly complicated because we have to include the deployUrl in manually.
// If deployUrl changes this code must too.
//
// "http://full-url.com/fpcare/example#content"
/**
* @private
* @return {?}
*/
HeaderComponent.prototype.generateSkipToContentLink =
// Slightly complicated because we have to include the deployUrl in manually.
// If deployUrl changes this code must too.
//
// "http://full-url.com/fpcare/example#content"
/**
* @private
* @return {?}
*/
function () {
// don't add duplicate #contents
if (window.location.href.indexOf(this.SKIP_CONTENT_HASH) !== -1) {
return window.location.href;
}
return window.location.origin + "/" + (this.urlBaseName + this.router.url) + "#content";
};
HeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'common-header',
template: "<header>\r\n <div class=\"container-fluid header-container d-flex justify-content-between align-items-center flex-wrap\">\r\n <div class='d-flex flex-wrap'>\r\n <a [href]='skipLinkPath' class='skip-to-content order-3'>Skip to main content</a>\r\n <a href=\"http://www2.gov.bc.ca/\">\r\n <img class=\"header-logo\"\r\n tabindex=\"-1\"\r\n alt=\"B.C. Government Logo\"\r\n src=\"{{logoSrc}}\">\r\n <img *ngIf=\"shouldShowPrintLogo\"\r\n class=\"header-logo-print\"\r\n tabindex=\"-1\"\r\n alt=\"B.C. Government Print Logo\"\r\n src=\"{{printLogoSrc}}\">\r\n </a>\r\n <span class=\"title px-2 mt-1\">{{serviceName}}</span>\r\n </div>\r\n </div>\r\n</header>\r\n",
styles: ["header nav{background-color:#036;border-bottom:2px solid #fcba19;box-shadow:0 3px 3px 1px rgba(51,51,51,.5);margin-bottom:20px}header{background-color:#036;border-bottom:2px solid #fcba19;padding-top:10px;padding-bottom:20px}@media (max-width:767.98px){header{padding-top:2px;padding-bottom:8px}}header .title{font-size:30px;font-weight:700;color:#fff;-ms-grid-row-align:center;align-self:center}@media (max-width:575.98px){header .title{font-size:24px}}header .header-logo-print{display:none}header .nav-link{color:#fff!important}.separator:after{content:\" \";background-color:#ffffff33;height:100%;min-height:100%;display:block;width:3px;margin:0 1em}.header-container{margin-top:-1em}.header-container>.d-flex{margin-top:1em}.skip-to-content{color:#fff;border-radius:2px;border:2px solid #fff;cursor:pointer;display:inline-block;text-decoration:underline;width:109px;text-align:center;background:rgba(255,255,255,.1);opacity:0;height:0}.skip-to-content:focus{opacity:1;height:auto}"]
}] }
];
/** @nocollapse */
HeaderComponent.ctorParameters = function () { return [
{ type: Router }
]; };
HeaderComponent.propDecorators = {
serviceName: [{ type: Input }],
urlBaseName: [{ type: Input }],
logoSrc: [{ type: Input }],
shouldShowPrintLogo: [{ type: Input }],
printLogoSrc: [{ type: Input }]
};
return HeaderComponent;
}());
export { HeaderComponent };
if (false) {
/** @type {?} */
HeaderComponent.prototype.serviceName;
/** @type {?} */
HeaderComponent.prototype.urlBaseName;
/** @type {?} */
HeaderComponent.prototype.logoSrc;
/** @type {?} */
HeaderComponent.prototype.shouldShowPrintLogo;
/** @type {?} */
HeaderComponent.prototype.printLogoSrc;
/** @type {?} */
HeaderComponent.prototype.skipLinkPath;
/**
* @type {?}
* @private
*/
HeaderComponent.prototype.SKIP_CONTENT_HASH;
/**
* @type {?}
* @private
*/
HeaderComponent.prototype.router;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vaC1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvaGVhZGVyL2hlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7QUFVeEM7SUFnQkUseUJBQW9CLE1BQWM7UUFBZCxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBVHpCLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBQ3pCLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBQ3pCLFlBQU8sR0FBVyx5QkFBeUIsQ0FBQztRQUM1Qyx3QkFBbUIsR0FBWSxLQUFLLENBQUM7UUFDckMsaUJBQVksR0FBVyx1QkFBdUIsQ0FBQztRQUdoRCxzQkFBaUIsR0FBRyxVQUFVLENBQUM7SUFHdkMsQ0FBQzs7OztJQUVELGtDQUFROzs7SUFBUjtRQUVFLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDckIsTUFBTTs7OztRQUFDLFVBQUEsRUFBRSxJQUFJLE9BQUEsRUFBRSxZQUFZLGFBQWEsRUFBM0IsQ0FBMkIsRUFBQyxDQUMxQyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFFbkQsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7SUFDL0IsQ0FBQzs7Ozs7SUFFRCx1Q0FBYTs7OztJQUFiLFVBQWMsR0FBVztRQUN2QixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN2QyxDQUFDOzs7O0lBRUQsK0NBQXFCOzs7SUFBckI7UUFDRSxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDO0lBQ3ZELENBQUM7SUFFRCw2RUFBNkU7SUFDN0UsMkNBQTJDO0lBQzNDLEVBQUU7SUFDRiwrQ0FBK0M7Ozs7Ozs7OztJQUN2QyxtREFBeUI7Ozs7Ozs7OztJQUFqQztRQUNFLGdDQUFnQztRQUNoQyxJQUFJLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRTtZQUMvRCxPQUFPLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDO1NBQzdCO1FBRUQsT0FBVSxNQUFNLENBQUMsUUFBUSxDQUFDLE1BQU0sVUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxjQUFVLENBQUM7SUFDbkYsQ0FBQzs7Z0JBL0NGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsNHhCQUFzQzs7aUJBRXZDOzs7O2dCQWZRLE1BQU07Ozs4QkFrQlosS0FBSzs4QkFDTCxLQUFLOzBCQUNMLEtBQUs7c0NBQ0wsS0FBSzsrQkFDTCxLQUFLOztJQXFDUixzQkFBQztDQUFBLEFBaERELElBZ0RDO1NBM0NZLGVBQWU7OztJQUUxQixzQ0FBa0M7O0lBQ2xDLHNDQUFrQzs7SUFDbEMsa0NBQXFEOztJQUNyRCw4Q0FBOEM7O0lBQzlDLHVDQUF3RDs7SUFFeEQsdUNBQW9COzs7OztJQUNwQiw0Q0FBdUM7Ozs7O0lBRTNCLGlDQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBSb3V0ZXIsIE5hdmlnYXRpb25FbmQgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xyXG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcblxyXG4vKipcclxuICogSGVhZGVyQ29tcG9uZW50IGlzIHRoZSBzdHlsaXplZCBibHVlIGhlYWRlciBhdCB0aGUgdG9wIG9mIGV2ZXJ5IHNpbmdsZVxyXG4gKiBhcHBsaWNhdGlvbi4gIEl0IGhhcyBhIGJ1aWx0LWluIFwiU2tpcCB0byBDb250ZW50XCIgdGFiLWFjY2Vzc2libGUgc2VjdGlvblxyXG4gKiB0aGF0J3MgYmVzdCBwcmFjdGljZSBmb3Igc2NyZWVuIHJlYWRlcnMuICAqKllvdSBtdXN0IGNyZWF0ZSBhbiBlbGVtZW50IHdpdGhcclxuICogYGlkPSdjb250ZW50J2AgZm9yIHRoaXMgdG8gd29yayEqKiAgQmVzdCBwcmFjdGljZSBpcyB0byBwdXQgdGhpcyBcImNvbnRlbnRcIlxyXG4gKiBlbGVtZW50IGFzIGEgd3JhcHBlciBhcm91ZCB5b3VyIGA8cm91dGVyLW91dGxldD5gXHJcbiAqXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NvbW1vbi1oZWFkZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2hlYWRlci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIZWFkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSBzZXJ2aWNlTmFtZTogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgdXJsQmFzZU5hbWU6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIGxvZ29TcmM6IHN0cmluZyA9ICdhc3NldHMvZ292M19iY19sb2dvLnBuZyc7XHJcbiAgQElucHV0KCkgc2hvdWxkU2hvd1ByaW50TG9nbzogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHByaW50TG9nb1NyYzogc3RyaW5nID0gJ2Fzc2V0cy9sb2dvX3ByaW50LnBuZyc7XHJcblxyXG4gIHB1YmxpYyBza2lwTGlua1BhdGg7XHJcbiAgcHJpdmF0ZSBTS0lQX0NPTlRFTlRfSEFTSCA9ICcjY29udGVudCc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcm91dGVyOiBSb3V0ZXIgKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuXHJcbiAgICB0aGlzLnJvdXRlci5ldmVudHMucGlwZShcclxuICAgICAgZmlsdGVyKGV2ID0+IGV2IGluc3RhbmNlb2YgTmF2aWdhdGlvbkVuZCksXHJcbiAgICApLnN1YnNjcmliZSh0aGlzLnVwZGF0ZVNraXBDb250ZW50TGluay5iaW5kKHRoaXMpKTtcclxuXHJcbiAgICB0aGlzLnVwZGF0ZVNraXBDb250ZW50TGluaygpO1xyXG4gIH1cclxuXHJcbiAgcm91dGVJc0FjdGl2ZSh1cmw6IHN0cmluZyk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMucm91dGVyLnVybC5pbmNsdWRlcyh1cmwpO1xyXG4gIH1cclxuXHJcbiAgdXBkYXRlU2tpcENvbnRlbnRMaW5rKCkge1xyXG4gICAgdGhpcy5za2lwTGlua1BhdGggPSB0aGlzLmdlbmVyYXRlU2tpcFRvQ29udGVudExpbmsoKTtcclxuICB9XHJcblxyXG4gIC8vIFNsaWdodGx5IGNvbXBsaWNhdGVkIGJlY2F1c2Ugd2UgaGF2ZSB0byBpbmNsdWRlIHRoZSBkZXBsb3lVcmwgaW4gbWFudWFsbHkuXHJcbiAgLy8gSWYgZGVwbG95VXJsIGNoYW5nZXMgdGhpcyBjb2RlIG11c3QgdG9vLlxyXG4gIC8vXHJcbiAgLy8gXCJodHRwOi8vZnVsbC11cmwuY29tL2ZwY2FyZS9leGFtcGxlI2NvbnRlbnRcIlxyXG4gIHByaXZhdGUgZ2VuZXJhdGVTa2lwVG9Db250ZW50TGluaygpOiBzdHJpbmcge1xyXG4gICAgLy8gZG9uJ3QgYWRkIGR1cGxpY2F0ZSAjY29udGVudHNcclxuICAgIGlmICh3aW5kb3cubG9jYXRpb24uaHJlZi5pbmRleE9mKHRoaXMuU0tJUF9DT05URU5UX0hBU0gpICE9PSAtMSkge1xyXG4gICAgICByZXR1cm4gd2luZG93LmxvY2F0aW9uLmhyZWY7XHJcbiAgICB9XHJcblxyXG4gICAgcmV0dXJuIGAke3dpbmRvdy5sb2NhdGlvbi5vcmlnaW59LyR7dGhpcy51cmxCYXNlTmFtZSArIHRoaXMucm91dGVyLnVybH0jY29udGVudGA7XHJcbiAgfVxyXG59XHJcbiJdfQ==