var _resetToggle, _collapseOn, _setDefaultValue;
import { __classPrivateFieldGet } from "tslib";
import { Component, ContentChildren, Input, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ZuiB, ZuiO } from '@material-zui/core';
import { ZuiTemplateLayoutIconsComponent } from '../components';
import { ZuiPanelDirective } from '../directive';
import { getDefaultOptions } from './data';
/**
 * Layout template selector:
 * ```html
 * <div footer-menu></div>
 * <div header-left></div>
 * <div header-right></div>
 * <div content></div>
 * <div right-side></div>
 * ```
 * Methods:
 * ```ts
 * get opened(): boolean
 * toggle = (): void
 * ```
 */
export class ZuiTemplateLayoutComponent {
    constructor() {
        this.disabledToggleVal = false;
        this.zuiPanelDefs = new QueryList();
        this.panelDefs = [];
        this.menus = [];
        this.isModeMenu = false;
        _resetToggle.set(this, () => {
            const { collapse } = this.menu;
            if (collapse) {
                this.menus.forEach(menu => {
                    var _a;
                    menu.toggleOn = false;
                    (_a = menu.children) === null || _a === void 0 ? void 0 : _a.forEach(child => {
                        const currentChild = child;
                        currentChild.toggleOn = false;
                    });
                });
            }
        });
        this.resetSelected = () => {
            this.menus.forEach(menu => {
                var _a;
                menu.selected = false;
                (_a = menu.children) === null || _a === void 0 ? void 0 : _a.forEach(child => {
                    var _a;
                    const currentChild = child;
                    currentChild.selected = false;
                    (_a = child.children) === null || _a === void 0 ? void 0 : _a.forEach(child => {
                        const currentChild = child;
                        currentChild.selected = false;
                    });
                });
            });
        };
        _collapseOn.set(this, () => {
            const { collapse } = this.menu;
            if (collapse) {
                this.menus.forEach(menu => {
                    var _a;
                    menu.show =
                        menu.toggleOn || ((_a = menu.children) === null || _a === void 0 ? void 0 : _a.some(child => {
                            const { show, toggleOn } = child;
                            return show && toggleOn;
                        }));
                });
            }
        });
        _setDefaultValue.set(this, () => {
            this.isModeMenu = this.menu.defaultView === 'menu';
        });
        this.toggleMenu = (menu) => {
            var _a;
            __classPrivateFieldGet(this, _resetToggle).call(this);
            if (((_a = menu.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                menu.show = !(menu === null || menu === void 0 ? void 0 : menu.show);
                menu.toggleOn = menu.show;
                __classPrivateFieldGet(this, _collapseOn).call(this);
            }
            else {
                this.resetSelected();
                menu.selected = true;
                this.sidenavDetail.close();
            }
        };
        this.switchMenu = () => {
            this.isModeMenu = !this.isModeMenu;
            this.layoutIcon.highlighMenuSelected();
        };
        this.openDetail = (menus) => {
            this.detailMenus = [...menus];
            this.sidenavDetail.open();
        };
        this.toggle = () => {
            this.sidenav.toggle();
        };
    }
    set disabledToggle(val) {
        this.disabledToggleVal = ZuiB.toBool(val);
    }
    ngOnChanges() {
        this.option = ZuiO.mergeDeep(getDefaultOptions(), this.inputOption);
        this.menus = [...this.menu.items];
        __classPrivateFieldGet(this, _setDefaultValue).call(this);
    }
    get menu() {
        return this.option.menu;
    }
    get content() {
        return this.option.content;
    }
    get header() {
        return this.content.header;
    }
    get topHeader() {
        return this.menu.topHeader;
    }
    get width() {
        return this.isModeMenu ? this.menu.width : '110px';
    }
    // public
    get opened() {
        return this.sidenav.opened;
    }
}
_resetToggle = new WeakMap(), _collapseOn = new WeakMap(), _setDefaultValue = new WeakMap();
ZuiTemplateLayoutComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-template-layout',
                template: "<mat-sidenav-container\n  style=\"--scrollBarColor_142c1b45: {{ menu.scrollBarColor }};\n  --titleColor_142c1b45: {{ menu.titleColor }};\n  --descriptionColor_142c1b45: {{ menu.descriptionColor }};\n  --hoverBgColor_142c1b45: {{ menu.hoverBgColor }};\n  --hoverFontColor_142c1b45: {{ menu.hoverFontColor }}\"\n>\n  <mat-sidenav #sidenav opened mode=\"side\" [fixedInViewport]=\"true\" [ngStyle]=\"{width: width}\">\n    <div *ngIf=\"isModeMenu\" class=\"zui-template-layout__sidenav\" [ngStyle]=\"{backgroundColor: menu.bgColor}\">\n      <div class=\"zui-template-layout__top\">\n        <div *ngIf=\"topHeader?.logo as logo\">\n          <img class=\"zui-pointer\" alt=\"logo\" [src]=\"logo.src\" [routerLink]=\"logo.routerLink\" (click)=\"resetSelected()\" />\n        </div>\n        <ng-container *ngIf=\"topHeader?.title as title\">\n          <div\n            class=\"zui-template-layout__top-title\"\n            [innerHtml]=\"title.value\"\n            [routerLink]=\"title.link\"\n            [ngStyle]=\"{color: title.color}\"\n            [routerLink]=\"title.routerLink\"\n            (click)=\"resetSelected()\"\n          ></div>\n        </ng-container>\n        <div class=\"zui-template-layout__top-right\">\n          <mat-icon *ngFor=\"let item of topHeader?.rightIcons\" (click)=\"item.action()\" class=\"zui-pointer zui-noselect\">{{ item.icon }}</mat-icon>\n          <mat-icon *ngIf=\"menu.allowSwitchView\" class=\"zui-pointer zui-noselect\" (click)=\"switchMenu()\">menu</mat-icon>\n        </div>\n      </div>\n      <div *ngIf=\"menu?.header\" class=\"zui-template-layout__header-menu\">\n        <ng-content select=\"[header-menu]\"></ng-content>\n      </div>\n      <div class=\"zui-template-layout__avatar\" *ngIf=\"menu?.avatar as avatar\">\n        <img [src]=\"avatar.src\" alt=\"avatar\" />\n        <div *ngIf=\"avatar?.title\" class=\"font-weight-bold\">{{ avatar.title }}</div>\n        <div *ngIf=\"avatar?.description\">{{ avatar.description }}</div>\n      </div>\n      <div class=\"zui-template-layout__menus mt-20\">\n        <ng-container *ngTemplateOutlet=\"menus; context: {menus: menu.items}\"></ng-container>\n      </div>\n      <div class=\"zui-template-layout__footer\" *ngIf=\"menu.footer\">\n        <ng-content select=\"[footer-menu]\"></ng-content>\n      </div>\n    </div>\n    <zui-template-layout-icons\n      #layoutIcon\n      [class.d-none]=\"isModeMenu\"\n      [option]=\"option\"\n      [sidenavDetail]=\"sidenavDetail\"\n      (switchMenu)=\"switchMenu()\"\n      (openDetail)=\"openDetail($event)\"\n    ></zui-template-layout-icons>\n  </mat-sidenav>\n\n  <mat-sidenav-content>\n    <mat-sidenav-container>\n      <mat-sidenav #sidenavDetail mode=\"over\" [fixedInViewport]=\"true\" class=\"zui-template-layout__detail\" [ngStyle]=\"{backgroundColor: menu.bgColor}\">\n        <div class=\"zui-template-layout__menus h-100 py-10\">\n          <ng-container *ngTemplateOutlet=\"menus; context: {menus: detailMenus}\"></ng-container>\n        </div>\n      </mat-sidenav>\n      <mat-sidenav-content class=\"zui-template-layout__right-side\">\n        <div class=\"zui-template-layout__center\">\n          <div *ngIf=\"header.left || header.right\" class=\"zui-template-layout__header\" [class.zui-template-layout__header-sticky]=\"header.sticky\" [ngStyle]=\"{padding: header.padding}\">\n            <div class=\"d-flex-1\" *ngIf=\"header.left\">\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div class=\"d-flex-1\" *ngIf=\"header.right\">\n              <ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </div>\n          <div class=\"zui-template-layout__content\">\n            <ng-content select=\"[content]\"></ng-content>\n          </div>\n        </div>\n        <ng-container *ngIf=\"content.rightSide as rightSide\">\n          <div *ngIf=\"rightSide.show\" class=\"zui-template-layout__right\" [ngStyle]=\"{padding: rightSide.padding}\">\n            <ng-content select=\"[right-side]\"></ng-content>\n          </div>\n        </ng-container>\n      </mat-sidenav-content>\n    </mat-sidenav-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #menus let-menus=\"menus\">\n  <ng-container *ngFor=\"let menu of menus\">\n    <ng-container *ngIf=\"!menu.type || menu.type === 'item'\">\n      <div class=\"zui-template-layout__item\" [class.zui-template-layout__item-selected]=\"menu.selected\" (click)=\"toggleMenu(menu)\" [routerLink]=\"menu.routerLink\">\n        <mat-icon>{{ menu.icon }}</mat-icon>\n        <div class=\"zui-template-layout__item-content\">\n          <div *ngIf=\"menu?.title\">{{ menu.title }}</div>\n          <div *ngIf=\"menu?.description\">{{ menu.description }}</div>\n        </div>\n        <mat-icon *ngIf=\"menu.children\">{{ menu.show ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"menu.children?.length > 0 && menu.show\" (click)=\"toggleMenu(menu)\">\n        <div *ngFor=\"let child of menu.children\" class=\"zui-template-layout__child1-container\">\n          <div class=\"zui-template-layout__child1\" [class.zui-template-layout__item-selected]=\"child.selected\" (click)=\"toggleMenu(child)\" [routerLink]=\"child.routerLink\">\n            <div>{{ child.title }}</div>\n            <mat-icon *ngIf=\"child.children\">{{ child.show ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}</mat-icon>\n          </div>\n          <ng-container *ngIf=\"child.children?.length > 0 && child.show\">\n            <div\n              *ngFor=\"let child2 of child.children\"\n              class=\"zui-template-layout__child2\"\n              [class.zui-template-layout__item-selected]=\"child2.selected\"\n              (click)=\"toggleMenu(child2)\"\n              [routerLink]=\"child2.routerLink\"\n            >\n              {{ child2.title }}\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n    <div *ngIf=\"menu.type === 'group'\" class=\"zui-template-layout__group\" [class.zui-template-layout__group-line]=\"menu.groupLine\">\n      <div class=\"zui-template-layout__group-title\">{{ menu.title }}</div>\n      <div class=\"zui-template-layout__group-description\">{{ menu.description }}</div>\n    </div>\n  </ng-container>\n</ng-template>\n",
                styles: [".zui-template-layout__sidenav{color:#fff;display:flex;flex-direction:column;height:100vh}.zui-template-layout__top{display:flex;align-items:center;padding:20px 20px 0}.zui-template-layout__top-title{cursor:pointer;font-weight:500;font-size:20px}.zui-template-layout__top-right{display:flex;color:var(--descriptionColor_142c1b45);flex:1;justify-content:flex-end}.zui-template-layout__top-right>mat-icon:not(:last-child){margin-right:10px}.zui-template-layout__top-right>mat-icon:hover{color:var(--hoverFontColor_142c1b45)}.zui-template-layout__header-menu{padding:20px 20px 0}.zui-template-layout__avatar{margin-top:20px;text-align:center;font-size:14px}.zui-template-layout__avatar>img{border-radius:50%;width:70px;margin-bottom:10px}.zui-template-layout__avatar>div:last-child{color:var(--titleColor_142c1b45)}.zui-template-layout__menus{flex:1;overflow-y:auto}.zui-template-layout__menus::-webkit-scrollbar{width:5px}.zui-template-layout__menus::-webkit-scrollbar-thumb{background:var(--scrollBarColor_142c1b45);border-radius:5px}.zui-template-layout__menus-top{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent);height:5px}.zui-template-layout__item{display:flex;align-items:center;margin:0 10px 5px;padding:10px;border-radius:5px;color:var(--descriptionColor_142c1b45);cursor:pointer}.zui-template-layout__item-selected,.zui-template-layout__item:hover{background-color:var(--hoverBgColor_142c1b45);color:var(--hoverFontColor_142c1b45)!important}.zui-template-layout__item-selected .zui-template-layout__item-content>div,.zui-template-layout__item:hover .zui-template-layout__item-content>div{color:var(--hoverFontColor_142c1b45)}.zui-template-layout__item-content,.zui-template-layout__item-title{flex:1;margin-left:10px}.zui-template-layout__item-content>div:first-child{color:var(--titleColor_142c1b45)}.zui-template-layout__item-content>div:nth-child(2){font-size:12px;color:var(--descriptionColor_142c1b45)}.zui-template-layout__item>mat-icon:last-child{margin-left:10px}.zui-template-layout__group{padding:0 20px 10px}.zui-template-layout__group:not(:first-child){padding-top:15px}.zui-template-layout__group-title{color:var(--titleColor_142c1b45);text-transform:uppercase}.zui-template-layout__group-description{font-size:12px;color:var(--descriptionColor_142c1b45)}.zui-template-layout__group-line{margin-top:15px;border-top:1px solid #4e5155}.zui-template-layout__child1{display:flex;align-items:center;margin:0 10px 5px;padding:10px 10px 10px 45px;border-radius:5px;color:var(--descriptionColor_142c1b45);cursor:pointer}.zui-template-layout__child1:hover{background-color:var(--hoverBgColor_142c1b45);color:var(--hoverFontColor_142c1b45)}.zui-template-layout__child1>div{flex:1}.zui-template-layout__child1>mat-icon{cursor:pointer}.zui-template-layout__child1-container:hover{background-color:hsla(0,0%,100%,.0588235294)}.zui-template-layout__child2{margin:0 10px 5px;padding:10px 10px 10px 65px;border-radius:5px;color:var(--descriptionColor_142c1b45);cursor:pointer}.zui-template-layout__child2:hover{background-color:#3d3d3d;color:var(--hoverFontColor_142c1b45)}.zui-template-layout__right-side{display:flex;background-color:#fff;height:100vh}.zui-template-layout__right{position:-webkit-sticky;position:sticky;align-self:flex-start;top:0;height:100vh;border-left:1px solid #f0f0f0;padding:10px}.zui-template-layout__center{flex:1;display:flex;flex-direction:column}.zui-template-layout__header{display:flex;padding:20px;width:100%;background-color:#fff;border-bottom:1px solid #f0f0f0;z-index:1}.zui-template-layout__header>div:last-child{text-align:right}.zui-template-layout__header-sticky{position:-webkit-sticky;position:sticky;align-self:flex-start;top:0}.zui-template-layout__detail{width:250px}.long{width:20px;height:500px}:host ::ng-deep mat-sidenav>div.mat-drawer-inner-container{overflow:hidden}"]
            },] }
];
ZuiTemplateLayoutComponent.propDecorators = {
    inputOption: [{ type: Input, args: ['option',] }],
    disabledToggle: [{ type: Input }],
    sidenav: [{ type: ViewChild, args: ['sidenav',] }],
    sidenavDetail: [{ type: ViewChild, args: ['sidenavDetail',] }],
    layoutIcon: [{ type: ViewChild, args: ['layoutIcon',] }],
    panels: [{ type: ViewChildren, args: ['panels',] }],
    zuiPanelDefs: [{ type: ContentChildren, args: [ZuiPanelDirective,] }]
};
//# sourceMappingURL=index.component.js.map