@kuzntsv/uikit 0.21.32 → 0.21.34

package/fesm2022/kuzntsv-uikit.mjs

@@ -1844,45 +1844,28 @@ var DialogAction;
 })(DialogAction || (DialogAction = {}));
 
 class NavBarComponent extends BaseNavBarMenuClass {
-    loggedIn$;
-    roles$;
-    fioUser = '';
-    photoURL = '';
-    authService = inject(AuthService);
-    userService = inject(UserService);
-    avatarService = inject(AvatarService);
+    /** Видимость панели, когда loggedIn === false. */
+    visibleOnLogout = input(false, ...(ngDevMode ? [{ debugName: "visibleOnLogout" }] : []));
+    /** Видимость аватара. */
+    visibleAvatar = input(false, ...(ngDevMode ? [{ debugName: "visibleAvatar" }] : []));
+    /** Видимость кнопки "Выйти". */
+    visibleLogoutBtn = input(false, ...(ngDevMode ? [{ debugName: "visibleLogoutBtn" }] : []));
+    /** Признак, что пользователь авторизован. */
+    loggedIn = input(false, ...(ngDevMode ? [{ debugName: "loggedIn" }] : []));
+    /** ФИО пользователя. */
+    fioUser = input('', ...(ngDevMode ? [{ debugName: "fioUser" }] : []));
+    /** Всплывающая подсказка о пользователе. */
+    userTooltip = input([], ...(ngDevMode ? [{ debugName: "userTooltip" }] : []));
+    /** URL аватара */
+    avatarURL = input('', ...(ngDevMode ? [{ debugName: "avatarURL" }] : []));
+    /** Нажата кнопка "Выйти". */
+    logout = output();
     dialog = inject(MatDialog);
     constructor() {
         super();
-        this.loggedIn$ = this.authService.loggedIn$;
-        this.roles$ = this.authService.roles$;
-        this.fioUser = '';
-        const subs = this.loggedIn$.subscribe({
-            next: (value) => {
-                if (value) {
-                    if (this.userService.userData) {
-                        if (this.userService.userData.lastName && this.userService.userData.firstName) {
-                            this.fioUser = this.userService.userData.lastName + ' ' + this.userService.userData.firstName;
-                        }
-                        if (this.userService.userData.idHuman) {
-                            // Аватар сотрудника.
-                            const subs2 = this.avatarService.getAvatarById(Number(this.userService.userData.idHuman))
-                                .subscribe((image) => {
-                                if (image) {
-                                    const blob = new Blob([image], { "type": "image/jpeg" });
-                                    this.photoURL = URL.createObjectURL(blob);
-                                }
-                            });
-                            this.subscription.add(subs2);
-                        }
-                    }
-                }
-            }
-        });
-        this.subscription.add(subs);
     }
-    logout() {
-        this.authService.logout(this.router.url);
+    onLogout() {
+        this.logout.emit(this.router.url);
     }
     openDialog() {
         const dialogRef = this.dialog.open(DialogComponent, {
@@ -1897,19 +1880,18 @@ class NavBarComponent extends BaseNavBarMenuClass {
         });
         const subs = dialogRef.afterClosed().subscribe((id) => {
             if (id) {
-                this.logout();
+                this.onLogout();
             }
         });
         this.subscription.add(subs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NavBarComponent, isStandalone: true, selector: "ngx-uik-navbar", usesInheritance: true, ngImport: i0, template: "@if (loggedIn$ | async) {\r\n  <nav class=\"ngx-uik-navbar-header\">\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"flex-spacer\"></div>\r\n    \r\n    @if ((loggedIn$ | async) === false || !photoURL) {\r\n      <mat-icon [matTooltip]=\"(roles$ | async)?.join(',')||''\">account_circle</mat-icon>\r\n    }\r\n    @if ((loggedIn$ | async) && photoURL) {\r\n      <img\r\n        class=\"user-photo\"\r\n        [src]=\"photoURL | safe\"\r\n        loading=\"lazy\"\r\n        [alt]=\"fioUser\"\r\n        [matTooltip]=\"(roles$ | async)?.join(',')||''\">\r\n    }\r\n\r\n    <span class = \"user-name\" [matTooltip]=\"(roles$ | async)?.join(',') || ''\">\r\n      {{ fioUser }}\r\n    </span>\r\n\r\n    <a mat-button class=\"pm-button\" (click)=\"openDialog()\">\u0412\u044B\u0439\u0442\u0438 <mat-icon>logout</mat-icon></a>\r\n  </nav>\r\n}", styles: [".ngx-uik-navbar-header{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px}.flex-spacer{flex-grow:1}.user-name{margin-left:8px;line-height:1rem;white-space:normal}.user-photo{border-radius:50%;width:32px;height:32px;margin-right:10px}.mat-mdc-button{color:#fff!important;padding-left:16px!important;padding-right:16px!important}.mdc-button{letter-spacing:normal}\n"], dependencies: [{ kind: "component", type: MatAnchor, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SafePipe, name: "safe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NavBarComponent, isStandalone: true, selector: "ngx-uik-navbar", inputs: { visibleOnLogout: { classPropertyName: "visibleOnLogout", publicName: "visibleOnLogout", isSignal: true, isRequired: false, transformFunction: null }, visibleAvatar: { classPropertyName: "visibleAvatar", publicName: "visibleAvatar", isSignal: true, isRequired: false, transformFunction: null }, visibleLogoutBtn: { classPropertyName: "visibleLogoutBtn", publicName: "visibleLogoutBtn", isSignal: true, isRequired: false, transformFunction: null }, loggedIn: { classPropertyName: "loggedIn", publicName: "loggedIn", isSignal: true, isRequired: false, transformFunction: null }, fioUser: { classPropertyName: "fioUser", publicName: "fioUser", isSignal: true, isRequired: false, transformFunction: null }, userTooltip: { classPropertyName: "userTooltip", publicName: "userTooltip", isSignal: true, isRequired: false, transformFunction: null }, avatarURL: { classPropertyName: "avatarURL", publicName: "avatarURL", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, usesInheritance: true, ngImport: i0, template: "@if (visibleOnLogout() || loggedIn()) {\r\n  <nav class=\"ngx-uik-navbar-header\">\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"flex-spacer\"></div>\r\n    \r\n    @if (visibleAvatar() && (loggedIn() === false || !avatarURL)) {\r\n      <mat-icon [matTooltip]=\"(userTooltip())?.join(',')||''\">account_circle</mat-icon>\r\n    }\r\n    @if (visibleAvatar() && loggedIn() && avatarURL()) {\r\n      <img\r\n        class=\"user-photo\"\r\n        [src]=\"avatarURL() | safe\"\r\n        loading=\"lazy\"\r\n        [alt]=\"fioUser()\"\r\n        [matTooltip]=\"(userTooltip())?.join(',')||''\">\r\n    }\r\n\r\n    <span class = \"user-name\" [matTooltip]=\"(userTooltip())?.join(',') || ''\">\r\n      {{ fioUser() }}\r\n    </span>\r\n\r\n    @if (visibleLogoutBtn()) {\r\n      <a mat-button class=\"pm-button\" (click)=\"openDialog()\">\u0412\u044B\u0439\u0442\u0438 <mat-icon>logout</mat-icon></a>\r\n    }\r\n  </nav>\r\n}", styles: [".ngx-uik-navbar-header{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px}.flex-spacer{flex-grow:1}.user-name{margin-left:8px;line-height:1rem;white-space:normal}.user-photo{border-radius:50%;width:32px;height:32px;margin-right:10px}.mat-mdc-button{color:#fff!important;padding-left:16px!important;padding-right:16px!important}.mdc-button{letter-spacing:normal}\n"], dependencies: [{ kind: "component", type: MatAnchor, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SafePipe, name: "safe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-uik-navbar', imports: [MatAnchor, MatIcon, MatTooltip,
-                        AsyncPipe, SafePipe], template: "@if (loggedIn$ | async) {\r\n  <nav class=\"ngx-uik-navbar-header\">\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"flex-spacer\"></div>\r\n    \r\n    @if ((loggedIn$ | async) === false || !photoURL) {\r\n      <mat-icon [matTooltip]=\"(roles$ | async)?.join(',')||''\">account_circle</mat-icon>\r\n    }\r\n    @if ((loggedIn$ | async) && photoURL) {\r\n      <img\r\n        class=\"user-photo\"\r\n        [src]=\"photoURL | safe\"\r\n        loading=\"lazy\"\r\n        [alt]=\"fioUser\"\r\n        [matTooltip]=\"(roles$ | async)?.join(',')||''\">\r\n    }\r\n\r\n    <span class = \"user-name\" [matTooltip]=\"(roles$ | async)?.join(',') || ''\">\r\n      {{ fioUser }}\r\n    </span>\r\n\r\n    <a mat-button class=\"pm-button\" (click)=\"openDialog()\">\u0412\u044B\u0439\u0442\u0438 <mat-icon>logout</mat-icon></a>\r\n  </nav>\r\n}", styles: [".ngx-uik-navbar-header{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px}.flex-spacer{flex-grow:1}.user-name{margin-left:8px;line-height:1rem;white-space:normal}.user-photo{border-radius:50%;width:32px;height:32px;margin-right:10px}.mat-mdc-button{color:#fff!important;padding-left:16px!important;padding-right:16px!important}.mdc-button{letter-spacing:normal}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'ngx-uik-navbar', imports: [MatAnchor, MatIcon, MatTooltip, SafePipe], template: "@if (visibleOnLogout() || loggedIn()) {\r\n  <nav class=\"ngx-uik-navbar-header\">\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"flex-spacer\"></div>\r\n    \r\n    @if (visibleAvatar() && (loggedIn() === false || !avatarURL)) {\r\n      <mat-icon [matTooltip]=\"(userTooltip())?.join(',')||''\">account_circle</mat-icon>\r\n    }\r\n    @if (visibleAvatar() && loggedIn() && avatarURL()) {\r\n      <img\r\n        class=\"user-photo\"\r\n        [src]=\"avatarURL() | safe\"\r\n        loading=\"lazy\"\r\n        [alt]=\"fioUser()\"\r\n        [matTooltip]=\"(userTooltip())?.join(',')||''\">\r\n    }\r\n\r\n    <span class = \"user-name\" [matTooltip]=\"(userTooltip())?.join(',') || ''\">\r\n      {{ fioUser() }}\r\n    </span>\r\n\r\n    @if (visibleLogoutBtn()) {\r\n      <a mat-button class=\"pm-button\" (click)=\"openDialog()\">\u0412\u044B\u0439\u0442\u0438 <mat-icon>logout</mat-icon></a>\r\n    }\r\n  </nav>\r\n}", styles: [".ngx-uik-navbar-header{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px}.flex-spacer{flex-grow:1}.user-name{margin-left:8px;line-height:1rem;white-space:normal}.user-photo{border-radius:50%;width:32px;height:32px;margin-right:10px}.mat-mdc-button{color:#fff!important;padding-left:16px!important;padding-right:16px!important}.mdc-button{letter-spacing:normal}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visibleOnLogout: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleOnLogout", required: false }] }], visibleAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleAvatar", required: false }] }], visibleLogoutBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleLogoutBtn", required: false }] }], loggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "loggedIn", required: false }] }], fioUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "fioUser", required: false }] }], userTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "userTooltip", required: false }] }], avatarURL: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarURL", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
 
 class NotFoundComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });