moh-common-lib/esm5/lib/components/page-section/page-section.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';
// IMPROVEMENT: Add a 'flex' @Input(), that adds display flex.  Importantly, it
// must set flex on the wrapper/row divs in the html.  There are some cases
// (like SiteReg) where having flex layout is beneficial.  My first suggestion
// was to simply style the <common-page-section>, but the problem is that we
// need flex on the child elements of page-section (that still wrap ng-content).
var PageSectionComponent = /** @class */ (function () {
    function PageSectionComponent() {
        this.layout = 'tips';
    }
    /**
     * @return {?}
     */
    PageSectionComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
    };
    PageSectionComponent.decorators = [
        { type: Component, args: [{
                    selector: 'common-page-section',
                    template: "<div class=\"row\" [ngSwitch]=\"layout\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tips'\">\r\n    <div class=\"col-md-8\">\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-4 aside-col\">\r\n      <ng-container *ngTemplateOutlet=\"aside\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'double'\">\r\n    <div class=\"col-md-6\">\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n    <div class=\"col-md-6\">\r\n      <ng-container *ngTemplateOutlet=\"aside\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'noTips'\">\r\n      <div class=\"col-md-12\">\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>\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",
                    encapsulation: ViewEncapsulation.None,
                    styles: ["common-page-section{display:block}.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}}"]
                }] }
    ];
    /** @nocollapse */
    PageSectionComponent.ctorParameters = function () { return []; };
    PageSectionComponent.propDecorators = {
        layout: [{ type: Input }]
    };
    return PageSectionComponent;
}());
export { PageSectionComponent };
if (false) {
    /** @type {?} */
    PageSectionComponent.prototype.layout;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1zZWN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vaC1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvcGFnZS1zZWN0aW9uL3BhZ2Utc2VjdGlvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFRNUU7SUFVRTtRQUZTLFdBQU0sR0FBaUMsTUFBTSxDQUFDO0lBRXZDLENBQUM7Ozs7SUFFakIsdUNBQVE7OztJQUFSO0lBQ0EsQ0FBQzs7Z0JBYkYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLHN4Q0FBNEM7b0JBRTVDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOztpQkFDdEM7Ozs7O3lCQUdFLEtBQUs7O0lBT1IsMkJBQUM7Q0FBQSxBQWZELElBZUM7U0FUWSxvQkFBb0I7OztJQUUvQixzQ0FBdUQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG4vLyBJTVBST1ZFTUVOVDogQWRkIGEgJ2ZsZXgnIEBJbnB1dCgpLCB0aGF0IGFkZHMgZGlzcGxheSBmbGV4LiAgSW1wb3J0YW50bHksIGl0XHJcbi8vIG11c3Qgc2V0IGZsZXggb24gdGhlIHdyYXBwZXIvcm93IGRpdnMgaW4gdGhlIGh0bWwuICBUaGVyZSBhcmUgc29tZSBjYXNlc1xyXG4vLyAobGlrZSBTaXRlUmVnKSB3aGVyZSBoYXZpbmcgZmxleCBsYXlvdXQgaXMgYmVuZWZpY2lhbC4gIE15IGZpcnN0IHN1Z2dlc3Rpb25cclxuLy8gd2FzIHRvIHNpbXBseSBzdHlsZSB0aGUgPGNvbW1vbi1wYWdlLXNlY3Rpb24+LCBidXQgdGhlIHByb2JsZW0gaXMgdGhhdCB3ZVxyXG4vLyBuZWVkIGZsZXggb24gdGhlIGNoaWxkIGVsZW1lbnRzIG9mIHBhZ2Utc2VjdGlvbiAodGhhdCBzdGlsbCB3cmFwIG5nLWNvbnRlbnQpLlxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjb21tb24tcGFnZS1zZWN0aW9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1zZWN0aW9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9wYWdlLXNlY3Rpb24uY29tcG9uZW50LnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQYWdlU2VjdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIEBJbnB1dCgpIGxheW91dDogJ2RvdWJsZScgfCAndGlwcycgfCAnbm9UaXBzJyA9ICd0aXBzJztcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=