moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
177 lines • 15 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
*/
var WizardProgressBarComponent = /** @class */ (function () {
function WizardProgressBarComponent(router, cd) {
this.router = router;
this.cd = cd;
this.progressSteps = [];
}
/**
* @return {?}
*/
WizardProgressBarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
// 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 {?}
*/
function (ev) { return ev instanceof NavigationEnd; })), map((/**
* @param {?} ev
* @return {?}
*/
function (ev) { return ev.url; }))).subscribe((/**
* @param {?} url
* @return {?}
*/
function (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 {?}
*/
WizardProgressBarComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.cd.detach();
this.routerEvents$.unsubscribe();
};
/**
* @return {?}
*/
WizardProgressBarComponent.prototype.calculateProgressPercentage = /**
* @return {?}
*/
function () {
/** @type {?} */
var denominator = this.progressSteps.length;
/** @type {?} */
var 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 {?} */
var halfSpace = 1 / (denominator * 2);
return Math.round(((numerator / denominator) - halfSpace) * 100);
};
/**
* @param {?} url
* @return {?}
*/
WizardProgressBarComponent.prototype.getActiveIndex = /**
* @param {?} url
* @return {?}
*/
function (url) {
return this.progressSteps.findIndex((/**
* @param {?} x
* @return {?}
*/
function (x) { return 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.
*/
/**
* 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 {?}
*/
WizardProgressBarComponent.prototype.scrollStepIntoView = /**
* 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 {?}
*/
function () {
/** @type {?} */
var target = this.steps.toArray()[this.activeIndex];
/** @type {?} */
var 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 = function () { return [
{ type: Router },
{ type: ChangeDetectorRef }
]; };
WizardProgressBarComponent.propDecorators = {
progressSteps: [{ type: Input }],
stepContainer: [{ type: ViewChild, args: ['stepContainer',] }],
steps: [{ type: ViewChildren, args: ['steps',] }]
};
return WizardProgressBarComponent;
}());
export { WizardProgressBarComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2l6YXJkLXByb2dyZXNzLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9tb2gtY29tbW9uLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL3dpemFyZC1wcm9ncmVzcy1iYXIvd2l6YXJkLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQy9DLFlBQVksRUFBRSxTQUFTLEVBQUUsdUJBQXVCLEVBQ2hELGlCQUFpQixFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzdELE9BQU8sRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBVTdDO0lBZUUsb0NBQW9CLE1BQWMsRUFBVSxFQUFxQjtRQUE3QyxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQVUsT0FBRSxHQUFGLEVBQUUsQ0FBbUI7UUFSeEQsa0JBQWEsR0FBeUIsRUFBRSxDQUFDO0lBU2pELENBQUM7Ozs7SUFFRiw2Q0FBUTs7O0lBQVI7UUFBQSxpQkFlQztRQWJDLHlFQUF5RTtRQUN6RSwyRUFBMkU7UUFDM0UsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQzFDLE1BQU07Ozs7UUFBQyxVQUFBLEVBQUUsSUFBSSxPQUFBLEVBQUUsWUFBWSxhQUFhLEVBQTNCLENBQTJCLEVBQUMsRUFDekMsR0FBRzs7OztRQUFDLFVBQUMsRUFBaUIsSUFBSyxPQUFBLEVBQUUsQ0FBQyxHQUFHLEVBQU4sQ0FBTSxFQUFDLENBQ25DLENBQUMsU0FBUzs7OztRQUFDLFVBQUEsR0FBRztZQUNiLEtBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUM1QyxLQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQ3hCLEtBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO1FBQzVCLENBQUMsRUFBQyxDQUFDO1FBRUgseURBQXlEO1FBQ3pELElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzFELENBQUM7Ozs7SUFFRCxnREFBVzs7O0lBQVg7UUFDRSxJQUFJLENBQUMsRUFBRSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxhQUFhLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbkMsQ0FBQzs7OztJQUVELGdFQUEyQjs7O0lBQTNCOztZQUNRLFdBQVcsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU07O1lBQ3ZDLFNBQVMsR0FBRyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUM7UUFFdEMsSUFBSSxXQUFXLEtBQUssQ0FBQyxJQUFJLFNBQVMsR0FBRyxXQUFXLEVBQUU7WUFDaEQsT0FBTyxHQUFHLENBQUM7U0FDWjs7Ozs7WUFLSyxTQUFTLEdBQUcsQ0FBQyxHQUFHLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztRQUN2QyxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVMsR0FBRyxXQUFXLENBQUMsR0FBRyxTQUFTLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQztJQUNuRSxDQUFDOzs7OztJQUVELG1EQUFjOzs7O0lBQWQsVUFBZSxHQUFHO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTOzs7O1FBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxHQUFHLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBckIsQ0FBcUIsRUFBQyxDQUFDO0lBQ2xFLENBQUM7SUFFQTs7Ozs7TUFLRTs7Ozs7Ozs7O0lBQ0ssdURBQWtCOzs7Ozs7OztJQUExQjs7WUFDUSxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDOztZQUMvQyxTQUFTLEdBQUcsUUFBUSxDQUFDLHNCQUFzQixDQUFDLG1CQUFtQixDQUFDO1FBQ3RFLElBQUksU0FBUyxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUU7WUFDMUIsd0ZBQXdGO1lBQ3hGLGdEQUFnRDtZQUNoRCxJQUFJO2dCQUNGLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLFVBQVUsR0FBRyxDQUFDLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUMvRjtZQUFDLE9BQU8sS0FBSyxFQUFFLEdBQUU7U0FDbkI7SUFDSCxDQUFDOztnQkEzRUYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSw0QkFBNEI7b0JBQ3RDLGdkQUFtRDtvQkFFbkQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2lCQUNoRDs7OztnQkFoQlEsTUFBTTtnQkFETixpQkFBaUI7OztnQ0FtQnZCLEtBQUs7Z0NBQ0wsU0FBUyxTQUFDLGVBQWU7d0JBQ3pCLFlBQVksU0FBQyxPQUFPOztJQW9FdkIsaUNBQUM7Q0FBQSxBQTdFRCxJQTZFQztTQXZFWSwwQkFBMEI7OztJQUNyQyxtREFBa0Q7O0lBQ2xELG1EQUFzRDs7SUFDdEQsMkNBQXVFOztJQUV2RSxpREFBMkI7Ozs7O0lBRTNCLG1EQUFvQzs7Ozs7SUFFeEIsNENBQXNCOzs7OztJQUFFLHdDQUE2QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgVmlld0NoaWxkLCBFbGVtZW50UmVmLFxyXG4gICAgICAgICBWaWV3Q2hpbGRyZW4sIFF1ZXJ5TGlzdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXHJcbiAgICAgICAgIENoYW5nZURldGVjdG9yUmVmLCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgUm91dGVyLCBOYXZpZ2F0aW9uRW5kIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcclxuaW1wb3J0IHsgZmlsdGVyLCBtYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBXaXphcmRQcm9ncmVzc0l0ZW0gfSBmcm9tICcuLi8uLi9tb2RlbHMvY29udGFpbmVyJztcclxuXHJcbi8qKlxyXG4gKiBOUE0gRGVwZW5kZW5jaWVzOlxyXG4gKiAgYSkgcnhqc1xyXG4gKiAgYikgbmd4LWJvb3RzdHJhcFxyXG4gKi9cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY29tbW9uLXdpemFyZC1wcm9ncmVzcy1iYXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi93aXphcmQtcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi93aXphcmQtcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcclxufSlcclxuZXhwb3J0IGNsYXNzIFdpemFyZFByb2dyZXNzQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIEBJbnB1dCgpIHByb2dyZXNzU3RlcHM6IFdpemFyZFByb2dyZXNzSXRlbVtdID0gW107XHJcbiAgQFZpZXdDaGlsZCgnc3RlcENvbnRhaW5lcicpIHN0ZXBDb250YWluZXI6IEVsZW1lbnRSZWY7XHJcbiAgQFZpZXdDaGlsZHJlbignc3RlcHMnKSBzdGVwczogUXVlcnlMaXN0PEVsZW1lbnRSZWY8SFRNTEFuY2hvckVsZW1lbnQ+PjtcclxuXHJcbiAgcHVibGljIGFjdGl2ZUluZGV4OiBudW1iZXI7XHJcblxyXG4gIHByaXZhdGUgcm91dGVyRXZlbnRzJDogU3Vic2NyaXB0aW9uO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJvdXRlcjogUm91dGVyLCBwcml2YXRlIGNkOiBDaGFuZ2VEZXRlY3RvclJlZikge1xyXG4gICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG5cclxuICAgIC8vIFVwZGF0ZSB0aGUgcHJvZ3Jlc3MgYmFyIHZpZXcgb24gcm91dGUgY2hhbmdlIGFuZCBfb25seV8gcm91dGUgY2hhYW5nZS5cclxuICAgIC8vIFNraXAgbW9zdCBvZiBBbmd1bGFyJ3MgQ2hhbmdlRGV0ZWN0aW9uIGluIGZhdm91ciBvZiBtYW51YWxseSBvcHRpbWl6aW5nLlxyXG4gICAgdGhpcy5yb3V0ZXJFdmVudHMkID0gdGhpcy5yb3V0ZXIuZXZlbnRzLnBpcGUoXHJcbiAgICAgIGZpbHRlcihldiA9PiBldiBpbnN0YW5jZW9mIE5hdmlnYXRpb25FbmQpLFxyXG4gICAgICBtYXAoKGV2OiBOYXZpZ2F0aW9uRW5kKSA9PiBldi51cmwpXHJcbiAgICApLnN1YnNjcmliZSh1cmwgPT4ge1xyXG4gICAgICB0aGlzLmFjdGl2ZUluZGV4ID0gdGhpcy5nZXRBY3RpdmVJbmRleCh1cmwpO1xyXG4gICAgICB0aGlzLmNkLmRldGVjdENoYW5nZXMoKTtcclxuICAgICAgdGhpcy5zY3JvbGxTdGVwSW50b1ZpZXcoKTtcclxuICAgIH0pO1xyXG5cclxuICAgIC8vIE11c3Qgc2NoZWR1bGUgZmlyc3QgcnVuIG1hbnVhbGx5LCBvciBiYXIgd29uJ3QgYmUgc2V0LlxyXG4gICAgdGhpcy5hY3RpdmVJbmRleCA9IHRoaXMuZ2V0QWN0aXZlSW5kZXgodGhpcy5yb3V0ZXIudXJsKTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG4gICAgdGhpcy5jZC5kZXRhY2goKTtcclxuICAgIHRoaXMucm91dGVyRXZlbnRzJC51bnN1YnNjcmliZSgpO1xyXG4gIH1cclxuXHJcbiAgY2FsY3VsYXRlUHJvZ3Jlc3NQZXJjZW50YWdlKCk6IG51bWJlciB7XHJcbiAgICBjb25zdCBkZW5vbWluYXRvciA9IHRoaXMucHJvZ3Jlc3NTdGVwcy5sZW5ndGg7XHJcbiAgICBjb25zdCBudW1lcmF0b3IgPSB0aGlzLmFjdGl2ZUluZGV4ICsgMTtcclxuXHJcbiAgICBpZiAoZGVub21pbmF0b3IgPT09IDAgfHwgbnVtZXJhdG9yID4gZGVub21pbmF0b3IpIHtcclxuICAgICAgcmV0dXJuIDEwMDtcclxuICAgIH1cclxuXHJcbiAgICAvLyBCZWNhdXNlIHdlJ3ZlIHN3aXRjaGVkIGZyb20gc3BhY2UtZXZlbmx5IHRvIHNwYWNlLWFyb3VuZCAoZm9yIElFKSwgd2VcclxuICAgIC8vIGhhdmUgdG8gaGFuZGxlIHRoZSBoYWxmLXNwYWNlIHRoYXQgc3BhY2UtYXJvdW5kIGFkZHMgdG8gdGhlIHN0YXJ0L2VuZCBvZlxyXG4gICAgLy8gdGhlIGNvbnRhaW5lclxyXG4gICAgY29uc3QgaGFsZlNwYWNlID0gMSAvIChkZW5vbWluYXRvciAqIDIpO1xyXG4gICAgcmV0dXJuIE1hdGgucm91bmQoKChudW1lcmF0b3IgLyBkZW5vbWluYXRvcikgLSBoYWxmU3BhY2UpICogMTAwKTtcclxuICB9XHJcblxyXG4gIGdldEFjdGl2ZUluZGV4KHVybCk6IG51bWJlciB7XHJcbiAgICByZXR1cm4gdGhpcy5wcm9ncmVzc1N0ZXBzLmZpbmRJbmRleCh4ID0+IHVybC5lbmRzV2l0aCh4LnJvdXRlKSk7XHJcbiAgfVxyXG5cclxuICAgLyoqXHJcbiAgICogUHJpbWFyaWx5IGZvciBtb2JpbGUsIHRoaXMgaG9yaXpvbnRhbGx5IHNjcm9sbHMgdGhlIHN0ZXAgaW50byB2aWV3LlxyXG4gICAqXHJcbiAgICogTm90ZSAtIGJlIHZlcnkgY2FyZWZ1bCB3aXRoIGFueSBjaGFuZ2VzIHRvIHRoaXMgZnVuY3Rpb24gYmVjYXVzZSBpdCBzdGVwc1xyXG4gICAqIG91dHNpZGUgb2YgQW5ndWxhciB0byBjYWxsIG5hdGl2ZSBicm93c2VyIGZ1bmN0aW9ucy5cclxuICAgKi9cclxuICBwcml2YXRlIHNjcm9sbFN0ZXBJbnRvVmlldygpIHtcclxuICAgIGNvbnN0IHRhcmdldCA9IHRoaXMuc3RlcHMudG9BcnJheSgpW3RoaXMuYWN0aXZlSW5kZXhdO1xyXG4gICAgY29uc3QgY29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnaG9yaXpvbnRhbC1zY3JvbGwnKTtcclxuICAgIGlmIChjb250YWluZXIubGVuZ3RoID09PSAxKSB7XHJcbiAgICAgIC8vIFNpbmNlIHdlJ3JlIGFscmVhZHkgYnJlYWtpbmcgb3V0IG9mIEFuZ3VsYXIsIHdlIHRyeSBhbmQgYmUgc2FmZSBieSB1c2luZyBhIHRyeS9jYXRjaC5cclxuICAgICAgLy8gT3RoZXJ3aXNlIGFuIGVycm9yIGhlcmUgY291bGQgaGFsdCBleGVjdXRpb24sXHJcbiAgICAgIHRyeSB7XHJcbiAgICAgICAgY29udGFpbmVyWzBdLnNjcm9sbExlZnQgPSBNYXRoLmFicyh0YXJnZXQubmF0aXZlRWxlbWVudC5vZmZzZXRMZWZ0IC0gKHdpbmRvdy5vdXRlcldpZHRoIC8gMikpO1xyXG4gICAgICB9IGNhdGNoIChlcnJvcikge31cclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiJdfQ==