moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
83 lines • 7.36 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.
*/
var FormSubmitBarComponent = /** @class */ (function () {
function FormSubmitBarComponent() {
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 {?}
*/
FormSubmitBarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
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 {?}
*/
function () { 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 = function () { return []; };
FormSubmitBarComponent.propDecorators = {
submitLabel: [{ type: Input }],
canContinue: [{ type: Input }],
isLoading: [{ type: Input }],
defaultColor: [{ type: Input }],
btnClick: [{ type: Output }],
increaseWidth: [{ type: Input }]
};
return FormSubmitBarComponent;
}());
export { FormSubmitBarComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1zdWJtaXQtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vaC1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvZm9ybS1zdWJtaXQtYmFyL2Zvcm0tc3VibWl0LWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNGLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBUTFEO0lBdUJFO1FBaEJTLGdCQUFXLEdBQVcsVUFBVSxDQUFDO1FBQ2pDLGdCQUFXLEdBQVksSUFBSSxDQUFDO1FBQzVCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFDM0IsaUJBQVksR0FBWSxJQUFJLENBQUM7UUFDNUIsYUFBUSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDOzs7Ozs7Ozs7UUFVdkQsa0JBQWEsR0FBWSxLQUFLLENBQUM7SUFFeEIsQ0FBQzs7OztJQUVqQix5Q0FBUTs7O0lBQVI7SUFDQSxDQUFDOztnQkExQkYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLDBtQkFBK0M7b0JBRS9DLGFBQWEsRUFBRSxDQUFFLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSxVQUFVOzs7NEJBQUMsY0FBTSxPQUFBLE1BQU0sRUFBTixDQUFNLEVBQUUsRUFBRSxDQUFFOztpQkFDekY7Ozs7OzhCQUVFLEtBQUs7OEJBQ0wsS0FBSzs0QkFDTCxLQUFLOytCQUNMLEtBQUs7MkJBQ0wsTUFBTTtnQ0FVTixLQUFLOztJQU1SLDZCQUFDO0NBQUEsQUEzQkQsSUEyQkM7U0FyQlksc0JBQXNCOzs7SUFDakMsNkNBQTBDOztJQUMxQyw2Q0FBcUM7O0lBQ3JDLDJDQUFvQzs7SUFDcEMsOENBQXNDOztJQUN0QywwQ0FBZ0U7Ozs7Ozs7Ozs7SUFVaEUsK0NBQXdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgZm9yd2FyZFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb250cm9sQ29udGFpbmVyLCBOZ0Zvcm0gfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5cclxuLyoqXHJcbiAqIEZvcm1TdWJtaXRCYXIgaXMgc2ltaWxhciB0byBGb3JtQWN0aW9uQmFyLCBidXQgaXQgaXMgbWVhbnQgdG8gYmUgdXNlZCB3aXRoXHJcbiAqIChuZ1N1Ym1pdCkgb24gdGhlIGZvcm0uIE1ha2Ugc3VyZSB0byBlbmNsb3NlIEZvcm1TdWJtaXRCYXIgaW5zaWRlIG9mIHRoZSBmb3JtXHJcbiAqIGluIHF1ZXN0aW9uLlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjb21tb24tZm9ybS1zdWJtaXQtYmFyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1zdWJtaXQtYmFyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9mb3JtLXN1Ym1pdC1iYXIuY29tcG9uZW50LnNjc3MnXSxcclxuICB2aWV3UHJvdmlkZXJzOiBbIHsgcHJvdmlkZTogQ29udHJvbENvbnRhaW5lciwgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTmdGb3JtICkgfSBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGb3JtU3VibWl0QmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBzdWJtaXRMYWJlbDogc3RyaW5nID0gJ0NvbnRpbnVlJztcclxuICBASW5wdXQoKSBjYW5Db250aW51ZTogYm9vbGVhbiA9IHRydWU7XHJcbiAgQElucHV0KCkgaXNMb2FkaW5nOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgZGVmYXVsdENvbG9yOiBib29sZWFuID0gdHJ1ZTtcclxuICBAT3V0cHV0KCkgYnRuQ2xpY2s6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gIC8qKlxyXG4gICAqIElzIHRoZSBjb21wb25lbnQgbmVzdGVkIGluc2lkZSBhIGZvcm0sIGFuZCBub3QgcHJvcGVybHkgZnVsbC13aWR0aCBpbiBhXHJcbiAgICogcGFnZSBsYXlvdXQ/IFdlIGFkZCBuZWdhdGl2ZSBtYXJnaW5zIHRvIHNwYWNlIG91dC5cclxuICAgKlxyXG4gICAqIEN1cnJlbnRseSB0aWhzIG9ubHkgd29ya3MgZm9yIHRoZSAnYmxhbmsnIGxheW91dCB0eXBlIGZvciB0aGUgcGFnZVxyXG4gICAqIGZyYW1ld29yaywgYnV0IHdvdWxkIGJlIGVhc3kgdG8gZXh0ZW5kIGJ5IGFkZGluZyBtb3JlIG5lZ2F0aXZlIGNsYXNzZXMgYXNcclxuICAgKiBuZWVkIGJlLlxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIGluY3JlYXNlV2lkdGg6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgfVxyXG59XHJcbiJdfQ==