import { ChangeDetectionStrategy, Component } 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/dropdown/dropdown.component";
import * as i5 from "../../shared/components/dropdown/dropdown-menu.component";
import * as i6 from "../../shared/components/dropdown/dropdown-trigger.directive";
import * as i7 from "../../shared/components/dropdown/dropdown-item.directive";
import * as i8 from "../../shared/components/status-badge/status-badge.component";
import * as i9 from "../../shared/components/ui-extension-point/ui-extension-point.component";
import * as i10 from "@ngx-translate/core";
export class SettingsNavComponent extends BaseNavComponent {
    ngOnInit() {
        super.ngOnInit();
        this.settingsMenuConfig$ = this.navBuilderService.menuConfig$.pipe(map(sections => sections.filter(s => s.displayMode === 'settings')));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SettingsNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SettingsNavComponent, selector: "vdr-settings-nav", usesInheritance: true, ngImport: i0, template: "<nav>\n    <section class=\"settings-nav-content\">\n        <ng-container *ngFor=\"let section of settingsMenuConfig$ | async\">\n            <vdr-ui-extension-point\n                [locationId]=\"section.id\"\n                api=\"navMenu\"\n                [topPx]=\"-6\"\n                [leftPx]=\"8\"\n                display=\"block\"\n            >\n                <vdr-dropdown>\n                    <button class=\"setting-link\" vdrDropdownTrigger>\n                        <div>\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                            <clr-icon\n                                *ngIf=\"section.icon\"\n                                [attr.shape]=\"section.icon || 'block'\"\n                                size=\"20\"\n                            ></clr-icon>\n                            <label class=\"md:hidden\" [for]=\"section.id\">{{ section.label | translate }}</label>\n                        </div>\n                        <clr-icon class=\"md:hidden\" shape=\"caret right\"></clr-icon>\n                    </button>\n                    <vdr-dropdown-menu vdrPosition=\"top-right\">\n                        <ng-container *ngFor=\"let item of section.items\">\n                            <div *ngIf=\"shouldDisplayLink(item)\" class=\"menu-link\">\n                                <a\n                                    vdrDropdownItem\n                                    [attr.data-item-id]=\"section.id\"\n                                    [routerLink]=\"getRouterLink(item)\"\n                                    routerLinkActive=\"active\"\n                                    (click)=\"item.onClick && item.onClick($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 [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\n                                    <div class=\"\">{{ item.label | translate }}</div>\n                                </a>\n                            </div>\n                        </ng-container>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </vdr-ui-extension-point>\n        </ng-container>\n    </section>\n</nav>\n", styles: [".setting-link{width:100%;border:none;display:flex;justify-content:space-between;font-size:var(--font-size-xs);align-items:center;cursor:pointer;background-color:transparent;padding:var(--space-unit);color:var(--color-left-nav-text)}.setting-link:hover{color:var(--color-left-nav-text-hover)}.setting-link clr-icon{margin-inline-end:6px}.menu-link{position:relative}.menu-link vdr-status-badge{left:20px;top:3px}\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: 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.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i5.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i6.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i7.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i8.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: i9.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SettingsNavComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-settings-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav>\n    <section class=\"settings-nav-content\">\n        <ng-container *ngFor=\"let section of settingsMenuConfig$ | async\">\n            <vdr-ui-extension-point\n                [locationId]=\"section.id\"\n                api=\"navMenu\"\n                [topPx]=\"-6\"\n                [leftPx]=\"8\"\n                display=\"block\"\n            >\n                <vdr-dropdown>\n                    <button class=\"setting-link\" vdrDropdownTrigger>\n                        <div>\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                            <clr-icon\n                                *ngIf=\"section.icon\"\n                                [attr.shape]=\"section.icon || 'block'\"\n                                size=\"20\"\n                            ></clr-icon>\n                            <label class=\"md:hidden\" [for]=\"section.id\">{{ section.label | translate }}</label>\n                        </div>\n                        <clr-icon class=\"md:hidden\" shape=\"caret right\"></clr-icon>\n                    </button>\n                    <vdr-dropdown-menu vdrPosition=\"top-right\">\n                        <ng-container *ngFor=\"let item of section.items\">\n                            <div *ngIf=\"shouldDisplayLink(item)\" class=\"menu-link\">\n                                <a\n                                    vdrDropdownItem\n                                    [attr.data-item-id]=\"section.id\"\n                                    [routerLink]=\"getRouterLink(item)\"\n                                    routerLinkActive=\"active\"\n                                    (click)=\"item.onClick && item.onClick($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 [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\n                                    <div class=\"\">{{ item.label | translate }}</div>\n                                </a>\n                            </div>\n                        </ng-container>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </vdr-ui-extension-point>\n        </ng-container>\n    </section>\n</nav>\n", styles: [".setting-link{width:100%;border:none;display:flex;justify-content:space-between;font-size:var(--font-size-xs);align-items:center;cursor:pointer;background-color:transparent;padding:var(--space-unit);color:var(--color-left-nav-text)}.setting-link:hover{color:var(--color-left-nav-text-hover)}.setting-link clr-icon{margin-inline-end:6px}.menu-link{position:relative}.menu-link vdr-status-badge{left:20px;top:3px}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 