import { __decorate, __metadata } from "tslib";
import { TooltipTrigger } from '@alauda/ui';
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, } from '@angular/core';
import { once } from 'lodash-es';
import { BehaviorSubject, combineLatest, merge, Observable, ReplaySubject, distinctUntilChanged, map, } from 'rxjs';
import { ObservableInput, publishRef } from '../../../core/public-api';
import { PageComponent } from '../../page';
import { filterEmptyNode } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "../../page";
function NavMenuComponent_acl_nav_skeleton_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "acl-nav-skeleton");
} }
function NavMenuComponent_div_6_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 5);
    i0.ɵɵlistener("click", function NavMenuComponent_div_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCollapse()); });
    i0.ɵɵelement(1, "aui-icon", 6);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("icon", ctx_r1.isCollapse ? "basic:expand" : "basic:collapse");
} }
const LOCALSTORAGE_KEY = 'navCollapseLocalstorageKey';
const SIDENAV_ANI = 'sidenav-ani';
export class NavMenuComponent {
    constructor(pageCpt) {
        this.pageCpt = pageCpt;
        this.expandedKey$$ = new ReplaySubject(1);
        this.focusedRootKey$$ = new BehaviorSubject(null);
        this.isCollapse = localStorage.getItem(LOCALSTORAGE_KEY) === 'true';
        this.triggerType = TooltipTrigger.Hover;
        this.disableAniIcon = false;
        this.filteredConfigs$ = this.configs$.pipe(map(filterEmptyNode), publishRef());
        this.items$ = combineLatest([this.filteredConfigs$, this.groups$]).pipe(
        // 处理成NavItemConfig数组
        map(([items, groups]) => items ||
            (groups
                ? groups.reduce((prev, cur) => [...prev, ...cur.items], [])
                : [])), publishRef());
        this.paths$ = this.items$.pipe(map(items => this.getPaths(items)), publishRef());
        this.activeKeys$ = combineLatest([this.paths$, this.activatedKey$]).pipe(map(([paths, key]) => this.findPathByLastKey(paths, key)), publishRef());
        this.expandedKeys$ = combineLatest([
            this.paths$,
            merge(this.activatedKey$, this.expandedKey$$),
        ]).pipe(map(([paths, key]) => this.findPathByLastKey(paths, key)), publishRef());
        this.focusedRootKey$ = this.focusedRootKey$$.pipe(distinctUntilChanged(), publishRef());
        this.addSidenavAni = once(() => {
            this.pageCpt.addClass(SIDENAV_ANI);
        });
    }
    ngOnInit() {
        this.updateCollapseClass();
    }
    ngOnDestroy() {
        this.pageCpt.removeClass(SIDENAV_ANI);
    }
    // 通过key找到他及其父的path路径
    findPathByLastKey(paths, key) {
        return paths.find(path => [...path].pop() === key);
    }
    // 以NavItemConfig的key组成自上而下的path路径，类似['a', 'a/b']
    getPaths(items, parent) {
        if (!items?.length) {
            return [];
        }
        const pre = parent ? [...parent] : [];
        return items.reduce((prev, cur) => [
            ...prev,
            ...this.getPaths(cur.children, [...pre, cur.key]),
        ], items.map(item => [...pre, item.key]));
    }
    expandedKeyChanged(key) {
        this.expandedKey$$.next(key);
    }
    focusedRootKeyChange(key) {
        this.focusedRootKey$$.next(key);
    }
    toggleCollapse() {
        this.isCollapse = !this.isCollapse;
        localStorage.setItem(LOCALSTORAGE_KEY, String(this.isCollapse));
        this.addSidenavAni(); // 当用户第一次主动切换状态时添加动效类，而不是一开始就有，避免初始化时其他样式切换带来的过度动效
        this.updateCollapseClass();
    }
    updateCollapseClass() {
        this.pageCpt[this.isCollapse ? 'addClass' : 'removeClass']('sidenav-collapse');
    }
}
NavMenuComponent.ɵfac = function NavMenuComponent_Factory(t) { return new (t || NavMenuComponent)(i0.ɵɵdirectiveInject(i1.PageComponent)); };
NavMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavMenuComponent, selectors: [["acl-nav-menu"]], inputs: { activatedKey: "activatedKey", isCollapse: "isCollapse", triggerType: "triggerType", configs: "configs", groups: "groups", disableAniIcon: "disableAniIcon" }, decls: 7, vars: 9, consts: [[1, "acl-nav-menu__container", "tw-h-full"], [4, "ngIf"], [1, "acl-nav-menu", "tw-flex", "tw-flex-col", "tw-select-none", "tw-relative", 3, "ngClass"], [3, "items", "groups"], ["class", "acl-nav-menu__collapse-button tw-flex tw-w-full tw-justify-end", 3, "click", 4, "ngIf"], [1, "acl-nav-menu__collapse-button", "tw-flex", "tw-w-full", "tw-justify-end", 3, "click"], [3, "icon"]], template: function NavMenuComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵtemplate(1, NavMenuComponent_acl_nav_skeleton_1_Template, 1, 0, "acl-nav-skeleton", 1);
        i0.ɵɵelementStart(2, "div", 2);
        i0.ɵɵpipe(3, "async");
        i0.ɵɵelement(4, "acl-nav-item-ul", 3);
        i0.ɵɵpipe(5, "async");
        i0.ɵɵelementEnd()();
        i0.ɵɵtemplate(6, NavMenuComponent_div_6_Template, 2, 1, "div", 4);
    } if (rf & 2) {
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", !(ctx.configs == null ? null : ctx.configs.length) && !(ctx.groups == null ? null : ctx.groups.length));
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngClass", i0.ɵɵpipeBind1(3, 5, ctx.isCollapse$) ? "collapse" : "expand");
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("items", i0.ɵɵpipeBind1(5, 7, ctx.filteredConfigs$))("groups", ctx.groups);
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("ngIf", !(!(ctx.configs == null ? null : ctx.configs.length) && !(ctx.groups == null ? null : ctx.groups.length)));
    } }, styles: ["@import\"@angular/cdk/overlay-prebuilt.css\";acl-nav-item-ul:not([hidden]){display:block}acl-nav-item-li{position:relative}.acl-nav-menu{width:220px;padding-bottom:80px}.acl-nav-menu-content>acl-nav-item-ul>.acl-nav-item-ul>acl-nav-item-li+acl-nav-item-li{margin-top:4px}.acl-nav-menu .acl-nav-item{word-break:keep-all}.acl-nav-menu.collapse{width:40px;overflow:hidden}.acl-nav-menu.collapse .acl-nav-item__icon{transform:translate(-8px)}.acl-nav-menu.collapse .acl-nav-item-group__title,.acl-nav-menu.collapse .acl-nav-item-li__sub-items{display:none}.acl-nav-menu.collapse .acl-nav-item-li__content{max-height:40px}.acl-nav-menu.collapse .acl-nav-item-li__content .acl-nav-item__content,.acl-nav-menu.collapse .acl-nav-item-li__content .acl-nav-item-li__expansion-indicator{opacity:0}.acl-nav-menu.collapse .acl-nav-item-li__content.isActive{background-color:var(--acl-nav-active-background-color)}.sidenav-ani .acl-nav-menu,.sidenav-ani .acl-nav-menu .acl-nav-item,.sidenav-ani .acl-nav-menu__icon,.sidenav-ani .acl-nav-menu-li__sub-items,.sidenav-ani .acl-nav-menu .acl-nav-item__icon,.sidenav-ani .acl-nav-menu .acl-nav-item-li__sub-items{transition:width,opacity,transform;transition-duration:.3s;transition-timing-function:cubic-bezier(.38,0,.24,1)}.sidenav-ani .acl-nav-menu-li__content .acl-nav-item__content,.sidenav-ani .acl-nav-menu-li__content .acl-nav-item-li__expansion-indicator,.sidenav-ani .acl-nav-menu .acl-nav-item-li__content .acl-nav-item__content,.sidenav-ani .acl-nav-menu .acl-nav-item-li__content .acl-nav-item-li__expansion-indicator{transition:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.38,0,.24,1)}.acl-nav-menu__collapse-button{position:fixed;bottom:0;left:20px;border-top:1px solid rgb(var(--aui-color-n-8));line-height:60px;background-color:rgb(var(--aui-color-main-bg));cursor:pointer;color:rgb(var(--aui-color-n-3));width:220px;padding:0 20px}.sidenav-collapse .acl-nav-menu__collapse-button{width:40px;padding:0 12px}.sidenav-ani .acl-nav-menu__collapse-button{transition:width padding;transition-duration:.3s;transition-timing-function:cubic-bezier(.38,0,.24,1)}.acl-nav-menu__collapse-button .aui-icon{font-size:var(--aui-icon-size-m)}.acl-nav-menu__collapse-button:hover{color:var(--acl-nav-active-text-color)}.nav-menu-overlay-pane{color:rgb(var(--aui-color-main-text));background-color:rgba(var(--aui-color-popper-bg));padding:0 0 6px;overflow-y:auto;box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),20%);border-radius:4px}.nav-menu-overlay-pane::-webkit-scrollbar{width:4px;height:4px}.nav-menu-overlay-pane::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.nav-menu-overlay-pane::-webkit-scrollbar-corner{background-color:transparent}.nav-menu-overlay-pane>.acl-nav-item-li.depth-0.hasSubItem{width:220px;height:100%}.nav-menu-overlay-pane>.acl-nav-item-li.depth-0.hasSubItem .acl-nav-item-li__content[data-set-depth=\"0\"]{background-color:rgba(var(--aui-color-popper-bg))}.nav-menu-overlay-pane>.acl-nav-item-li.depth-0:not(.hasSubItem) .acl-nav-item-li__content[data-set-depth=\"0\"]{padding:10px;margin:6px 6px 0}.nav-menu-overlay-pane .acl-nav-item__content{max-width:120px;width:initial}.nav-menu-overlay-pane .acl-nav-item-li__content{padding-left:var(--aui-spacing-l);padding-right:var(--aui-spacing-l)}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"0\"]{padding:16px 0 10px;margin-left:var(--aui-spacing-xl);position:sticky;top:0;z-index:9}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"0\"].no-link{pointer-events:none;user-select:none}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"1\"]{padding-left:28px;margin:0 var(--aui-spacing-xl)}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"2\"]{padding-left:44px;margin:0 var(--aui-spacing-xl)}\n"], encapsulation: 2, changeDetection: 0 });
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], NavMenuComponent.prototype, "activatedKey$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], NavMenuComponent.prototype, "isCollapse$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], NavMenuComponent.prototype, "configs$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], NavMenuComponent.prototype, "groups$", void 0);
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavMenuComponent, [{
        type: Component,
        args: [{ selector: 'acl-nav-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div class=\"acl-nav-menu__container tw-h-full\">\n  <acl-nav-skeleton\n    *ngIf=\"!configs?.length && !groups?.length\"\n  ></acl-nav-skeleton>\n\n  <div\n    class=\"acl-nav-menu tw-flex tw-flex-col tw-select-none tw-relative\"\n    [ngClass]=\"(isCollapse$ | async) ? 'collapse' : 'expand'\"\n  >\n    <acl-nav-item-ul\n      [items]=\"filteredConfigs$ | async\"\n      [groups]=\"groups\"\n    ></acl-nav-item-ul>\n  </div>\n</div>\n\n<div\n  *ngIf=\"!(!configs?.length && !groups?.length)\"\n  class=\"acl-nav-menu__collapse-button tw-flex tw-w-full tw-justify-end\"\n  (click)=\"toggleCollapse()\"\n>\n  <aui-icon [icon]=\"isCollapse ? 'basic:expand' : 'basic:collapse'\"></aui-icon>\n</div>\n", styles: ["@import\"@angular/cdk/overlay-prebuilt.css\";acl-nav-item-ul:not([hidden]){display:block}acl-nav-item-li{position:relative}.acl-nav-menu{width:220px;padding-bottom:80px}.acl-nav-menu-content>acl-nav-item-ul>.acl-nav-item-ul>acl-nav-item-li+acl-nav-item-li{margin-top:4px}.acl-nav-menu .acl-nav-item{word-break:keep-all}.acl-nav-menu.collapse{width:40px;overflow:hidden}.acl-nav-menu.collapse .acl-nav-item__icon{transform:translate(-8px)}.acl-nav-menu.collapse .acl-nav-item-group__title,.acl-nav-menu.collapse .acl-nav-item-li__sub-items{display:none}.acl-nav-menu.collapse .acl-nav-item-li__content{max-height:40px}.acl-nav-menu.collapse .acl-nav-item-li__content .acl-nav-item__content,.acl-nav-menu.collapse .acl-nav-item-li__content .acl-nav-item-li__expansion-indicator{opacity:0}.acl-nav-menu.collapse .acl-nav-item-li__content.isActive{background-color:var(--acl-nav-active-background-color)}.sidenav-ani .acl-nav-menu,.sidenav-ani .acl-nav-menu .acl-nav-item,.sidenav-ani .acl-nav-menu__icon,.sidenav-ani .acl-nav-menu-li__sub-items,.sidenav-ani .acl-nav-menu .acl-nav-item__icon,.sidenav-ani .acl-nav-menu .acl-nav-item-li__sub-items{transition:width,opacity,transform;transition-duration:.3s;transition-timing-function:cubic-bezier(.38,0,.24,1)}.sidenav-ani .acl-nav-menu-li__content .acl-nav-item__content,.sidenav-ani .acl-nav-menu-li__content .acl-nav-item-li__expansion-indicator,.sidenav-ani .acl-nav-menu .acl-nav-item-li__content .acl-nav-item__content,.sidenav-ani .acl-nav-menu .acl-nav-item-li__content .acl-nav-item-li__expansion-indicator{transition:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.38,0,.24,1)}.acl-nav-menu__collapse-button{position:fixed;bottom:0;left:20px;border-top:1px solid rgb(var(--aui-color-n-8));line-height:60px;background-color:rgb(var(--aui-color-main-bg));cursor:pointer;color:rgb(var(--aui-color-n-3));width:220px;padding:0 20px}.sidenav-collapse .acl-nav-menu__collapse-button{width:40px;padding:0 12px}.sidenav-ani .acl-nav-menu__collapse-button{transition:width padding;transition-duration:.3s;transition-timing-function:cubic-bezier(.38,0,.24,1)}.acl-nav-menu__collapse-button .aui-icon{font-size:var(--aui-icon-size-m)}.acl-nav-menu__collapse-button:hover{color:var(--acl-nav-active-text-color)}.nav-menu-overlay-pane{color:rgb(var(--aui-color-main-text));background-color:rgba(var(--aui-color-popper-bg));padding:0 0 6px;overflow-y:auto;box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),20%);border-radius:4px}.nav-menu-overlay-pane::-webkit-scrollbar{width:4px;height:4px}.nav-menu-overlay-pane::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.nav-menu-overlay-pane::-webkit-scrollbar-corner{background-color:transparent}.nav-menu-overlay-pane>.acl-nav-item-li.depth-0.hasSubItem{width:220px;height:100%}.nav-menu-overlay-pane>.acl-nav-item-li.depth-0.hasSubItem .acl-nav-item-li__content[data-set-depth=\"0\"]{background-color:rgba(var(--aui-color-popper-bg))}.nav-menu-overlay-pane>.acl-nav-item-li.depth-0:not(.hasSubItem) .acl-nav-item-li__content[data-set-depth=\"0\"]{padding:10px;margin:6px 6px 0}.nav-menu-overlay-pane .acl-nav-item__content{max-width:120px;width:initial}.nav-menu-overlay-pane .acl-nav-item-li__content{padding-left:var(--aui-spacing-l);padding-right:var(--aui-spacing-l)}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"0\"]{padding:16px 0 10px;margin-left:var(--aui-spacing-xl);position:sticky;top:0;z-index:9}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"0\"].no-link{pointer-events:none;user-select:none}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"1\"]{padding-left:28px;margin:0 var(--aui-spacing-xl)}.nav-menu-overlay-pane .acl-nav-item-li__content[data-set-depth=\"2\"]{padding-left:44px;margin:0 var(--aui-spacing-xl)}\n"] }]
    }], function () { return [{ type: i1.PageComponent }]; }, { activatedKey: [{
            type: Input
        }], activatedKey$: [], isCollapse: [{
            type: Input
        }], isCollapse$: [], triggerType: [{
            type: Input
        }], configs: [{
            type: Input
        }], configs$: [], groups: [{
            type: Input
        }], groups$: [], disableAniIcon: [{
            type: Input
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 