moh-common-lib/esm2015/lib/components/page-framework/page-framework.component.js

A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, Input, ViewEncapsulation } from '@angular/core';
/**
 * The "Page Framework" is a template to be used on FPCare pages to ensure
 * consistent layout.  It should be used on every page unless there is a good
 * exception.
 *
 * Note: CommonFormActionBar (and SubmitBar) must come *AFTER* this element, not
 * inside in version 2.0.0 and above.
 *
 * \@example
 * <common-page-framework>
 *        <div>This will go in the middle column</div>
 *        <p>So will this</p>
 *        <div aside> This will go in the side column, or tips.</div>
 * </common-page-framework>
 * <common-form-action-bar></common-form-action-bar>
 *
 * @export
 */
export class PageFrameworkComponent {
    constructor() {
        this.layout = 'default';
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
}
PageFrameworkComponent.decorators = [
    { type: Component, args: [{
                selector: 'common-page-framework',
                template: "<div class=\"row\" [ngSwitch]=\"layout\">\r\n\r\n  <ng-container *ngSwitchCase=\"'default'\">\r\n    <div class=\"col-md-8\">\r\n      <div class=\"px-lg-4 px-md-3 py-3\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-4 aside-col\">\r\n      <div class='pr-lg-5 pr-md-4 py-2'>\r\n        <ng-container *ngTemplateOutlet=\"aside\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngSwitchCase=\"'double'\">\r\n    <div class=\"col-md-6\">\r\n      <div class=\"px-lg-5 px-md-3 py-3\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-6\">\r\n      <div class='px-lg-5 px-md-3 py-3'>\r\n        <ng-container *ngTemplateOutlet=\"aside\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"'single'\">\r\n      <div class=\"col-md-8 offset-lg-2\">\r\n        <div class=\"px-lg-5 px-md-3 py-3\">\r\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"'blank'\">\r\n      <div class=\"col-sm-12\">\r\n        <div class=\"px-lg-5 px-md-3 py-3\">\r\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n</div>\r\n<ng-container *ngTemplateOutlet=\"submit\"></ng-container>\r\n\r\n\r\n<!-- We use ng-template here to get around a bug with having multiple ng-contents in one template. By default, if there are duplicate ng-contents in a template Angular will select the very first one - even if latter ones are 'removed' by ngSwitch or ngIf.-->\r\n<ng-template #content>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #aside>\r\n    <ng-content select='aside'></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #submit>\r\n  <ng-content select='common-form-action-bar'></ng-content>\r\n  <ng-content select='common-form-submit-bar'></ng-content>\r\n</ng-template>\r\n",
                encapsulation: ViewEncapsulation.None,
                styles: ["common-page-framework{background:#fcfcfc;display:block;padding-left:30px;padding-right:30px;min-height:calc(100vh - 280px)}common-page-framework common-form-action-bar>.form-bar,common-page-framework common-form-submit-bar>.form-bar{background-color:red!important}common-page-framework common-form-action-bar .btn,common-page-framework common-form-submit-bar .btn{font-size:0}common-page-framework common-form-action-bar .btn:after,common-page-framework common-form-submit-bar .btn:after{font-size:1rem;content:\"FORM BAR MUST BE PLACED OUTSIDE OF COMMON-PAGE-FRAMEWORK\"}.h5,h5{font-size:1rem;font-weight:700;margin-bottom:0}p+.h5,p+h5{margin-top:1.5rem}.aside-col aside{background:#f2f2f2;padding:1em;border-radius:5px}@media (min-width:768px){.aside-col aside{margin-top:1rem}}"]
            }] }
];
PageFrameworkComponent.propDecorators = {
    layout: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    PageFrameworkComponent.prototype.layout;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1mcmFtZXdvcmsuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbW9oLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9wYWdlLWZyYW1ld29yay9wYWdlLWZyYW1ld29yay5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBMEI1RSxNQUFNLE9BQU8sc0JBQXNCO0lBTm5DO1FBUVcsV0FBTSxHQUE4QyxTQUFTLENBQUM7SUFLekUsQ0FBQzs7OztJQUhDLFFBQVE7SUFDUixDQUFDOzs7WUFYRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHVCQUF1QjtnQkFDakMsc21FQUE4QztnQkFFOUMsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7O2FBQ3RDOzs7cUJBR0UsS0FBSzs7OztJQUFOLHdDQUF1RSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbi8qKlxyXG4gKiBUaGUgXCJQYWdlIEZyYW1ld29ya1wiIGlzIGEgdGVtcGxhdGUgdG8gYmUgdXNlZCBvbiBGUENhcmUgcGFnZXMgdG8gZW5zdXJlXHJcbiAqIGNvbnNpc3RlbnQgbGF5b3V0LiAgSXQgc2hvdWxkIGJlIHVzZWQgb24gZXZlcnkgcGFnZSB1bmxlc3MgdGhlcmUgaXMgYSBnb29kXHJcbiAqIGV4Y2VwdGlvbi5cclxuICpcclxuICogTm90ZTogQ29tbW9uRm9ybUFjdGlvbkJhciAoYW5kIFN1Ym1pdEJhcikgbXVzdCBjb21lICpBRlRFUiogdGhpcyBlbGVtZW50LCBub3RcclxuICogaW5zaWRlIGluIHZlcnNpb24gMi4wLjAgYW5kIGFib3ZlLlxyXG4gKlxyXG4gKiBAZXhhbXBsZVxyXG4gKiA8Y29tbW9uLXBhZ2UtZnJhbWV3b3JrPlxyXG4gKiAgICAgICAgPGRpdj5UaGlzIHdpbGwgZ28gaW4gdGhlIG1pZGRsZSBjb2x1bW48L2Rpdj5cclxuICogICAgICAgIDxwPlNvIHdpbGwgdGhpczwvcD5cclxuICogICAgICAgIDxkaXYgYXNpZGU+IFRoaXMgd2lsbCBnbyBpbiB0aGUgc2lkZSBjb2x1bW4sIG9yIHRpcHMuPC9kaXY+XHJcbiAqIDwvY29tbW9uLXBhZ2UtZnJhbWV3b3JrPlxyXG4gKiA8Y29tbW9uLWZvcm0tYWN0aW9uLWJhcj48L2NvbW1vbi1mb3JtLWFjdGlvbi1iYXI+XHJcbiAqXHJcbiAqIEBleHBvcnRcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY29tbW9uLXBhZ2UtZnJhbWV3b3JrJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1mcmFtZXdvcmsuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3BhZ2UtZnJhbWV3b3JrLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFBhZ2VGcmFtZXdvcmtDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSBsYXlvdXQ6ICdzaW5nbGUnIHwgJ2RvdWJsZScgfCAnYmxhbmsnIHwgJ2RlZmF1bHQnID0gJ2RlZmF1bHQnO1xyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==