import { Component, EventEmitter, Input, Output } from '@angular/core';
import { map } from 'rxjs/operators';
import { BaseNavComponent } from '../base-nav/base-nav.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@clr/angular";
import * as i3 from "@angular/router";
import * as i4 from "../../shared/components/status-badge/status-badge.component";
import * as i5 from "../../shared/components/ui-extension-point/ui-extension-point.component";
import * as i6 from "@ngx-translate/core";
export class MainNavComponent extends BaseNavComponent {
    constructor() {
        super(...arguments);
        this.itemClick = new EventEmitter();
        this.expandedSections = [];
    }
    ngOnInit() {
        super.ngOnInit();
        this.mainMenuConfig$ = this.navBuilderService.menuConfig$.pipe(map(sections => sections.filter(s => this.displayMode ? s.displayMode === this.displayMode : !s.displayMode)));
    }
    toggleExpand(section) {
        if (this.expandedSections.includes(section.id)) {
            this.expandedSections = this.expandedSections.filter(id => id !== section.id);
        }
        else {
            this.expandedSections.push(section.id);
        }
    }
    setExpanded(section, expanded) {
        if (expanded) {
            this.expandedSections.push(section.id);
        }
        else {
            this.expandedSections = this.expandedSections.filter(id => id !== section.id);
        }
    }
    getStyleForSection(section) {
        if (section.collapsible) {
            if (this.expandedSections.includes(section.id)) {
                return { maxHeight: `${section.items.length * 33}px`, opacity: 1, visibility: 'visible' };
            }
            else {
                return { maxHeight: '0px', opacity: 0, visibility: 'hidden' };
            }
        }
    }
    onItemClick(item, event) {
        item.onClick?.(event);
        this.itemClick.emit(item);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MainNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: MainNavComponent, selector: "vdr-main-nav", inputs: { displayMode: "displayMode" }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: "<nav class=\"main-nav\">\n    <section class=\"\">\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | async\">\n            <section\n                class=\"nav-group\"\n                [attr.data-section-id]=\"section.id\"\n                [class.collapsible]=\"section.collapsible\"\n                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\n                routerLinkActive=\"active\"\n                (isActiveChange)=\"setExpanded(section, $event)\"\n                *ngIf=\"shouldDisplayLink(section)\"\n            >\n                <vdr-ui-extension-point\n                    [locationId]=\"section.id\"\n                    api=\"navMenu\"\n                    [topPx]=\"0\"\n                    [leftPx]=\"8\"\n                    display=\"block\"\n                >\n                    <div class=\"section-header\">\n                        <ng-container\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\n                        >\n                            <vdr-status-badge\n                                *ngIf=\"sectionBadge !== 'none'\"\n                                [type]=\"sectionBadge\"\n                            ></vdr-status-badge>\n                        </ng-container>\n                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\n                            section.label | translate\n                        }}</label>\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\n                            <clr-icon\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\n                                size=\"12\"\n                                [title]=\"'common.expand-entries' | translate\"\n                            ></clr-icon>\n                        </button>\n                    </div>\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\n                        <ng-container *ngFor=\"let item of section.items\">\n                            <div\n                                *ngIf=\"shouldDisplayLink(item)\"\n                                class=\"nav-link px-4\"\n                                routerLinkActive=\"active\"\n                            >\n                                <a\n                                    [attr.data-item-id]=\"section.id\"\n                                    [routerLink]=\"getRouterLink(item)\"\n                                    (click)=\"onItemClick(item, $event)\"\n                                >\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\n                                        <vdr-status-badge\n                                            *ngIf=\"itemBadge.type !== 'none'\"\n                                            [type]=\"itemBadge.type\"\n                                        ></vdr-status-badge>\n                                    </ng-container>\n                                    <clr-icon\n                                        [attr.shape]=\"item.icon || 'block'\"\n                                        size=\"16\"\n                                        [title]=\"item.label | translate\"\n                                    ></clr-icon>\n                                    <span class=\"\">{{ item.label | translate }}</span>\n                                </a>\n                            </div>\n                        </ng-container>\n                    </div>\n                </vdr-ui-extension-point>\n            </section>\n        </ng-container>\n    </section>\n</nav>\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-inline-end:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-inline-end:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-inline-end:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}.nav-group .section-header vdr-status-badge{left:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: i5.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MainNavComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-main-nav', template: "<nav class=\"main-nav\">\n    <section class=\"\">\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | async\">\n            <section\n                class=\"nav-group\"\n                [attr.data-section-id]=\"section.id\"\n                [class.collapsible]=\"section.collapsible\"\n                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\n                routerLinkActive=\"active\"\n                (isActiveChange)=\"setExpanded(section, $event)\"\n                *ngIf=\"shouldDisplayLink(section)\"\n            >\n                <vdr-ui-extension-point\n                    [locationId]=\"section.id\"\n                    api=\"navMenu\"\n                    [topPx]=\"0\"\n                    [leftPx]=\"8\"\n                    display=\"block\"\n                >\n                    <div class=\"section-header\">\n                        <ng-container\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\n                        >\n                            <vdr-status-badge\n                                *ngIf=\"sectionBadge !== 'none'\"\n                                [type]=\"sectionBadge\"\n                            ></vdr-status-badge>\n                        </ng-container>\n                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\n                            section.label | translate\n                        }}</label>\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\n                            <clr-icon\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\n                                size=\"12\"\n                                [title]=\"'common.expand-entries' | translate\"\n                            ></clr-icon>\n                        </button>\n                    </div>\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\n                        <ng-container *ngFor=\"let item of section.items\">\n                            <div\n                                *ngIf=\"shouldDisplayLink(item)\"\n                                class=\"nav-link px-4\"\n                                routerLinkActive=\"active\"\n                            >\n                                <a\n                                    [attr.data-item-id]=\"section.id\"\n                                    [routerLink]=\"getRouterLink(item)\"\n                                    (click)=\"onItemClick(item, $event)\"\n                                >\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\n                                        <vdr-status-badge\n                                            *ngIf=\"itemBadge.type !== 'none'\"\n                                            [type]=\"itemBadge.type\"\n                                        ></vdr-status-badge>\n                                    </ng-container>\n                                    <clr-icon\n                                        [attr.shape]=\"item.icon || 'block'\"\n                                        size=\"16\"\n                                        [title]=\"item.label | translate\"\n                                    ></clr-icon>\n                                    <span class=\"\">{{ item.label | translate }}</span>\n                                </a>\n                            </div>\n                        </ng-container>\n                    </div>\n                </vdr-ui-extension-point>\n            </section>\n        </ng-container>\n    </section>\n</nav>\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-inline-end:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-inline-end:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-inline-end:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}.nav-group .section-header vdr-status-badge{left:20px}\n"] }]
        }], propDecorators: { displayMode: [{
                type: Input
            }], itemClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 