moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
75 lines • 7.27 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
import { scrollToError } from '../../../helpers/scroll-helpers';
export class FormActionBarComponent {
constructor() {
this.submitLabel = 'Continue';
this.canContinue = true;
this.isLoading = false;
this.defaultColor = true;
this.btnClick = new EventEmitter();
this.scrollToErrorsOnSubmit = true;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} $event
* @return {?}
*/
onClick($event) {
if (!this.isLoading && this.canContinue) {
this.btnClick.emit($event);
if (this.scrollToErrorsOnSubmit) {
// Scroll to error after 50ms, give time for errors to display etc.
// This timeout is outside of Angular change detection.
setTimeout(scrollToError, 50);
}
}
$event.stopPropagation();
return false;
}
}
FormActionBarComponent.decorators = [
{ type: Component, args: [{
selector: 'common-form-action-bar',
template: "<div class=\"form-action-bar form-bar\" [ngClass]=\"{disabled: !canContinue}\">\r\n <button class=\"btn btn-lg {{defaultColor ? 'btn-primary' : 'btn-secondary' }} submit\"\r\n (click)=\"onClick($event)\"\r\n [ngClass]=\"{disabled: !canContinue || isLoading}\">\r\n <ng-container *ngIf=\"!isLoading; else loadingSpinner\"> {{submitLabel}} </ng-container>\r\n \r\n </button>\r\n</div>\r\n\r\n<ng-template #loadingSpinner>\r\n <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\r\n</ng-template>",
// TODO: Figure out why this is required.
viewProviders: [{ provide: ControlContainer, useExisting: forwardRef((/**
* @return {?}
*/
() => NgForm)) }],
styles: [".form-action-bar{display:flex;justify-content:flex-end;padding:1em;background-color:#cdd9e4;transition:background-color .3s;position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky;bottom:0;z-index:10;left:5rem;right:5rem}.form-action-bar.disabled{background-color:#d5d9dd}@media (max-width:991.98px){.form-action-bar{left:2.5rem;right:2.5rem}}.submit{min-width:240px}@media (max-width:767.98px){.form-action-bar{width:calc(100% + 30px);margin-left:-15px}.submit{min-width:100%}}.btn{white-space:normal!important;word-wrap:break-word}.btn-secondary.disabled{color:#000}"]
}] }
];
/** @nocollapse */
FormActionBarComponent.ctorParameters = () => [];
FormActionBarComponent.propDecorators = {
submitLabel: [{ type: Input }],
canContinue: [{ type: Input }],
isLoading: [{ type: Input }],
defaultColor: [{ type: Input }],
btnClick: [{ type: Output }],
scrollToErrorsOnSubmit: [{ type: Input }]
};
if (false) {
/** @type {?} */
FormActionBarComponent.prototype.submitLabel;
/** @type {?} */
FormActionBarComponent.prototype.canContinue;
/** @type {?} */
FormActionBarComponent.prototype.isLoading;
/** @type {?} */
FormActionBarComponent.prototype.defaultColor;
/** @type {?} */
FormActionBarComponent.prototype.btnClick;
/** @type {?} */
FormActionBarComponent.prototype.scrollToErrorsOnSubmit;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1hY3Rpb24tYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vaC1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvZm9ybS1hY3Rpb24tYmFyL2Zvcm0tYWN0aW9uLWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNGLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFTaEUsTUFBTSxPQUFPLHNCQUFzQjtJQVNqQztRQVJTLGdCQUFXLEdBQVcsVUFBVSxDQUFDO1FBQ2pDLGdCQUFXLEdBQVksSUFBSSxDQUFDO1FBQzVCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFDM0IsaUJBQVksR0FBWSxJQUFJLENBQUM7UUFDNUIsYUFBUSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO1FBRXZELDJCQUFzQixHQUFZLElBQUksQ0FBQztJQUVoQyxDQUFDOzs7O0lBRWpCLFFBQVE7SUFDUixDQUFDOzs7OztJQUVELE9BQU8sQ0FBQyxNQUFNO1FBQ1osSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUN2QyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUUzQixJQUFJLElBQUksQ0FBQyxzQkFBc0IsRUFBRTtnQkFDL0IsbUVBQW1FO2dCQUNuRSx1REFBdUQ7Z0JBQ3ZELFVBQVUsQ0FBQyxhQUFhLEVBQUUsRUFBRSxDQUFDLENBQUM7YUFDL0I7U0FDRjtRQUNELE1BQU0sQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN6QixPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7OztZQWpDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHdCQUF3QjtnQkFDbEMsNmhCQUErQzs7Z0JBRy9DLGFBQWEsRUFBRSxDQUFFLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSxVQUFVOzs7d0JBQUMsR0FBRyxFQUFFLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBRTs7YUFDekY7Ozs7OzBCQUVFLEtBQUs7MEJBQ0wsS0FBSzt3QkFDTCxLQUFLOzJCQUNMLEtBQUs7dUJBQ0wsTUFBTTtxQ0FFTixLQUFLOzs7O0lBTk4sNkNBQTBDOztJQUMxQyw2Q0FBcUM7O0lBQ3JDLDJDQUFvQzs7SUFDcEMsOENBQXNDOztJQUN0QywwQ0FBZ0U7O0lBRWhFLHdEQUFnRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbENvbnRhaW5lciwgTmdGb3JtIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBzY3JvbGxUb0Vycm9yIH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9zY3JvbGwtaGVscGVycyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NvbW1vbi1mb3JtLWFjdGlvbi1iYXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLWFjdGlvbi1iYXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2Zvcm0tYWN0aW9uLWJhci5jb21wb25lbnQuc2NzcyddLFxyXG4gIC8vIFRPRE86IEZpZ3VyZSBvdXQgd2h5IHRoaXMgaXMgcmVxdWlyZWQuXHJcbiAgdmlld1Byb3ZpZGVyczogWyB7IHByb3ZpZGU6IENvbnRyb2xDb250YWluZXIsIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE5nRm9ybSApIH0gXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRm9ybUFjdGlvbkJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgc3VibWl0TGFiZWw6IHN0cmluZyA9ICdDb250aW51ZSc7XHJcbiAgQElucHV0KCkgY2FuQ29udGludWU6IGJvb2xlYW4gPSB0cnVlO1xyXG4gIEBJbnB1dCgpIGlzTG9hZGluZzogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGRlZmF1bHRDb2xvcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgQE91dHB1dCgpIGJ0bkNsaWNrOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICBASW5wdXQoKSBzY3JvbGxUb0Vycm9yc09uU3VibWl0OiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgfVxyXG5cclxuICBvbkNsaWNrKCRldmVudCkge1xyXG4gICAgaWYgKCF0aGlzLmlzTG9hZGluZyAmJiB0aGlzLmNhbkNvbnRpbnVlKSB7XHJcbiAgICAgIHRoaXMuYnRuQ2xpY2suZW1pdCgkZXZlbnQpO1xyXG5cclxuICAgICAgaWYgKHRoaXMuc2Nyb2xsVG9FcnJvcnNPblN1Ym1pdCkge1xyXG4gICAgICAgIC8vIFNjcm9sbCB0byBlcnJvciBhZnRlciA1MG1zLCBnaXZlIHRpbWUgZm9yIGVycm9ycyB0byBkaXNwbGF5IGV0Yy5cclxuICAgICAgICAvLyBUaGlzIHRpbWVvdXQgaXMgb3V0c2lkZSBvZiBBbmd1bGFyIGNoYW5nZSBkZXRlY3Rpb24uXHJcbiAgICAgICAgc2V0VGltZW91dChzY3JvbGxUb0Vycm9yLCA1MCk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgICRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcclxuICAgIHJldHVybiBmYWxzZTtcclxuICB9XHJcbn1cclxuIl19