moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
111 lines • 9.99 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>`
*
*/
export class HeaderComponent {
/**
* @param {?} router
*/
constructor(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 {?}
*/
ngOnInit() {
this.router.events.pipe(filter((/**
* @param {?} ev
* @return {?}
*/
ev => ev instanceof NavigationEnd))).subscribe(this.updateSkipContentLink.bind(this));
this.updateSkipContentLink();
}
/**
* @param {?} url
* @return {?}
*/
routeIsActive(url) {
return this.router.url.includes(url);
}
/**
* @return {?}
*/
updateSkipContentLink() {
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"
/**
* @private
* @return {?}
*/
generateSkipToContentLink() {
// 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 = () => [
{ type: Router }
];
HeaderComponent.propDecorators = {
serviceName: [{ type: Input }],
urlBaseName: [{ type: Input }],
logoSrc: [{ type: Input }],
shouldShowPrintLogo: [{ type: Input }],
printLogoSrc: [{ type: Input }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vaC1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvaGVhZGVyL2hlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7QUFleEMsTUFBTSxPQUFPLGVBQWU7Ozs7SUFXMUIsWUFBb0IsTUFBYztRQUFkLFdBQU0sR0FBTixNQUFNLENBQVE7UUFUekIsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFDekIsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFDekIsWUFBTyxHQUFXLHlCQUF5QixDQUFDO1FBQzVDLHdCQUFtQixHQUFZLEtBQUssQ0FBQztRQUNyQyxpQkFBWSxHQUFXLHVCQUF1QixDQUFDO1FBR2hELHNCQUFpQixHQUFHLFVBQVUsQ0FBQztJQUd2QyxDQUFDOzs7O0lBRUQsUUFBUTtRQUVOLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDckIsTUFBTTs7OztRQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxZQUFZLGFBQWEsRUFBQyxDQUMxQyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFFbkQsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7SUFDL0IsQ0FBQzs7Ozs7SUFFRCxhQUFhLENBQUMsR0FBVztRQUN2QixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN2QyxDQUFDOzs7O0lBRUQscUJBQXFCO1FBQ25CLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7SUFDdkQsQ0FBQzs7Ozs7Ozs7O0lBTU8seUJBQXlCO1FBQy9CLGdDQUFnQztRQUNoQyxJQUFJLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRTtZQUMvRCxPQUFPLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDO1NBQzdCO1FBRUQsT0FBTyxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLFVBQVUsQ0FBQztJQUNuRixDQUFDOzs7WUEvQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxlQUFlO2dCQUN6Qiw0eEJBQXNDOzthQUV2Qzs7OztZQWZRLE1BQU07OzswQkFrQlosS0FBSzswQkFDTCxLQUFLO3NCQUNMLEtBQUs7a0NBQ0wsS0FBSzsyQkFDTCxLQUFLOzs7O0lBSk4sc0NBQWtDOztJQUNsQyxzQ0FBa0M7O0lBQ2xDLGtDQUFxRDs7SUFDckQsOENBQThDOztJQUM5Qyx1Q0FBd0Q7O0lBRXhELHVDQUFvQjs7Ozs7SUFDcEIsNENBQXVDOzs7OztJQUUzQixpQ0FBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgUm91dGVyLCBOYXZpZ2F0aW9uRW5kIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcclxuaW1wb3J0IHsgZmlsdGVyIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5cclxuLyoqXHJcbiAqIEhlYWRlckNvbXBvbmVudCBpcyB0aGUgc3R5bGl6ZWQgYmx1ZSBoZWFkZXIgYXQgdGhlIHRvcCBvZiBldmVyeSBzaW5nbGVcclxuICogYXBwbGljYXRpb24uICBJdCBoYXMgYSBidWlsdC1pbiBcIlNraXAgdG8gQ29udGVudFwiIHRhYi1hY2Nlc3NpYmxlIHNlY3Rpb25cclxuICogdGhhdCdzIGJlc3QgcHJhY3RpY2UgZm9yIHNjcmVlbiByZWFkZXJzLiAgKipZb3UgbXVzdCBjcmVhdGUgYW4gZWxlbWVudCB3aXRoXHJcbiAqIGBpZD0nY29udGVudCdgIGZvciB0aGlzIHRvIHdvcmshKiogIEJlc3QgcHJhY3RpY2UgaXMgdG8gcHV0IHRoaXMgXCJjb250ZW50XCJcclxuICogZWxlbWVudCBhcyBhIHdyYXBwZXIgYXJvdWQgeW91ciBgPHJvdXRlci1vdXRsZXQ+YFxyXG4gKlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjb21tb24taGVhZGVyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9oZWFkZXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgSGVhZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCkgc2VydmljZU5hbWU6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIHVybEJhc2VOYW1lOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSBsb2dvU3JjOiBzdHJpbmcgPSAnYXNzZXRzL2dvdjNfYmNfbG9nby5wbmcnO1xyXG4gIEBJbnB1dCgpIHNob3VsZFNob3dQcmludExvZ286IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBwcmludExvZ29TcmM6IHN0cmluZyA9ICdhc3NldHMvbG9nb19wcmludC5wbmcnO1xyXG5cclxuICBwdWJsaWMgc2tpcExpbmtQYXRoO1xyXG4gIHByaXZhdGUgU0tJUF9DT05URU5UX0hBU0ggPSAnI2NvbnRlbnQnO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJvdXRlcjogUm91dGVyICkge1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcblxyXG4gICAgdGhpcy5yb3V0ZXIuZXZlbnRzLnBpcGUoXHJcbiAgICAgIGZpbHRlcihldiA9PiBldiBpbnN0YW5jZW9mIE5hdmlnYXRpb25FbmQpLFxyXG4gICAgKS5zdWJzY3JpYmUodGhpcy51cGRhdGVTa2lwQ29udGVudExpbmsuYmluZCh0aGlzKSk7XHJcblxyXG4gICAgdGhpcy51cGRhdGVTa2lwQ29udGVudExpbmsoKTtcclxuICB9XHJcblxyXG4gIHJvdXRlSXNBY3RpdmUodXJsOiBzdHJpbmcpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLnJvdXRlci51cmwuaW5jbHVkZXModXJsKTtcclxuICB9XHJcblxyXG4gIHVwZGF0ZVNraXBDb250ZW50TGluaygpIHtcclxuICAgIHRoaXMuc2tpcExpbmtQYXRoID0gdGhpcy5nZW5lcmF0ZVNraXBUb0NvbnRlbnRMaW5rKCk7XHJcbiAgfVxyXG5cclxuICAvLyBTbGlnaHRseSBjb21wbGljYXRlZCBiZWNhdXNlIHdlIGhhdmUgdG8gaW5jbHVkZSB0aGUgZGVwbG95VXJsIGluIG1hbnVhbGx5LlxyXG4gIC8vIElmIGRlcGxveVVybCBjaGFuZ2VzIHRoaXMgY29kZSBtdXN0IHRvby5cclxuICAvL1xyXG4gIC8vIFwiaHR0cDovL2Z1bGwtdXJsLmNvbS9mcGNhcmUvZXhhbXBsZSNjb250ZW50XCJcclxuICBwcml2YXRlIGdlbmVyYXRlU2tpcFRvQ29udGVudExpbmsoKTogc3RyaW5nIHtcclxuICAgIC8vIGRvbid0IGFkZCBkdXBsaWNhdGUgI2NvbnRlbnRzXHJcbiAgICBpZiAod2luZG93LmxvY2F0aW9uLmhyZWYuaW5kZXhPZih0aGlzLlNLSVBfQ09OVEVOVF9IQVNIKSAhPT0gLTEpIHtcclxuICAgICAgcmV0dXJuIHdpbmRvdy5sb2NhdGlvbi5ocmVmO1xyXG4gICAgfVxyXG5cclxuICAgIHJldHVybiBgJHt3aW5kb3cubG9jYXRpb24ub3JpZ2lufS8ke3RoaXMudXJsQmFzZU5hbWUgKyB0aGlzLnJvdXRlci51cmx9I2NvbnRlbnRgO1xyXG4gIH1cclxufVxyXG4iXX0=