moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
151 lines • 13.7 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, ViewChild, ElementRef, ViewChildren, QueryList, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';
/**
* NPM Dependencies:
* a) rxjs
* b) ngx-bootstrap
*/
export class WizardProgressBarComponent {
/**
* @param {?} router
* @param {?} cd
*/
constructor(router, cd) {
this.router = router;
this.cd = cd;
this.progressSteps = [];
}
/**
* @return {?}
*/
ngOnInit() {
// Update the progress bar view on route change and _only_ route chaange.
// Skip most of Angular's ChangeDetection in favour of manually optimizing.
this.routerEvents$ = this.router.events.pipe(filter((/**
* @param {?} ev
* @return {?}
*/
ev => ev instanceof NavigationEnd)), map((/**
* @param {?} ev
* @return {?}
*/
(ev) => ev.url))).subscribe((/**
* @param {?} url
* @return {?}
*/
url => {
this.activeIndex = this.getActiveIndex(url);
this.cd.detectChanges();
this.scrollStepIntoView();
}));
// Must schedule first run manually, or bar won't be set.
this.activeIndex = this.getActiveIndex(this.router.url);
}
/**
* @return {?}
*/
ngOnDestroy() {
this.cd.detach();
this.routerEvents$.unsubscribe();
}
/**
* @return {?}
*/
calculateProgressPercentage() {
/** @type {?} */
const denominator = this.progressSteps.length;
/** @type {?} */
const numerator = this.activeIndex + 1;
if (denominator === 0 || numerator > denominator) {
return 100;
}
// Because we've switched from space-evenly to space-around (for IE), we
// have to handle the half-space that space-around adds to the start/end of
// the container
/** @type {?} */
const halfSpace = 1 / (denominator * 2);
return Math.round(((numerator / denominator) - halfSpace) * 100);
}
/**
* @param {?} url
* @return {?}
*/
getActiveIndex(url) {
return this.progressSteps.findIndex((/**
* @param {?} x
* @return {?}
*/
x => url.endsWith(x.route)));
}
/**
* Primarily for mobile, this horizontally scrolls the step into view.
*
* Note - be very careful with any changes to this function because it steps
* outside of Angular to call native browser functions.
* @private
* @return {?}
*/
scrollStepIntoView() {
/** @type {?} */
const target = this.steps.toArray()[this.activeIndex];
/** @type {?} */
const container = document.getElementsByClassName('horizontal-scroll');
if (container.length === 1) {
// Since we're already breaking out of Angular, we try and be safe by using a try/catch.
// Otherwise an error here could halt execution,
try {
container[0].scrollLeft = Math.abs(target.nativeElement.offsetLeft - (window.outerWidth / 2));
}
catch (error) { }
}
}
}
WizardProgressBarComponent.decorators = [
{ type: Component, args: [{
selector: 'common-wizard-progress-bar',
template: "<progressbar\r\n [value]=\"calculateProgressPercentage()\"\r\n [max]=\"100\"\r\n [animate]=\"true\">\r\n</progressbar>\r\n\r\n<div class=\"step-container\" #stepContainer>\r\n\r\n <a #steps *ngFor=\"let step of progressSteps; let i = index;\" [routerLink]=\"step.route\">\r\n\r\n <div class=\"step\" [ngClass]=\"{active: i === activeIndex}\">\r\n <span class=\"step-text\">{{step.title}}</span>\r\n </div>\r\n\r\n </a>\r\n\r\n</div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{flex:1;padding:1em 2em;min-height:2em;min-width:650px}.step-container{display:flex;justify-content:space-around}progressbar{background-color:#adb5bd;height:.5rem}.step{position:relative;-webkit-transform:translateX(-.5em);transform:translateX(-.5em);margin-top:.25rem}.step:before{content:\" \";position:absolute;width:1em;height:1em;border-radius:100%;background:#fff;border:3px solid #036;right:0;left:0;margin:0 auto;bottom:100%}.step:not(.active) .step-text{opacity:.8}.step:not(.active):before{background:#ced4da}.step .step-text{position:absolute;-webkit-transform:translateX(-33%);transform:translateX(-33%);white-space:nowrap;font-size:small;color:#164d80}"]
}] }
];
/** @nocollapse */
WizardProgressBarComponent.ctorParameters = () => [
{ type: Router },
{ type: ChangeDetectorRef }
];
WizardProgressBarComponent.propDecorators = {
progressSteps: [{ type: Input }],
stepContainer: [{ type: ViewChild, args: ['stepContainer',] }],
steps: [{ type: ViewChildren, args: ['steps',] }]
};
if (false) {
/** @type {?} */
WizardProgressBarComponent.prototype.progressSteps;
/** @type {?} */
WizardProgressBarComponent.prototype.stepContainer;
/** @type {?} */
WizardProgressBarComponent.prototype.steps;
/** @type {?} */
WizardProgressBarComponent.prototype.activeIndex;
/**
* @type {?}
* @private
*/
WizardProgressBarComponent.prototype.routerEvents$;
/**
* @type {?}
* @private
*/
WizardProgressBarComponent.prototype.router;
/**
* @type {?}
* @private
*/
WizardProgressBarComponent.prototype.cd;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2l6YXJkLXByb2dyZXNzLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9tb2gtY29tbW9uLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL3dpemFyZC1wcm9ncmVzcy1iYXIvd2l6YXJkLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQy9DLFlBQVksRUFBRSxTQUFTLEVBQUUsdUJBQXVCLEVBQ2hELGlCQUFpQixFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzdELE9BQU8sRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBZ0I3QyxNQUFNLE9BQU8sMEJBQTBCOzs7OztJQVNyQyxZQUFvQixNQUFjLEVBQVUsRUFBcUI7UUFBN0MsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUFVLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBUnhELGtCQUFhLEdBQXlCLEVBQUUsQ0FBQztJQVNqRCxDQUFDOzs7O0lBRUYsUUFBUTtRQUVOLHlFQUF5RTtRQUN6RSwyRUFBMkU7UUFDM0UsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQzFDLE1BQU07Ozs7UUFBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsWUFBWSxhQUFhLEVBQUMsRUFDekMsR0FBRzs7OztRQUFDLENBQUMsRUFBaUIsRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLEdBQUcsRUFBQyxDQUNuQyxDQUFDLFNBQVM7Ozs7UUFBQyxHQUFHLENBQUMsRUFBRTtZQUNoQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDNUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUM1QixDQUFDLEVBQUMsQ0FBQztRQUVILHlEQUF5RDtRQUN6RCxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUMxRCxDQUFDOzs7O0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxFQUFFLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDakIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNuQyxDQUFDOzs7O0lBRUQsMkJBQTJCOztjQUNuQixXQUFXLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNOztjQUN2QyxTQUFTLEdBQUcsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDO1FBRXRDLElBQUksV0FBVyxLQUFLLENBQUMsSUFBSSxTQUFTLEdBQUcsV0FBVyxFQUFFO1lBQ2hELE9BQU8sR0FBRyxDQUFDO1NBQ1o7Ozs7O2NBS0ssU0FBUyxHQUFHLENBQUMsR0FBRyxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUM7UUFDdkMsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLEdBQUcsV0FBVyxDQUFDLEdBQUcsU0FBUyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUM7SUFDbkUsQ0FBQzs7Ozs7SUFFRCxjQUFjLENBQUMsR0FBRztRQUNoQixPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUzs7OztRQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLEVBQUMsQ0FBQztJQUNsRSxDQUFDOzs7Ozs7Ozs7SUFRTyxrQkFBa0I7O2NBQ2xCLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7O2NBQy9DLFNBQVMsR0FBRyxRQUFRLENBQUMsc0JBQXNCLENBQUMsbUJBQW1CLENBQUM7UUFDdEUsSUFBSSxTQUFTLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRTtZQUMxQix3RkFBd0Y7WUFDeEYsZ0RBQWdEO1lBQ2hELElBQUk7Z0JBQ0YsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsVUFBVSxHQUFHLENBQUMsTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQy9GO1lBQUMsT0FBTyxLQUFLLEVBQUUsR0FBRTtTQUNuQjtJQUNILENBQUM7OztZQTNFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDRCQUE0QjtnQkFDdEMsZ2RBQW1EO2dCQUVuRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDaEQ7Ozs7WUFoQlEsTUFBTTtZQUROLGlCQUFpQjs7OzRCQW1CdkIsS0FBSzs0QkFDTCxTQUFTLFNBQUMsZUFBZTtvQkFDekIsWUFBWSxTQUFDLE9BQU87Ozs7SUFGckIsbURBQWtEOztJQUNsRCxtREFBc0Q7O0lBQ3RELDJDQUF1RTs7SUFFdkUsaURBQTJCOzs7OztJQUUzQixtREFBb0M7Ozs7O0lBRXhCLDRDQUFzQjs7Ozs7SUFBRSx3Q0FBNkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIFZpZXdDaGlsZCwgRWxlbWVudFJlZixcclxuICAgICAgICAgVmlld0NoaWxkcmVuLCBRdWVyeUxpc3QsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gICAgICAgICBDaGFuZ2VEZXRlY3RvclJlZiwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFJvdXRlciwgTmF2aWdhdGlvbkVuZCB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XHJcbmltcG9ydCB7IGZpbHRlciwgbWFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgV2l6YXJkUHJvZ3Jlc3NJdGVtIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2NvbnRhaW5lcic7XHJcblxyXG4vKipcclxuICogTlBNIERlcGVuZGVuY2llczpcclxuICogIGEpIHJ4anNcclxuICogIGIpIG5neC1ib290c3RyYXBcclxuICovXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NvbW1vbi13aXphcmQtcHJvZ3Jlc3MtYmFyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vd2l6YXJkLXByb2dyZXNzLWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vd2l6YXJkLXByb2dyZXNzLWJhci5jb21wb25lbnQuc2NzcyddLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBXaXphcmRQcm9ncmVzc0JhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcclxuICBASW5wdXQoKSBwcm9ncmVzc1N0ZXBzOiBXaXphcmRQcm9ncmVzc0l0ZW1bXSA9IFtdO1xyXG4gIEBWaWV3Q2hpbGQoJ3N0ZXBDb250YWluZXInKSBzdGVwQ29udGFpbmVyOiBFbGVtZW50UmVmO1xyXG4gIEBWaWV3Q2hpbGRyZW4oJ3N0ZXBzJykgc3RlcHM6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPEhUTUxBbmNob3JFbGVtZW50Pj47XHJcblxyXG4gIHB1YmxpYyBhY3RpdmVJbmRleDogbnVtYmVyO1xyXG5cclxuICBwcml2YXRlIHJvdXRlckV2ZW50cyQ6IFN1YnNjcmlwdGlvbjtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSByb3V0ZXI6IFJvdXRlciwgcHJpdmF0ZSBjZDogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcclxuICAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuXHJcbiAgICAvLyBVcGRhdGUgdGhlIHByb2dyZXNzIGJhciB2aWV3IG9uIHJvdXRlIGNoYW5nZSBhbmQgX29ubHlfIHJvdXRlIGNoYWFuZ2UuXHJcbiAgICAvLyBTa2lwIG1vc3Qgb2YgQW5ndWxhcidzIENoYW5nZURldGVjdGlvbiBpbiBmYXZvdXIgb2YgbWFudWFsbHkgb3B0aW1pemluZy5cclxuICAgIHRoaXMucm91dGVyRXZlbnRzJCA9IHRoaXMucm91dGVyLmV2ZW50cy5waXBlKFxyXG4gICAgICBmaWx0ZXIoZXYgPT4gZXYgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kKSxcclxuICAgICAgbWFwKChldjogTmF2aWdhdGlvbkVuZCkgPT4gZXYudXJsKVxyXG4gICAgKS5zdWJzY3JpYmUodXJsID0+IHtcclxuICAgICAgdGhpcy5hY3RpdmVJbmRleCA9IHRoaXMuZ2V0QWN0aXZlSW5kZXgodXJsKTtcclxuICAgICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKCk7XHJcbiAgICAgIHRoaXMuc2Nyb2xsU3RlcEludG9WaWV3KCk7XHJcbiAgICB9KTtcclxuXHJcbiAgICAvLyBNdXN0IHNjaGVkdWxlIGZpcnN0IHJ1biBtYW51YWxseSwgb3IgYmFyIHdvbid0IGJlIHNldC5cclxuICAgIHRoaXMuYWN0aXZlSW5kZXggPSB0aGlzLmdldEFjdGl2ZUluZGV4KHRoaXMucm91dGVyLnVybCk7XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpIHtcclxuICAgIHRoaXMuY2QuZGV0YWNoKCk7XHJcbiAgICB0aGlzLnJvdXRlckV2ZW50cyQudW5zdWJzY3JpYmUoKTtcclxuICB9XHJcblxyXG4gIGNhbGN1bGF0ZVByb2dyZXNzUGVyY2VudGFnZSgpOiBudW1iZXIge1xyXG4gICAgY29uc3QgZGVub21pbmF0b3IgPSB0aGlzLnByb2dyZXNzU3RlcHMubGVuZ3RoO1xyXG4gICAgY29uc3QgbnVtZXJhdG9yID0gdGhpcy5hY3RpdmVJbmRleCArIDE7XHJcblxyXG4gICAgaWYgKGRlbm9taW5hdG9yID09PSAwIHx8IG51bWVyYXRvciA+IGRlbm9taW5hdG9yKSB7XHJcbiAgICAgIHJldHVybiAxMDA7XHJcbiAgICB9XHJcblxyXG4gICAgLy8gQmVjYXVzZSB3ZSd2ZSBzd2l0Y2hlZCBmcm9tIHNwYWNlLWV2ZW5seSB0byBzcGFjZS1hcm91bmQgKGZvciBJRSksIHdlXHJcbiAgICAvLyBoYXZlIHRvIGhhbmRsZSB0aGUgaGFsZi1zcGFjZSB0aGF0IHNwYWNlLWFyb3VuZCBhZGRzIHRvIHRoZSBzdGFydC9lbmQgb2ZcclxuICAgIC8vIHRoZSBjb250YWluZXJcclxuICAgIGNvbnN0IGhhbGZTcGFjZSA9IDEgLyAoZGVub21pbmF0b3IgKiAyKTtcclxuICAgIHJldHVybiBNYXRoLnJvdW5kKCgobnVtZXJhdG9yIC8gZGVub21pbmF0b3IpIC0gaGFsZlNwYWNlKSAqIDEwMCk7XHJcbiAgfVxyXG5cclxuICBnZXRBY3RpdmVJbmRleCh1cmwpOiBudW1iZXIge1xyXG4gICAgcmV0dXJuIHRoaXMucHJvZ3Jlc3NTdGVwcy5maW5kSW5kZXgoeCA9PiB1cmwuZW5kc1dpdGgoeC5yb3V0ZSkpO1xyXG4gIH1cclxuXHJcbiAgIC8qKlxyXG4gICAqIFByaW1hcmlseSBmb3IgbW9iaWxlLCB0aGlzIGhvcml6b250YWxseSBzY3JvbGxzIHRoZSBzdGVwIGludG8gdmlldy5cclxuICAgKlxyXG4gICAqIE5vdGUgLSBiZSB2ZXJ5IGNhcmVmdWwgd2l0aCBhbnkgY2hhbmdlcyB0byB0aGlzIGZ1bmN0aW9uIGJlY2F1c2UgaXQgc3RlcHNcclxuICAgKiBvdXRzaWRlIG9mIEFuZ3VsYXIgdG8gY2FsbCBuYXRpdmUgYnJvd3NlciBmdW5jdGlvbnMuXHJcbiAgICovXHJcbiAgcHJpdmF0ZSBzY3JvbGxTdGVwSW50b1ZpZXcoKSB7XHJcbiAgICBjb25zdCB0YXJnZXQgPSB0aGlzLnN0ZXBzLnRvQXJyYXkoKVt0aGlzLmFjdGl2ZUluZGV4XTtcclxuICAgIGNvbnN0IGNvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2hvcml6b250YWwtc2Nyb2xsJyk7XHJcbiAgICBpZiAoY29udGFpbmVyLmxlbmd0aCA9PT0gMSkge1xyXG4gICAgICAvLyBTaW5jZSB3ZSdyZSBhbHJlYWR5IGJyZWFraW5nIG91dCBvZiBBbmd1bGFyLCB3ZSB0cnkgYW5kIGJlIHNhZmUgYnkgdXNpbmcgYSB0cnkvY2F0Y2guXHJcbiAgICAgIC8vIE90aGVyd2lzZSBhbiBlcnJvciBoZXJlIGNvdWxkIGhhbHQgZXhlY3V0aW9uLFxyXG4gICAgICB0cnkge1xyXG4gICAgICAgIGNvbnRhaW5lclswXS5zY3JvbGxMZWZ0ID0gTWF0aC5hYnModGFyZ2V0Lm5hdGl2ZUVsZW1lbnQub2Zmc2V0TGVmdCAtICh3aW5kb3cub3V0ZXJXaWR0aCAvIDIpKTtcclxuICAgICAgfSBjYXRjaCAoZXJyb3IpIHt9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=