import { Component, isDevMode } from '@angular/core';
import { EMPTY } from 'rxjs';
import { map, switchMap, take } from 'rxjs/operators';
import { getAppConfig } from '../../app.config';
import { ADMIN_UI_VERSION } from '../../common/version';
import { UiLanguageSwitcherDialogComponent } from '../ui-language-switcher-dialog/ui-language-switcher-dialog.component';
import * as i0 from "@angular/core";
import * as i1 from "../../providers/auth/auth.service";
import * as i2 from "../../data/providers/data.service";
import * as i3 from "@angular/router";
import * as i4 from "../../providers/i18n/i18n.service";
import * as i5 from "../../providers/modal/modal.service";
import * as i6 from "../../providers/local-storage/local-storage.service";
import * as i7 from "../../providers/breadcrumb/breadcrumb.service";
import * as i8 from "../../providers/localization/localization.service";
import * as i9 from "@angular/common";
import * as i10 from "@clr/angular";
import * as i11 from "@angular/cdk/bidi";
import * as i12 from "../../shared/components/dropdown/dropdown.component";
import * as i13 from "../../shared/components/dropdown/dropdown-menu.component";
import * as i14 from "../../shared/components/dropdown/dropdown-trigger.directive";
import * as i15 from "../../shared/directives/if-multichannel.directive";
import * as i16 from "../user-menu/user-menu.component";
import * as i17 from "../main-nav/main-nav.component";
import * as i18 from "../breadcrumb/breadcrumb.component";
import * as i19 from "../channel-switcher/channel-switcher.component";
import * as i20 from "../alerts/alerts.component";
export class AppShellComponent {
    constructor(authService, dataService, router, i18nService, modalService, localStorageService, breadcrumbService, localizationService) {
        this.authService = authService;
        this.dataService = dataService;
        this.router = router;
        this.i18nService = i18nService;
        this.modalService = modalService;
        this.localStorageService = localStorageService;
        this.breadcrumbService = breadcrumbService;
        this.localizationService = localizationService;
        this.version = ADMIN_UI_VERSION;
        this.availableLanguages = [];
        this.hideVendureBranding = getAppConfig().hideVendureBranding;
        this.devMode = isDevMode();
    }
    ngOnInit() {
        this.direction$ = this.localizationService.direction$;
        this.uiLanguageAndLocale$ = this.localizationService.uiLanguageAndLocale$;
        this.userName$ = this.dataService.client
            .userStatus()
            .single$.pipe(map(data => data.userStatus.username));
        this.availableLanguages = this.i18nService.availableLanguages;
        this.pageTitle$ = this.breadcrumbService.breadcrumbs$.pipe(map(breadcrumbs => breadcrumbs[breadcrumbs.length - 1].label));
        this.mainNavExpanded$ = this.dataService.client
            .uiState()
            .stream$.pipe(map(({ uiState }) => uiState.mainNavExpanded));
    }
    selectUiLanguage() {
        this.uiLanguageAndLocale$
            .pipe(take(1), switchMap(([currentLanguage, currentLocale]) => this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
            closable: true,
            size: 'lg',
            locals: {
                availableLanguages: this.availableLanguages,
                currentLanguage,
                currentLocale,
            },
        })), switchMap(result => result ? this.dataService.client.setUiLanguage(result[0], result[1]) : EMPTY))
            .subscribe(result => {
            if (result.setUiLanguage) {
                this.i18nService.setLanguage(result.setUiLanguage);
                this.localStorageService.set('uiLanguageCode', result.setUiLanguage);
                this.localStorageService.set('uiLocale', result.setUiLocale ?? undefined);
            }
        });
    }
    expandNav() {
        this.dataService.client.setMainNavExpanded(true).subscribe();
    }
    collapseNav() {
        this.dataService.client.setMainNavExpanded(false).subscribe();
    }
    logOut() {
        this.authService.logOut().subscribe(() => {
            const { loginUrl } = getAppConfig();
            if (loginUrl) {
                window.location.href = loginUrl;
            }
            else {
                this.router.navigate(['/login']);
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, deps: [{ token: i1.AuthService }, { token: i2.DataService }, { token: i3.Router }, { token: i4.I18nService }, { token: i5.ModalService }, { token: i6.LocalStorageService }, { token: i7.BreadcrumbService }, { token: i8.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\n        <div class=\"branding\">\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\n            /></a>\n            <div class=\"collapse-menu\">\n                <button class=\"\" (click)=\"collapseNav()\">\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"mx-4\">\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\n        </div>\n        <div class=\"main-nav-container\">\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\n        </div>\n        <div class=\"settings-nav-container\">\n            <hr />\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\n        </div>\n        <div class=\"mx-4 py-2\">\n            <div class=\"version\">v{{ version }}</div>\n        </div>\n        <div class=\"mx-2\">\n            <div *ngIf=\"devMode\" class=\"flex center mb-2\">\n                <vdr-dropdown>\n                    <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\n                        <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\n                    </button>\n                    <vdr-dropdown-menu>\n                        <div class=\"px-2 py-1\">\n                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"surface\">\n        <div class=\"content-container\">\n            <div class=\"top-bar\">\n                <div class=\"expand-menu mr-1\">\n                    <button class=\"\" (click)=\"expandNav()\">\n                        <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke-width=\"1.5\"\n                            stroke=\"currentColor\"\n                            class=\"bars\"\n                        >\n                            <path\n                                stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\"\n                                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                            />\n                        </svg>\n                    </button>\n                </div>\n                <div>\n                    <vdr-breadcrumb></vdr-breadcrumb>\n                </div>\n                <div class=\"universal-search flex-spacer\"></div>\n                <div class=\"mx-1\">\n                    <vdr-alerts></vdr-alerts>\n                </div>\n                <div>\n                    <vdr-user-menu\n                        [userName]=\"userName$ | async\"\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\n                        [availableLanguages]=\"availableLanguages\"\n                        (selectUiLanguage)=\"selectUiLanguage()\"\n                        (logOut)=\"logOut()\"\n                    ></vdr-user-menu>\n                </div>\n            </div>\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\n        </div>\n    </div>\n</div>\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}.version{color:var(--color-grey-300)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i12.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i13.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i14.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i15.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i16.UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { kind: "component", type: i17.MainNavComponent, selector: "vdr-main-nav", inputs: ["displayMode"], outputs: ["itemClick"] }, { kind: "component", type: i18.BreadcrumbComponent, selector: "vdr-breadcrumb" }, { kind: "component", type: i19.ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { kind: "component", type: i20.AlertsComponent, selector: "vdr-alerts" }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\n        <div class=\"branding\">\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\n            /></a>\n            <div class=\"collapse-menu\">\n                <button class=\"\" (click)=\"collapseNav()\">\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"mx-4\">\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\n        </div>\n        <div class=\"main-nav-container\">\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\n        </div>\n        <div class=\"settings-nav-container\">\n            <hr />\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\n        </div>\n        <div class=\"mx-4 py-2\">\n            <div class=\"version\">v{{ version }}</div>\n        </div>\n        <div class=\"mx-2\">\n            <div *ngIf=\"devMode\" class=\"flex center mb-2\">\n                <vdr-dropdown>\n                    <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\n                        <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\n                    </button>\n                    <vdr-dropdown-menu>\n                        <div class=\"px-2 py-1\">\n                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"surface\">\n        <div class=\"content-container\">\n            <div class=\"top-bar\">\n                <div class=\"expand-menu mr-1\">\n                    <button class=\"\" (click)=\"expandNav()\">\n                        <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke-width=\"1.5\"\n                            stroke=\"currentColor\"\n                            class=\"bars\"\n                        >\n                            <path\n                                stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\"\n                                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                            />\n                        </svg>\n                    </button>\n                </div>\n                <div>\n                    <vdr-breadcrumb></vdr-breadcrumb>\n                </div>\n                <div class=\"universal-search flex-spacer\"></div>\n                <div class=\"mx-1\">\n                    <vdr-alerts></vdr-alerts>\n                </div>\n                <div>\n                    <vdr-user-menu\n                        [userName]=\"userName$ | async\"\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\n                        [availableLanguages]=\"availableLanguages\"\n                        (selectUiLanguage)=\"selectUiLanguage()\"\n                        (logOut)=\"logOut()\"\n                    ></vdr-user-menu>\n                </div>\n            </div>\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\n        </div>\n    </div>\n</div>\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}.version{color:var(--color-grey-300)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.AuthService }, { type: i2.DataService }, { type: i3.Router }, { type: i4.I18nService }, { type: i5.ModalService }, { type: i6.LocalStorageService }, { type: i7.BreadcrumbService }, { type: i8.LocalizationService }]; } });
//# sourceMappingURL=data:application/json;base64, 