@open-rlb/ng-app 3.1.122 → 3.1.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-rlb/ng-app",
-  "version": "3.1.122",
+  "version": "3.1.123",
   "peerDependencies": {
     "@angular/common": ">=21.0.0 <22.0.0",
     "@angular/core": ">=21.0.0 <22.0.0",

package/schematics/ng-add/claude-skills/rlb-app-shell/SKILL.md

@@ -17,9 +17,12 @@ The shell renders the full app chrome (navbar, sidebar, modal/toast containers,
     <rlb-app-container
       modal-container-id="modal-c-1"
       toast-container-ids="toast-c-1"
-    />`,
+    />
+  `,
 })
-export class AppComponent { /* dispatch config in constructor */ }
+export class AppComponent {
+  /* dispatch config in constructor */
+}
 ```
 
 `RlbAppModule` aggregates the library's standalone components/directives/pipes; import it wherever you use shell elements (`rlb-app-container`, `rlb-navbar-item`, the `*roles` directive, etc.).
@@ -34,16 +37,23 @@ this.store.dispatch(NavbarActions.setSettingsVisible({ visible: true }));
 this.store.dispatch(NavbarActions.setAppsVisible({ visible: true }));
 
 this.store.dispatch(SidebarActions.setAppsVisible({ visible: true }));
-this.store.dispatch(SidebarActions.setItems({
-  items: [
-    { title: 'Menu' },                                   // section header
-    { label: 'Home', url: '/', icon: 'bi bi-house' },
-    { label: 'Profile', url: '/profile', icon: 'bi bi-person', badgeCounter: 3 },
-    { label: 'Links', icon: 'bi bi-link', items: [       // nested
-      { label: 'GitHub', icon: 'bi bi-github', externalUrl: 'https://github.com' },
-    ]},
-  ],
-}));
+this.store.dispatch(
+  SidebarActions.setItems({
+    items: [
+      { title: 'Menu' }, // section header
+      { label: 'Home', url: '/', icon: 'bi bi-house' },
+      { label: 'Profile', url: '/profile', icon: 'bi bi-person', badgeCounter: 3 },
+      {
+        label: 'Links',
+        icon: 'bi bi-link',
+        items: [
+          // nested
+          { label: 'GitHub', icon: 'bi bi-github', externalUrl: 'https://github.com' },
+        ],
+      },
+    ],
+  }),
+);
 
 this.store.dispatch(AppContextActions.setSupportedLanguages({ supportedLanguages: ['en', 'it'] }));
 ```
@@ -58,12 +68,45 @@ Override navbar slots by providing `RLB_APP_NAVCOMP` (via `appDescriber.provider
 {
   provide: RLB_APP_NAVCOMP,
   useValue: {
-    left:  [{ component: MyNavItemComponent, name: 'my-item' }],
-    right: [{ component: MyNavItemComponent, name: 'my-item' }],
+    left:   [{ component: MyNavItemComponent, name: 'my-item' }],
+    right:  [{ component: MyNavItemComponent, name: 'my-item' }],
+    mobile: [{ component: MyMobileMenuComponent, name: 'my-mobile-menu' }], // optional
   },
 }
 ```
 
+Registering a component is not enough — activate it from the store:
+
+```typescript
+this.store.dispatch(NavbarActions.setLeftItems({ items: ['my-item'] }));
+this.store.dispatch(NavbarActions.setRightItems({ items: ['my-item'] }));
+this.store.dispatch(NavbarActions.setMobileItems({ items: ['my-mobile-menu'] }));
+```
+
 Icons are Bootstrap Icons (`bi bi-*`), available because the shell registers `bootstrap-icons.css`.
 
+### The mobile surface
+
+Below the `lg` breakpoint the navbar collapse is not reachable, so `left`/`right` components are
+**not rendered**. That breakpoint has its own surface: an offcanvas "Menu" panel, filled from
+`mobileItems` (resolved against the `mobile` slot, falling back to `right` when `mobile` is
+omitted).
+
+Alongside the app's own components the panel renders core content — the apps grid
+(`setAppsVisible`) and the settings/account carousel (`setSettingsVisible`). Both honour the same
+flags as the desktop navbar, so `setSettingsVisible({ visible: false })` removes the core account,
+status and cookies tiles on mobile too. When nothing at all would render, the toggler is hidden
+rather than opening an empty panel — an app that suppresses the core content should register
+`mobileItems`, otherwise mobile users get no menu button.
+
+To serve both surfaces from one component, register the same name in `right` and `mobile` and
+branch on the surface the shell provides:
+
+```typescript
+private readonly surface = inject(RLB_NAV_SURFACE, { optional: true }); // 'navbar' | 'mobile-menu' | null
+```
+
+Keep it `{ optional: true }` — the token is absent anywhere the component is used outside the
+shell outlets.
+
 Related: [[rlb-app-config]], [[rlb-app-apps]], [[rlb-app-store]], [[rlb-app-auth-acl]].

package/types/open-rlb-ng-app.d.ts

@@ -192,6 +192,12 @@ interface Navbar {
     searchText: string | null;
     leftItems: string[];
     rightItems: string[];
+    /**
+     * Named components rendered in the mobile menu (offcanvas below `lg`), resolved against
+     * `NavbarComponents.mobile ?? NavbarComponents.right`. Empty means the mobile menu shows
+     * only core content.
+     */
+    mobileItems: string[];
     loginVisible: boolean;
     settingsVisible: boolean;
     appsVisible: boolean;
@@ -381,6 +387,11 @@ declare const NavbarActions: {
     }) => {
         items: string[];
     } & _ngrx_store.Action<"[Navbar/API] SetRightItems">>;
+    setMobileItems: _ngrx_store.ActionCreator<"[Navbar/API] SetMobileItems", (props: {
+        items: string[];
+    }) => {
+        items: string[];
+    } & _ngrx_store.Action<"[Navbar/API] SetMobileItems">>;
     setLoginVisible: _ngrx_store.ActionCreator<"[Navbar/API] SetLoginVisible", (props: {
         visible: boolean;
     }) => {
@@ -706,6 +717,14 @@ declare const RLB_CFG_AUTH: InjectionToken<AuthConfiguration>;
 declare const RLB_APP_NAVCOMP: InjectionToken<NavbarComponents>;
 declare const RLB_APP_SIDEBARCOMP: InjectionToken<SidebarComponents>;
 declare const RLB_CFG_ACL: InjectionToken<AclConfiguration>;
+/**
+ * Which chrome surface a custom navbar component is currently rendered in.
+ * Provided by the shell around each component outlet. Inject it with
+ * `{ optional: true }` — components registered before this token existed
+ * simply don't see it.
+ */
+type NavSurface = 'navbar' | 'mobile-menu';
+declare const RLB_NAV_SURFACE: InjectionToken<NavSurface>;
 type AuthUrlHandler = (url: string) => void | Promise<void>;
 declare const RLB_AUTH_URL_HANDLER: InjectionToken<AuthUrlHandler>;
 interface InterceptorMapping {
@@ -726,15 +745,20 @@ interface ProviderConfiguration extends OpenIdConfiguration {
     roleClaim?: (data: any) => string | string[];
     acl?: ProviderAclConfiguration;
 }
+interface NavbarComponent {
+    component: Type<any>;
+    name: string;
+}
 interface NavbarComponents {
-    left: {
-        component: Type<any>;
-        name: string;
-    }[];
-    right: {
-        component: Type<any>;
-        name: string;
-    }[];
+    left: NavbarComponent[];
+    right: NavbarComponent[];
+    /**
+     * Components available to the mobile menu (offcanvas below the `lg` breakpoint),
+     * activated with `NavbarActions.setMobileItems`. Falls back to `right` when omitted,
+     * so an app can register one component for both surfaces and branch on
+     * {@link RLB_NAV_SURFACE}.
+     */
+    mobile?: NavbarComponent[];
 }
 interface SidebarComponents {
     footer: {
@@ -1109,6 +1133,13 @@ declare class LeftComponentPipe implements PipeTransform {
     static ɵpipe: i0.ɵɵPipeDeclaration<LeftComponentPipe, "leftComponent", true>;
 }
 
+declare class MobileComponentPipe implements PipeTransform {
+    private config;
+    transform(value: string): Type<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MobileComponentPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MobileComponentPipe, "mobileComponent", true>;
+}
+
 declare class RightComponentPipe implements PipeTransform {
     private config;
     transform(value: string): Type<any>;
@@ -1204,6 +1235,9 @@ declare class AppTemplateComponent {
     readonly appsService: AppsService;
     private readonly authService;
     private readonly router;
+    private readonly injector;
+    readonly navbarSurfaceInjector: i0.DestroyableInjector;
+    readonly mobileSurfaceInjector: i0.DestroyableInjector;
     readonly sidebarVisible: i0.Signal<boolean>;
     readonly sidearHasLogin: i0.Signal<boolean>;
     readonly sidearHasSearch: i0.Signal<boolean>;
@@ -1216,6 +1250,7 @@ declare class AppTemplateComponent {
     readonly navHeader: i0.Signal<_open_rlb_ng_app.NavbarHeader | null>;
     readonly navLeftItems: i0.Signal<string[]>;
     readonly navRightItems: i0.Signal<string[]>;
+    readonly navMobileItems: i0.Signal<string[]>;
     readonly navbarHasLogin: i0.Signal<boolean>;
     readonly navbarHasSettings: i0.Signal<boolean>;
     readonly navbarHasApps: i0.Signal<any>;
@@ -1225,6 +1260,8 @@ declare class AppTemplateComponent {
     readonly userInfo: i0.Signal<any>;
     readonly theme: i0.Signal<any>;
     readonly apps: i0.Signal<any>;
+    /** Mirrors the mobile offcanvas body: false means the panel would render empty. */
+    readonly mobileMenuHasContent: i0.Signal<any>;
     constructor();
     loginNav(event: MouseEvent): void;
     onSideBarItemClick(item: SidebarNavigableItem): void;
@@ -1344,7 +1381,7 @@ declare class AppDropdownSelectorComponent {
 
 declare class RlbAppModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RlbAppModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RlbAppModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof i3.TranslateModule, typeof _open_rlb_ng_bootstrap.RlbBootstrapModule, typeof i5.RouterModule, typeof CmsContentComponent, typeof CookiesComponent, typeof NotFoundComponent, typeof PrivacyComponent, typeof SupportComponent, typeof TermsAndConditionsComponent, typeof ForbiddenComponent, typeof CmsPipe, typeof AsMultiPipe, typeof AsSinglePipe, typeof LeftComponentPipe, typeof RightComponentPipe, typeof TruncatePipe, typeof AutolinkPipe, typeof BaseComponent, typeof CmsComponent, typeof ContentComponent, typeof AppTemplateComponent, typeof AppContainerComponent, typeof SettingsDropdownSelectorComponent, typeof AppDropdownSelectorComponent, typeof RlbRole], [typeof CmsPipe, typeof AsMultiPipe, typeof AsSinglePipe, typeof LeftComponentPipe, typeof RightComponentPipe, typeof TruncatePipe, typeof AutolinkPipe, typeof BaseComponent, typeof CmsComponent, typeof ContentComponent, typeof AppTemplateComponent, typeof AppContainerComponent, typeof i3.TranslateModule, typeof _open_rlb_ng_bootstrap.RlbBootstrapModule, typeof i5.RouterModule, typeof i2.FormsModule, typeof RlbRole]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RlbAppModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof i3.TranslateModule, typeof _open_rlb_ng_bootstrap.RlbBootstrapModule, typeof i5.RouterModule, typeof CmsContentComponent, typeof CookiesComponent, typeof NotFoundComponent, typeof PrivacyComponent, typeof SupportComponent, typeof TermsAndConditionsComponent, typeof ForbiddenComponent, typeof CmsPipe, typeof AsMultiPipe, typeof AsSinglePipe, typeof LeftComponentPipe, typeof MobileComponentPipe, typeof RightComponentPipe, typeof TruncatePipe, typeof AutolinkPipe, typeof BaseComponent, typeof CmsComponent, typeof ContentComponent, typeof AppTemplateComponent, typeof AppContainerComponent, typeof SettingsDropdownSelectorComponent, typeof AppDropdownSelectorComponent, typeof RlbRole], [typeof CmsPipe, typeof AsMultiPipe, typeof AsSinglePipe, typeof LeftComponentPipe, typeof MobileComponentPipe, typeof RightComponentPipe, typeof TruncatePipe, typeof AutolinkPipe, typeof BaseComponent, typeof CmsComponent, typeof ContentComponent, typeof AppTemplateComponent, typeof AppContainerComponent, typeof i3.TranslateModule, typeof _open_rlb_ng_bootstrap.RlbBootstrapModule, typeof i5.RouterModule, typeof i2.FormsModule, typeof RlbRole]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<RlbAppModule>;
 }
 
@@ -1353,5 +1390,5 @@ declare function provideRlbConfig<T = {
 }>(env: ProjectConfiguration<T>): (EnvironmentProviders | Provider)[];
 declare function provideApp(app: AppDescriber): (EnvironmentProviders | Provider)[];
 
-export { AbstractMdService, AbstractSupportService, AclStore, AppBreadcrumbService, AppContainerComponent, AppContextActions, AppContextActionsInternal, AppLoggerService, AppStorageService, AppTemplateComponent, AppsService, AsMultiPipe, AsSinglePipe, AuthActions, AuthActionsInternal, AuthFeatureService, AuthenticationService, AutolinkPipe, BaseComponent, CmsComponent, CmsPipe, ContentComponent, CookiesService, ErrorManagementService, ErrorModalComponent, KeycloakProfileService, LanguageService, LeftComponentPipe, LocalCacheService, ModalAppsComponent, NavbarActions, NavbarActionsInternal, OauthPasswordService, ParseJwtService, PwaUpdaterService, RLB_APPS, RLB_APP_NAVCOMP, RLB_APP_SIDEBARCOMP, RLB_AUTH_URL_HANDLER, RLB_CFG, RLB_CFG_ACL, RLB_CFG_AUTH, RLB_CFG_CMS, RLB_CFG_ENV, RLB_CFG_I18N, RLB_CFG_PAGES, RLB_INIT_PROVIDER, RightComponentPipe, RlbAppModule, RlbRole, SidebarActions, SidebarActionsInternal, SidebarFooterComponentPipe, StrapiService, ToastComponent, TokenOauthInterceptor, TranslateBrowserLoader, TruncatePipe, UtilsService, aclFeatureKey, appContextFeatureKey, authsFeatureKey, getDefaultRoutes, initialAclState, initialAppContextState, initialAuthState, initialNavbarState, initialSidebarState, navbarsFeatureKey, oauthGuard, oauthPasswordGuard, permissionGuard, provideApp, provideRlbCodeBrowserOAuth, provideRlbConfig, provideRlbI18n, sidebarsFeatureKey, translateBrowserLoaderFactory, verifyDeactivate };
-export type { Acl, AclConfiguration, AclState, AppContext, AppDescriber, AppDetails, AppInfo, AppInfoData, AppState, AppTheme, AppViewMode, Auth, AuthConfiguration, AuthState, AuthUrlHandler, BaseState, CacheItem, CmsConfiguration, Endpoint, EnvironmentConfiguration, ErrorOutput, Faq, FaqGroup, Home, IConfiguration, InterceptorMapping, InternationalizationConfiguration, JwtUser, KeycloakClient, KeycloakCredential, KeycloakDevice, KeycloakSession, KeycloakUser, KeycloakUserCredentialMetadata, LogLevel, LoggerContext, MenuItem, Navbar, NavbarActionsLayout, NavbarComponents, NavbarHeader, NavbarState, Page, PageTemplate, PagesConfiguration, ProjectConfiguration, ProviderAclConfiguration, ProviderConfiguration, Resource, RlbInitProvider, Sidebar, SidebarComponents, SidebarState, Step, Tab, Token, Topic, UserClaims, UserResource, VerifyDeactivate, _KeycloakCredential };
+export { AbstractMdService, AbstractSupportService, AclStore, AppBreadcrumbService, AppContainerComponent, AppContextActions, AppContextActionsInternal, AppLoggerService, AppStorageService, AppTemplateComponent, AppsService, AsMultiPipe, AsSinglePipe, AuthActions, AuthActionsInternal, AuthFeatureService, AuthenticationService, AutolinkPipe, BaseComponent, CmsComponent, CmsPipe, ContentComponent, CookiesService, ErrorManagementService, ErrorModalComponent, KeycloakProfileService, LanguageService, LeftComponentPipe, LocalCacheService, MobileComponentPipe, ModalAppsComponent, NavbarActions, NavbarActionsInternal, OauthPasswordService, ParseJwtService, PwaUpdaterService, RLB_APPS, RLB_APP_NAVCOMP, RLB_APP_SIDEBARCOMP, RLB_AUTH_URL_HANDLER, RLB_CFG, RLB_CFG_ACL, RLB_CFG_AUTH, RLB_CFG_CMS, RLB_CFG_ENV, RLB_CFG_I18N, RLB_CFG_PAGES, RLB_INIT_PROVIDER, RLB_NAV_SURFACE, RightComponentPipe, RlbAppModule, RlbRole, SidebarActions, SidebarActionsInternal, SidebarFooterComponentPipe, StrapiService, ToastComponent, TokenOauthInterceptor, TranslateBrowserLoader, TruncatePipe, UtilsService, aclFeatureKey, appContextFeatureKey, authsFeatureKey, getDefaultRoutes, initialAclState, initialAppContextState, initialAuthState, initialNavbarState, initialSidebarState, navbarsFeatureKey, oauthGuard, oauthPasswordGuard, permissionGuard, provideApp, provideRlbCodeBrowserOAuth, provideRlbConfig, provideRlbI18n, sidebarsFeatureKey, translateBrowserLoaderFactory, verifyDeactivate };
+export type { Acl, AclConfiguration, AclState, AppContext, AppDescriber, AppDetails, AppInfo, AppInfoData, AppState, AppTheme, AppViewMode, Auth, AuthConfiguration, AuthState, AuthUrlHandler, BaseState, CacheItem, CmsConfiguration, Endpoint, EnvironmentConfiguration, ErrorOutput, Faq, FaqGroup, Home, IConfiguration, InterceptorMapping, InternationalizationConfiguration, JwtUser, KeycloakClient, KeycloakCredential, KeycloakDevice, KeycloakSession, KeycloakUser, KeycloakUserCredentialMetadata, LogLevel, LoggerContext, MenuItem, NavSurface, Navbar, NavbarActionsLayout, NavbarComponent, NavbarComponents, NavbarHeader, NavbarState, Page, PageTemplate, PagesConfiguration, ProjectConfiguration, ProviderAclConfiguration, ProviderConfiguration, Resource, RlbInitProvider, Sidebar, SidebarComponents, SidebarState, Step, Tab, Token, Topic, UserClaims, UserResource, VerifyDeactivate, _KeycloakCredential };