moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
78 lines • 6.99 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';
/**
* FormSubmitBar is similar to FormActionBar, but it is meant to be used with
* (ngSubmit) on the form. Make sure to enclose FormSubmitBar inside of the form
* in question.
*/
export class FormSubmitBarComponent {
constructor() {
this.submitLabel = 'Continue';
this.canContinue = true;
this.isLoading = false;
this.defaultColor = true;
this.btnClick = new EventEmitter();
/**
* Is the component nested inside a form, and not properly full-width in a
* page layout? We add negative margins to space out.
*
* Currently tihs only works for the 'blank' layout type for the page
* framework, but would be easy to extend by adding more negative classes as
* need be.
*/
this.increaseWidth = false;
}
/**
* @return {?}
*/
ngOnInit() {
}
}
FormSubmitBarComponent.decorators = [
{ type: Component, args: [{
selector: 'common-form-submit-bar',
template: "<div class=\"form-action-bar form-bar\" [ngClass]=\"{disabled: !canContinue, 'mx-lg-n5 mx-md-n3 mb-n3 mt-3': increaseWidth}\">\r\n <button class=\"btn btn-lg {{defaultColor ? 'btn-primary' : 'btn-secondary' }} submit\"\r\n [ngClass]=\"{disabled: !canContinue || isLoading}\"\r\n type='submit'>\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>",
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: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{left:0;right:0}.submit{min-width:100%}}.btn{white-space:normal!important;word-wrap:break-word}"]
}] }
];
/** @nocollapse */
FormSubmitBarComponent.ctorParameters = () => [];
FormSubmitBarComponent.propDecorators = {
submitLabel: [{ type: Input }],
canContinue: [{ type: Input }],
isLoading: [{ type: Input }],
defaultColor: [{ type: Input }],
btnClick: [{ type: Output }],
increaseWidth: [{ type: Input }]
};
if (false) {
/** @type {?} */
FormSubmitBarComponent.prototype.submitLabel;
/** @type {?} */
FormSubmitBarComponent.prototype.canContinue;
/** @type {?} */
FormSubmitBarComponent.prototype.isLoading;
/** @type {?} */
FormSubmitBarComponent.prototype.defaultColor;
/** @type {?} */
FormSubmitBarComponent.prototype.btnClick;
/**
* Is the component nested inside a form, and not properly full-width in a
* page layout? We add negative margins to space out.
*
* Currently tihs only works for the 'blank' layout type for the page
* framework, but would be easy to extend by adding more negative classes as
* need be.
* @type {?}
*/
FormSubmitBarComponent.prototype.increaseWidth;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1zdWJtaXQtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vaC1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvZm9ybS1zdWJtaXQtYmFyL2Zvcm0tc3VibWl0LWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNGLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBYzFELE1BQU0sT0FBTyxzQkFBc0I7SUFpQmpDO1FBaEJTLGdCQUFXLEdBQVcsVUFBVSxDQUFDO1FBQ2pDLGdCQUFXLEdBQVksSUFBSSxDQUFDO1FBQzVCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFDM0IsaUJBQVksR0FBWSxJQUFJLENBQUM7UUFDNUIsYUFBUSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDOzs7Ozs7Ozs7UUFVdkQsa0JBQWEsR0FBWSxLQUFLLENBQUM7SUFFeEIsQ0FBQzs7OztJQUVqQixRQUFRO0lBQ1IsQ0FBQzs7O1lBMUJGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsd0JBQXdCO2dCQUNsQywwbUJBQStDO2dCQUUvQyxhQUFhLEVBQUUsQ0FBRSxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLEVBQUUsVUFBVTs7O3dCQUFDLEdBQUcsRUFBRSxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUU7O2FBQ3pGOzs7OzswQkFFRSxLQUFLOzBCQUNMLEtBQUs7d0JBQ0wsS0FBSzsyQkFDTCxLQUFLO3VCQUNMLE1BQU07NEJBVU4sS0FBSzs7OztJQWROLDZDQUEwQzs7SUFDMUMsNkNBQXFDOztJQUNyQywyQ0FBb0M7O0lBQ3BDLDhDQUFzQzs7SUFDdEMsMENBQWdFOzs7Ozs7Ozs7O0lBVWhFLCtDQUF3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbENvbnRhaW5lciwgTmdGb3JtIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuXHJcbi8qKlxyXG4gKiBGb3JtU3VibWl0QmFyIGlzIHNpbWlsYXIgdG8gRm9ybUFjdGlvbkJhciwgYnV0IGl0IGlzIG1lYW50IHRvIGJlIHVzZWQgd2l0aFxyXG4gKiAobmdTdWJtaXQpIG9uIHRoZSBmb3JtLiBNYWtlIHN1cmUgdG8gZW5jbG9zZSBGb3JtU3VibWl0QmFyIGluc2lkZSBvZiB0aGUgZm9ybVxyXG4gKiBpbiBxdWVzdGlvbi5cclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY29tbW9uLWZvcm0tc3VibWl0LWJhcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Zvcm0tc3VibWl0LWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZm9ybS1zdWJtaXQtYmFyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgdmlld1Byb3ZpZGVyczogWyB7IHByb3ZpZGU6IENvbnRyb2xDb250YWluZXIsIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE5nRm9ybSApIH0gXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRm9ybVN1Ym1pdEJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgc3VibWl0TGFiZWw6IHN0cmluZyA9ICdDb250aW51ZSc7XHJcbiAgQElucHV0KCkgY2FuQ29udGludWU6IGJvb2xlYW4gPSB0cnVlO1xyXG4gIEBJbnB1dCgpIGlzTG9hZGluZzogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGRlZmF1bHRDb2xvcjogYm9vbGVhbiA9IHRydWU7XHJcbiAgQE91dHB1dCgpIGJ0bkNsaWNrOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICAvKipcclxuICAgKiBJcyB0aGUgY29tcG9uZW50IG5lc3RlZCBpbnNpZGUgYSBmb3JtLCBhbmQgbm90IHByb3Blcmx5IGZ1bGwtd2lkdGggaW4gYVxyXG4gICAqIHBhZ2UgbGF5b3V0PyBXZSBhZGQgbmVnYXRpdmUgbWFyZ2lucyB0byBzcGFjZSBvdXQuXHJcbiAgICpcclxuICAgKiBDdXJyZW50bHkgdGlocyBvbmx5IHdvcmtzIGZvciB0aGUgJ2JsYW5rJyBsYXlvdXQgdHlwZSBmb3IgdGhlIHBhZ2VcclxuICAgKiBmcmFtZXdvcmssIGJ1dCB3b3VsZCBiZSBlYXN5IHRvIGV4dGVuZCBieSBhZGRpbmcgbW9yZSBuZWdhdGl2ZSBjbGFzc2VzIGFzXHJcbiAgICogbmVlZCBiZS5cclxuICAgKi9cclxuICBASW5wdXQoKSBpbmNyZWFzZVdpZHRoOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gIH1cclxufVxyXG4iXX0=