import { Component, EventEmitter, Input, Output } from '@angular/core';
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 "../theme-switcher/theme-switcher.component";
import * as i9 from "@ngx-translate/core";
import * as i10 from "../../shared/pipes/locale-language-name.pipe";
export class UserMenuComponent {
    constructor() {
        this.userName = '';
        this.availableLanguages = [];
        this.logOut = new EventEmitter();
        this.selectUiLanguage = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\n        <div class=\"user-circle\">\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\n        </div>\n        <span class=\"user-name\">{{ userName }}</span>\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\n        </a>\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\n            <button\n                type=\"button\"\n                vdrDropdownItem\n                (click)=\"selectUiLanguage.emit()\"\n                [title]=\"'common.select-display-language' | translate\"\n            >\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\n            </button>\n        </ng-container>\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\n        <div class=\"dropdown-divider\"></div>\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\n        </button>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-inline-start:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-inline-end:6px}@media screen and (max-width: 992px){.user-circle{margin-inline-end:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-inline-end:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.ThemeSwitcherComponent, selector: "vdr-theme-switcher" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UserMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-user-menu', template: "<vdr-dropdown>\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\n        <div class=\"user-circle\">\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\n        </div>\n        <span class=\"user-name\">{{ userName }}</span>\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\n        </a>\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\n            <button\n                type=\"button\"\n                vdrDropdownItem\n                (click)=\"selectUiLanguage.emit()\"\n                [title]=\"'common.select-display-language' | translate\"\n            >\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\n            </button>\n        </ng-container>\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\n        <div class=\"dropdown-divider\"></div>\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\n        </button>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-inline-start:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-inline-end:6px}@media screen and (max-width: 992px){.user-circle{margin-inline-end:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-inline-end:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"] }]
        }], propDecorators: { userName: [{
                type: Input
            }], availableLanguages: [{
                type: Input
            }], uiLanguageAndLocale: [{
                type: Input
            }], logOut: [{
                type: Output
            }], selectUiLanguage: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvY29tcG9uZW50cy91c2VyLW1lbnUvdXNlci1tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvY29tcG9uZW50cy91c2VyLW1lbnUvdXNlci1tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7Ozs7OztBQVN2RSxNQUFNLE9BQU8saUJBQWlCO0lBTDlCO1FBTWEsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLHVCQUFrQixHQUFtQixFQUFFLENBQUM7UUFFdkMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFDbEMscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQUN6RDs4R0FOWSxpQkFBaUI7a0dBQWpCLGlCQUFpQixrUENUOUIsZzRDQTZCQTs7MkZEcEJhLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDSSxlQUFlOzhCQUtoQixRQUFRO3NCQUFoQixLQUFLO2dCQUNHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFDRyxtQkFBbUI7c0JBQTNCLEtBQUs7Z0JBQ0ksTUFBTTtzQkFBZixNQUFNO2dCQUNHLGdCQUFnQjtzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IExhbmd1YWdlQ29kZSB9IGZyb20gJy4uLy4uL2NvbW1vbi9nZW5lcmF0ZWQtdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3Zkci11c2VyLW1lbnUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi91c2VyLW1lbnUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3VzZXItbWVudS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBVc2VyTWVudUNvbXBvbmVudCB7XG4gICAgQElucHV0KCkgdXNlck5hbWUgPSAnJztcbiAgICBASW5wdXQoKSBhdmFpbGFibGVMYW5ndWFnZXM6IExhbmd1YWdlQ29kZVtdID0gW107XG4gICAgQElucHV0KCkgdWlMYW5ndWFnZUFuZExvY2FsZTogW0xhbmd1YWdlQ29kZSwgc3RyaW5nIHwgdW5kZWZpbmVkXTtcbiAgICBAT3V0cHV0KCkgbG9nT3V0ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBPdXRwdXQoKSBzZWxlY3RVaUxhbmd1YWdlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xufVxuIiwiPHZkci1kcm9wZG93bj5cbiAgICA8YnV0dG9uIGNsYXNzPVwidHJpZ2dlciB1c2VyLW1lbnUtYnRuXCIgdmRyRHJvcGRvd25UcmlnZ2VyPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidXNlci1jaXJjbGVcIj5cbiAgICAgICAgICAgIDxjbHItaWNvbiBzaGFwZT1cInVzZXJcIiBzaXplPVwiMTZcIj48L2Nsci1pY29uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ1c2VyLW5hbWVcIj57eyB1c2VyTmFtZSB9fTwvc3Bhbj5cbiAgICAgICAgPGNsci1pY29uIGNsYXNzPVwibWQ6aGlkZGVuXCIgc2hhcGU9XCJjYXJldCBkb3duXCI+PC9jbHItaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgICA8dmRyLWRyb3Bkb3duLW1lbnUgdmRyUG9zaXRpb249XCJib3R0b20tcmlnaHRcIj5cbiAgICAgICAgPGEgW3JvdXRlckxpbmtdPVwiWycvc2V0dGluZ3MnLCAncHJvZmlsZSddXCIgdmRyRHJvcGRvd25JdGVtIHRhYmluZGV4PVwiMFwiPlxuICAgICAgICAgICAgPGNsci1pY29uIHNoYXBlPVwidXNlclwiIGNsYXNzPVwiaXMtc29saWRcIj48L2Nsci1pY29uPiB7eyAnc2V0dGluZ3MucHJvZmlsZScgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgPC9hPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiMSA8IGF2YWlsYWJsZUxhbmd1YWdlcy5sZW5ndGhcIj5cbiAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICB2ZHJEcm9wZG93bkl0ZW1cbiAgICAgICAgICAgICAgICAoY2xpY2spPVwic2VsZWN0VWlMYW5ndWFnZS5lbWl0KClcIlxuICAgICAgICAgICAgICAgIFt0aXRsZV09XCInY29tbW9uLnNlbGVjdC1kaXNwbGF5LWxhbmd1YWdlJyB8IHRyYW5zbGF0ZVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGNsci1pY29uIHNoYXBlPVwibGFuZ3VhZ2VcIj48L2Nsci1pY29uPiB7eyB1aUxhbmd1YWdlQW5kTG9jYWxlPy5bMF0gfCBsb2NhbGVMYW5ndWFnZU5hbWUgfX1cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPHZkci10aGVtZS1zd2l0Y2hlciB2ZHJEcm9wZG93bkl0ZW0gdGFiaW5kZXg9XCIwXCI+PC92ZHItdGhlbWUtc3dpdGNoZXI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1kaXZpZGVyXCI+PC9kaXY+XG4gICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIHZkckRyb3Bkb3duSXRlbSAoY2xpY2spPVwibG9nT3V0LmVtaXQoKVwiPlxuICAgICAgICAgICAgPGNsci1pY29uIHNoYXBlPVwibG9nb3V0XCI+PC9jbHItaWNvbj4ge3sgJ2NvbW1vbi5sb2ctb3V0JyB8IHRyYW5zbGF0ZSB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L3Zkci1kcm9wZG93bi1tZW51PlxuPC92ZHItZHJvcGRvd24+XG4iXX0=