@testgorilla/tgo-ui 10.5.0 → 11.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "10.5.0",
+  "version": "11.0.0",
   "license": "proprietary-license",
   "lint-staged": {
     "{projects,components}/**/*.ts": [

package/types/testgorilla-tgo-ui-components-navbar.d.ts

@@ -1,7 +1,6 @@
 import * as rxjs from 'rxjs';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import * as i0 from '@angular/core';
-import { InputSignal, TemplateRef, EventEmitter, Signal, DestroyRef } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
 import * as i10 from '@testgorilla/tgo-ui/components/avatar';
 import { AvatarSize } from '@testgorilla/tgo-ui/components/avatar';
 import * as i9 from '@testgorilla/tgo-ui/components/core';
@@ -9,8 +8,6 @@ import { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
 export { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
 import * as i7 from '@testgorilla/tgo-ui/components/logo';
 import { LogoTypeEnum } from '@testgorilla/tgo-ui/components/logo';
-import * as i11 from '@testgorilla/tgo-ui/components/side-sheet';
-import { SideSheetService } from '@testgorilla/tgo-ui/components/side-sheet';
 import * as i14 from '@testgorilla/tgo-ui/components/badge';
 import { RebrandBadgeColor, BadgeVariant } from '@testgorilla/tgo-ui/components/badge';
 import * as i8 from '@testgorilla/tgo-ui/components/icon';
@@ -21,6 +18,7 @@ import * as i3 from '@angular/material/icon';
 import * as i4 from '@angular/material/button';
 import * as i5 from '@angular/material/core';
 import * as i6 from '@angular/material/menu';
+import * as i11 from '@testgorilla/tgo-ui/components/side-sheet';
 import * as i12 from '@testgorilla/tgo-ui/components/button';
 
 interface IRoute {
@@ -47,158 +45,170 @@ type ScreenSize = 'mobile' | 'tablet' | 'desktop';
 
 declare class NavbarComponent {
     private readonly breakpointObserver;
-    private readonly defaultAppTheme;
     private readonly sideSheetService;
-    private readonly destroyRef;
+    private readonly translatePipe;
+    private readonly defaultAppTheme;
     /**
      * Routes object
      *
-     * @type {IRoute}
      * @memberof NavbarComponent
      * @ignore
      */
-    routes: IRoute[];
+    readonly routes: _angular_core.InputSignal<IRoute[]>;
     /**
      * Actived route id
      *
-     * @type {InputSignal<string>}
      * @memberof NavbarComponent
      */
-    activedRoute: InputSignal<string>;
+    readonly activedRoute: _angular_core.InputSignal<string>;
     /**
      * User first name and last name
      *
-     * @type {string}
      * @memberof NavbarComponent
      */
-    userName: string;
+    readonly userName: _angular_core.InputSignal<string>;
     /**
      * User email
      *
-     * @type {string}
      * @memberof NavbarComponent
      */
-    email: string;
+    readonly email: _angular_core.InputSignal<string>;
     /**
      * Menu items to show in menu above the Log out button
      *
-     * @type {string}
      * @memberof NavbarComponent
      */
-    menuItems: MenuItem[];
+    readonly menuItems: _angular_core.InputSignal<MenuItem[]>;
     /**
-     *
      * Defines the application theme
      *
-     * @type {ApplicationTheme}
      * @memberof NavbarComponent
      */
-    applicationTheme: ApplicationTheme;
+    readonly applicationTheme: _angular_core.InputSignal<ApplicationTheme>;
     /**
+     * It's ng-content for the collapsed (drawer) version
      *
-     * It's ng-content for mobile version
-     *
-     * @type {ApplicationTheme}
      * @memberof NavbarComponent
      */
-    contentTemplateRef: TemplateRef<unknown>;
+    readonly contentTemplateRef: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     /**
      * Additional info template reference for the extra user info in the dropdown/sidesheet
-     * @type {TemplateRef<unknown>}
+     *
      * @memberof NavbarComponent
      */
-    userInfoExtraTemplateRef: TemplateRef<unknown>;
+    readonly userInfoExtraTemplateRef: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     /**
      * Custom content template reference for the menu section between user info and menu items.
      * Use this to add custom components like credits display.
-     * @type {TemplateRef<unknown>}
+     *
      * @memberof NavbarComponent
      */
-    menuContentTemplateRef: TemplateRef<unknown>;
+    readonly menuContentTemplateRef: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     /**
-     * Mobile breakpoint
-     * @type {number}
+     * Width at or below which the navbar renders its compact (brandmark) logo
+     *
      * @memberof NavbarComponent
      */
-    set mobileBreakpoint(value: number);
+    readonly mobileBreakpoint: _angular_core.InputSignalWithTransform<number, number>;
     /**
+     * Width at or below which the horizontal navigation and the profile menu collapse
+     * into the hamburger-triggered drawer
      *
+     * @memberof NavbarComponent
+     */
+    readonly collapseBreakpoint: _angular_core.InputSignalWithTransform<number, number>;
+    /**
      * Show avatar with user initials
      *
-     * @type {boolean}
      * @memberof NavbarComponent
      */
-    isAvatar: boolean;
+    readonly isAvatar: _angular_core.InputSignal<boolean>;
     /**
      * Sets class for the menu
      *
-     * @type {string}
      * @memberof NavbarComponent
      */
-    menuClass: string;
+    readonly menuClass: _angular_core.InputSignal<string>;
     /**
      * @ignore
      */
-    navigateEvent: EventEmitter<string>;
+    readonly navigateEvent: _angular_core.OutputEmitterRef<string>;
     /**
      * @ignore
      */
-    menuItemClicked: EventEmitter<string>;
+    readonly menuItemClicked: _angular_core.OutputEmitterRef<string>;
     /**
      * @ignore
      */
-    logoutEvent: EventEmitter<void>;
-    menuState: EventEmitter<MenuState>;
-    protected screenSize: ScreenSize;
-    protected readonly translationContext = "NAVBAR.";
-    private readonly _mobileBreakpoint$;
-    private readonly _tabletBreakpoint$;
-    private readonly mobileBreakpointObs$;
-    private readonly tabletBreakpointObs$;
+    readonly logoutEvent: _angular_core.OutputEmitterRef<void>;
+    readonly menuState: _angular_core.OutputEmitterRef<MenuState>;
+    protected readonly isMobile: Signal<boolean>;
+    protected readonly isCollapsed: Signal<boolean>;
+    protected readonly screenSize: Signal<ScreenSize>;
+    /**
+     * @deprecated Use the `screenSize` reported by `menuState` instead. Removed in the next major.
+     */
     protected readonly isMobile$: rxjs.Observable<boolean>;
+    /**
+     * @deprecated Use the `screenSize` reported by `menuState` instead. Removed in the next major.
+     */
     protected readonly isTablet$: rxjs.Observable<boolean>;
-    protected isOpened: boolean;
-    protected logoType: typeof LogoTypeEnum;
-    activeRoutesMap: Signal<Map<string, boolean>>;
-    constructor(breakpointObserver: BreakpointObserver, defaultAppTheme: ApplicationTheme, sideSheetService: SideSheetService, destroyRef: DestroyRef);
+    protected readonly translationContext = "NAVBAR.";
+    protected readonly logoType: typeof LogoTypeEnum;
+    protected readonly AvatarSize: typeof AvatarSize;
+    readonly activeRoutesMap: Signal<Map<string, boolean>>;
+    /**
+     * Output subscriptions of the currently open drawer. Torn down when it closes, so repeated
+     * opens don't accumulate one set per open.
+     */
+    private drawerSubscriptions;
+    private readonly isDrawerOpened;
+    private readonly closeDrawerOnExpand;
     openMobileMenu(): void;
+    /**
+     * Closes the drawer if the navbar is currently collapsed. Consumers use this to dismiss the
+     * menu on navigation without reaching into the component's internals.
+     */
+    closeMenu(): void;
     navigate(routeId: string): void;
     logout(): void;
     clickMenuItem(id: string): void;
     onChangeMenuState(isOpened: boolean, screenSize: ScreenSize): void;
-    protected readonly AvatarSize: typeof AvatarSize;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponent, [null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "ui-navbar", never, { "routes": { "alias": "routes"; "required": false; }; "activedRoute": { "alias": "activedRoute"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; }; "email": { "alias": "email"; "required": false; }; "menuItems": { "alias": "menuItems"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "contentTemplateRef": { "alias": "contentTemplateRef"; "required": false; }; "userInfoExtraTemplateRef": { "alias": "userInfoExtraTemplateRef"; "required": false; }; "menuContentTemplateRef": { "alias": "menuContentTemplateRef"; "required": false; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; }; "isAvatar": { "alias": "isAvatar"; "required": false; }; "menuClass": { "alias": "menuClass"; "required": false; }; }, { "navigateEvent": "navigateEvent"; "menuItemClicked": "menuItemClicked"; "logoutEvent": "logoutEvent"; "menuState": "menuState"; }, never, ["[actions]", "*"], true, never>;
+    protected onSideSheetOpenChange(isOpened: boolean): void;
+    private teardownDrawerSubscriptions;
+    private observeMaxWidth;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavbarComponent, "ui-navbar", never, { "routes": { "alias": "routes"; "required": false; "isSignal": true; }; "activedRoute": { "alias": "activedRoute"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; "contentTemplateRef": { "alias": "contentTemplateRef"; "required": false; "isSignal": true; }; "userInfoExtraTemplateRef": { "alias": "userInfoExtraTemplateRef"; "required": false; "isSignal": true; }; "menuContentTemplateRef": { "alias": "menuContentTemplateRef"; "required": false; "isSignal": true; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "collapseBreakpoint": { "alias": "collapseBreakpoint"; "required": false; "isSignal": true; }; "isAvatar": { "alias": "isAvatar"; "required": false; "isSignal": true; }; "menuClass": { "alias": "menuClass"; "required": false; "isSignal": true; }; }, { "navigateEvent": "navigateEvent"; "menuItemClicked": "menuItemClicked"; "logoutEvent": "logoutEvent"; "menuState": "menuState"; }, never, ["[actions]", "*"], true, never>;
 }
 
 declare class MobileNavbarSideSheetComponent {
-    routes: IRoute[];
-    activedRoute: InputSignal<string>;
-    email: string;
-    userName: string;
-    menuItems: MenuItem[];
-    contentTemplateRef: TemplateRef<unknown>;
-    userInfoExtraTemplateRef: TemplateRef<unknown>;
-    menuContentTemplateRef: TemplateRef<unknown>;
-    isDesktop: boolean;
-    applicationTheme: ApplicationTheme;
-    navigateEvent: EventEmitter<string>;
-    menuItemClicked: EventEmitter<string>;
-    logoutEvent: EventEmitter<void>;
+    readonly routes: _angular_core.InputSignal<IRoute[]>;
+    readonly activedRoute: _angular_core.InputSignal<string>;
+    readonly email: _angular_core.InputSignal<string>;
+    readonly userName: _angular_core.InputSignal<string>;
+    readonly menuItems: _angular_core.InputSignal<MenuItem[]>;
+    readonly contentTemplateRef: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    readonly userInfoExtraTemplateRef: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    readonly menuContentTemplateRef: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    readonly isDesktop: _angular_core.InputSignal<boolean>;
+    readonly applicationTheme: _angular_core.InputSignal<ApplicationTheme>;
+    readonly navigateEvent: _angular_core.OutputEmitterRef<string>;
+    readonly menuItemClicked: _angular_core.OutputEmitterRef<string>;
+    readonly logoutEvent: _angular_core.OutputEmitterRef<void>;
     protected readonly translationContext = "NAVBAR.";
-    protected avatarSize: typeof AvatarSize;
-    activeRoutesMap: Signal<Map<string, boolean>>;
+    protected readonly avatarSize: typeof AvatarSize;
+    readonly activeRoutesMap: Signal<Map<string, boolean>>;
     navigate(routeId: string): void;
     logout(): void;
     clickMenuItem(id: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MobileNavbarSideSheetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MobileNavbarSideSheetComponent, "ui-mobile-navbar-side-sheet", never, { "routes": { "alias": "routes"; "required": false; }; "activedRoute": { "alias": "activedRoute"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "menuItems": { "alias": "menuItems"; "required": false; }; "contentTemplateRef": { "alias": "contentTemplateRef"; "required": false; }; "userInfoExtraTemplateRef": { "alias": "userInfoExtraTemplateRef"; "required": false; }; "menuContentTemplateRef": { "alias": "menuContentTemplateRef"; "required": false; }; "isDesktop": { "alias": "isDesktop"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "navigateEvent": "navigateEvent"; "menuItemClicked": "menuItemClicked"; "logoutEvent": "logoutEvent"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileNavbarSideSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileNavbarSideSheetComponent, "ui-mobile-navbar-side-sheet", never, { "routes": { "alias": "routes"; "required": false; "isSignal": true; }; "activedRoute": { "alias": "activedRoute"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "contentTemplateRef": { "alias": "contentTemplateRef"; "required": false; "isSignal": true; }; "userInfoExtraTemplateRef": { "alias": "userInfoExtraTemplateRef"; "required": false; "isSignal": true; }; "menuContentTemplateRef": { "alias": "menuContentTemplateRef"; "required": false; "isSignal": true; }; "isDesktop": { "alias": "isDesktop"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; }, { "navigateEvent": "navigateEvent"; "menuItemClicked": "menuItemClicked"; "logoutEvent": "logoutEvent"; }, never, never, true, never>;
 }
 
 declare class NavbarComponentModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NavbarComponentModule, never, [typeof i1.CommonModule, typeof i2.MatToolbarModule, typeof i3.MatIconModule, typeof i4.MatButtonModule, typeof i5.MatRippleModule, typeof i6.MatMenuModule, typeof i7.LogoComponentModule, typeof i8.IconComponentModule, typeof i9.UiTranslatePipe, typeof i10.AvatarComponentModule, typeof i11.SideSheetComponentModule, typeof i12.ButtonComponentModule, typeof MobileNavbarSideSheetComponent, typeof i14.BadgeComponentModule, typeof NavbarComponent], [typeof NavbarComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NavbarComponentModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavbarComponentModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NavbarComponentModule, never, [typeof i1.CommonModule, typeof i2.MatToolbarModule, typeof i3.MatIconModule, typeof i4.MatButtonModule, typeof i5.MatRippleModule, typeof i6.MatMenuModule, typeof i7.LogoComponentModule, typeof i8.IconComponentModule, typeof i9.UiTranslatePipe, typeof i10.AvatarComponentModule, typeof i11.SideSheetComponentModule, typeof i12.ButtonComponentModule, typeof MobileNavbarSideSheetComponent, typeof i14.BadgeComponentModule, typeof NavbarComponent], [typeof NavbarComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NavbarComponentModule>;
 }
 
 export { MobileNavbarSideSheetComponent, NavbarComponent, NavbarComponentModule };

package/types/testgorilla-tgo-ui-components-side-sheet.d.ts

@@ -15,6 +15,12 @@ import * as i7 from '@testgorilla/tgo-ui/components/logo';
 interface SideSheetConfig {
     /** A component class on input; replaced with its created ComponentRef by SideSheetService.open. */
     componentRef: Type<unknown> | ComponentRef<unknown>;
+    /**
+     * Initial input values for the dynamically created component, applied via `ComponentRef.setInput()`.
+     * This is the only way to feed a component whose inputs are signal inputs, since those are readonly
+     * on the instance returned by `SideSheetService.open()`.
+     */
+    inputs?: Record<string, unknown>;
     title?: string;
     showLogo?: boolean;
     showBackButton?: boolean;