var _initCellDef;
import { __classPrivateFieldGet } from "tslib";
import { Component, ContentChildren, Input, QueryList, ViewChildren } from '@angular/core';
import { ZuiB } from '@material-zui/core';
import { ZuiPanelDirective } from '../directive';
export class ZuiTemplateDetailComponent {
    constructor() {
        this.bgColor = '#f5f5f5';
        /** default "250px", eg: "300px", "400em", "500rem" */
        this.rightWidth = '250px';
        this.rightColor = '#000';
        this.rightBgColor = '#fff';
        this.rightSelectedColor = '#000';
        this.rightSelectedBgColor = '#e0e0e0';
        this.disabledToggleVal = false;
        this.zuiPanelDefs = new QueryList();
        this.panelDefs = [];
        _initCellDef.set(this, () => {
            this.panelDefs = this.zuiPanelDefs.toArray();
        });
        this.scroll = (element) => {
            var _a;
            (_a = element.nativeElement) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
        };
    }
    set disabledToggle(val) {
        this.disabledToggleVal = ZuiB.toBool(val);
    }
    // ngOnInit(): void { }
    ngOnChanges() {
        __classPrivateFieldGet(this, _initCellDef).call(this);
    }
    ngAfterViewInit() {
        __classPrivateFieldGet(this, _initCellDef).call(this);
    }
}
_initCellDef = new WeakMap();
ZuiTemplateDetailComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-template-detail',
                template: "<div class=\"d-flex zui-template-detail\" [ngStyle]=\"{backgroundColor: bgColor}\">\n  <div class=\"zui-template-detail__left\">\n    <ng-container *ngIf=\"panelDefs\">\n      <div #panels *ngFor=\"let panel of panelDefs\" class=\"zui-template-detail__panel\">\n        <mat-expansion-panel [expanded]=\"true\" [disabled]=\"disabledToggleVal\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <strong>{{ panel.zuiPanelTitle }}</strong>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"panel.templateRef\"></ng-container>\n        </mat-expansion-panel>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"zui-template-detail__right\" [ngStyle]=\"{width: rightWidth, backgroundColor: rightBgColor}\">\n    <mat-selection-list *ngIf=\"panelDefs\" [multiple]=\"false\" style=\"--rColor: {{ rightColor }}; --rSColor: {{ rightSelectedColor }}; --rSBgColor: {{ rightSelectedBgColor }}\">\n      <mat-list-option *ngFor=\"let panel of panelDefs; let i = index\" (click)=\"scroll(panels.get(i))\">{{ panel.zuiPanelTitle }}</mat-list-option>\n    </mat-selection-list>\n  </div>\n</div>\n",
                styles: [".zui-template-detail{padding:10px}.zui-template-detail__left{flex:1}.zui-template-detail__left>.zui-template-detail__panel:not(:last-child){margin-bottom:10px}.zui-template-detail__left .mat-expansion-panel-header[aria-disabled=true]{color:inherit;cursor:default}.zui-template-detail__right{position:-webkit-sticky;position:sticky;margin-left:10px;top:10px;align-self:flex-start;background-color:#fff;border-radius:5px;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.zui-template-detail__right>mat-selection-list{padding-bottom:8px}.zui-template-detail__right>mat-selection-list>mat-list-option{color:var(--rColor)}.zui-template-detail__right>mat-selection-list>mat-list-option[aria-selected=true]{color:var(--rSColor);background-color:var(--rSBgColor)}"]
            },] }
];
ZuiTemplateDetailComponent.propDecorators = {
    bgColor: [{ type: Input }],
    rightWidth: [{ type: Input }],
    rightColor: [{ type: Input }],
    rightBgColor: [{ type: Input }],
    rightSelectedColor: [{ type: Input }],
    rightSelectedBgColor: [{ type: Input }],
    disabledToggle: [{ type: Input }],
    panels: [{ type: ViewChildren, args: ['panels',] }],
    zuiPanelDefs: [{ type: ContentChildren, args: [ZuiPanelDirective,] }]
};
//# sourceMappingURL=index.component.js.map