/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
var ListDetailComponent = /** @class */ (function () {
    function ListDetailComponent() {
        this.listWidth = '1fr';
        this.detailWidth = '1fr';
        this.headerHeight = '150px';
        this.footerHeight = '150px';
        this.listFooterHeight = '100px';
        this.detailClass = 'bg-white';
        this.listClass = 'bg-white';
    }
    Object.defineProperty(ListDetailComponent.prototype, "gridStyles", {
        get: /**
         * @return {?}
         */
        function () {
            return {
                gridTemplateRows: this.headerHeight + " 1fr " + this.listFooterHeight + " " + this.footerHeight,
                gridTemplateColumns: this.listWidth + " " + this.detailWidth
            };
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    ListDetailComponent.prototype.scrollListToTop = /**
     * @return {?}
     */
    function () {
        if (!this.listEl) {
            return;
        }
        this.listEl.nativeElement.scrollTop = 0;
    };
    /**
     * @return {?}
     */
    ListDetailComponent.prototype.scrollDetailToTop = /**
     * @return {?}
     */
    function () {
        if (!this.detailEl) {
            return;
        }
        this.detailEl.nativeElement.scrollTop = 0;
    };
    /**
     * @return {?}
     */
    ListDetailComponent.prototype.scrollToTop = /**
     * @return {?}
     */
    function () {
        this.scrollListToTop();
        this.scrollDetailToTop();
    };
    ListDetailComponent.decorators = [
        { type: Component, args: [{
                    selector: 'list-detail',
                    template: "\n    <div class=\"grid-container\" [ngStyle]=\"gridStyles\">\n      <div class=\"header\">\n        <ng-content select=\"[slot='header']\"></ng-content>\n      </div>\n      <div #list [ngClass]=\"['list', listClass]\">\n        <ng-content select=\"[slot='list']\"></ng-content>\n      </div>\n      <div class=\"listFooter\">\n        <ng-content select=\"[slot='list-footer']\"></ng-content>\n      </div>\n      <div #detail [ngClass]=\"['detail', detailClass]\">\n        <ng-content select=\"[slot='detail']\"></ng-content>\n      </div>\n      <div class=\"footer\">\n        <ng-content select=\"[slot='footer']\"></ng-content>\n      </div>\n    </div>\n  ",
                    styles: [":host{display:block;height:100%;width:100%;position:relative}.grid-container{display:-ms-grid;display:grid;height:100%;width:100%;-ms-grid-columns:1fr 0 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:150px 0 1fr 0 100px 0 150px;grid-template-rows:150px 1fr 100px 150px;gap:0 0;grid-template-areas:\"header header\" \"list detail\" \"listFooter detail\" \"footer footer\"}.list{-ms-grid-row:3;-ms-grid-column:1;grid-area:list;overflow-y:scroll}.header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:header}.footer{-ms-grid-row:7;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:footer}.listFooter{-ms-grid-row:5;-ms-grid-column:1;grid-area:listFooter}.detail{-ms-grid-row:3;-ms-grid-row-span:3;-ms-grid-column:3;grid-area:detail;overflow-y:scroll}"]
                }] }
    ];
    ListDetailComponent.propDecorators = {
        listWidth: [{ type: Input }],
        detailWidth: [{ type: Input }],
        headerHeight: [{ type: Input }],
        footerHeight: [{ type: Input }],
        listFooterHeight: [{ type: Input }],
        detailClass: [{ type: Input }],
        listClass: [{ type: Input }],
        listEl: [{ type: ViewChild, args: ['list',] }],
        detailEl: [{ type: ViewChild, args: ['detail',] }]
    };
    return ListDetailComponent;
}());
export { ListDetailComponent };
if (false) {
    /** @type {?} */
    ListDetailComponent.prototype.listWidth;
    /** @type {?} */
    ListDetailComponent.prototype.detailWidth;
    /** @type {?} */
    ListDetailComponent.prototype.headerHeight;
    /** @type {?} */
    ListDetailComponent.prototype.footerHeight;
    /** @type {?} */
    ListDetailComponent.prototype.listFooterHeight;
    /** @type {?} */
    ListDetailComponent.prototype.detailClass;
    /** @type {?} */
    ListDetailComponent.prototype.listClass;
    /** @type {?} */
    ListDetailComponent.prototype.listEl;
    /** @type {?} */
    ListDetailComponent.prototype.detailEl;
}
//# sourceMappingURL=data:application/json;base64, 