@frame-kit/ui-ng-patterns 0.2.13 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-kit/ui-ng-patterns",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Opinionated, dashboard-ready Angular component patterns composed from @frame-kit/ui-ng.",
   "license": "MIT",
   "repository": {
@@ -17,7 +17,7 @@
     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
-    "@frame-kit/ui-ng": "0.2.13",
+    "@frame-kit/ui-ng": "0.2.14",
     "rxjs": "^7.0.0"
   },
   "sideEffects": false,

package/types/frame-kit-ui-ng-patterns-dashboard.d.ts

@@ -1459,6 +1459,12 @@ declare class DashboardNavComponent {
  *     <span layoutFooter>© Acme</span>
  *   </fk-dashboard-layout>
  *
+ * A dashboard that needs a trailing panel — a documentation reader, a detail
+ * inspector — projects it into `[layoutEnd]` and chooses its `endMode`. One
+ * that needs a panel beside the page, such as a secondary navigation, projects
+ * it into `[layoutContentPanel]`, which sits in the content row ahead of the
+ * scroll container so the page scrolls under it rather than with it.
+ *
  * The aside's toggle and the topbar's hamburger drive the underlying shell;
  * `collapsed` reports the rail state so projected controls can follow it.
  * The toggle glyphs are projection slots with a built-in fallback, so no icon
@@ -1469,6 +1475,10 @@ declare class DashboardLayoutComponent {
     readonly mode: _angular_core.InputSignal<AppShellMode>;
     readonly sidenavWidth: _angular_core.InputSignal<string>;
     readonly collapsedWidth: _angular_core.InputSignal<string>;
+    /** Layout mode for the trailing panel, when `[layoutEnd]` is projected. */
+    readonly endMode: _angular_core.InputSignal<AppShellMode>;
+    readonly endWidth: _angular_core.InputSignal<string>;
+    readonly endCollapsedWidth: _angular_core.InputSignal<string>;
     /** Veil the page area with the projected `[layoutPageLoader]` content. */
     readonly pageLoading: _angular_core.InputSignal<boolean>;
     /** Accessible name for the aside's collapse toggle. */
@@ -1480,6 +1490,8 @@ declare class DashboardLayoutComponent {
     private readonly shell;
     /** Whether the aside is in its icon rail. Projected controls follow this. */
     readonly collapsed: _angular_core.Signal<boolean>;
+    /** Whether the trailing panel is showing. Projected controls follow this. */
+    readonly endOpen: _angular_core.Signal<boolean>;
     readonly classes: _angular_core.Signal<string>;
     get hostClass(): string;
     get hostId(): string | null;
@@ -1487,8 +1499,19 @@ declare class DashboardLayoutComponent {
     toggleSidenav(): void;
     /** The topbar hamburger: open the off-canvas aside on narrow viewports. */
     openSidenav(): void;
+    /**
+     * Collapse the rail from outside the header's own toggle — what a dashboard
+     * calls when it opens the trailing panel and wants the room.
+     */
+    closeSidenav(): void;
+    /** Show the projected `[layoutEnd]` panel. */
+    openEnd(): void;
+    /** Hide it. */
+    closeEnd(): void;
+    /** Hide it if it is showing, show it if it is not. */
+    toggleEnd(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardLayoutComponent, "fk-dashboard-layout", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "pageLoading": { "alias": "pageLoading"; "required": false; "isSignal": true; }; "toggleAriaLabel": { "alias": "toggleAriaLabel"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["[layoutBanner]", "[layoutBrand]", "[layoutToggleIcon]", "[layoutAside]", "[layoutAsideFooter]", "[layoutMenuIcon]", "[layoutTopbarStart]", "[layoutTopbarEnd]", "*", "[layoutPageLoader]", "[layoutFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardLayoutComponent, "fk-dashboard-layout", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "endMode": { "alias": "endMode"; "required": false; "isSignal": true; }; "endWidth": { "alias": "endWidth"; "required": false; "isSignal": true; }; "endCollapsedWidth": { "alias": "endCollapsedWidth"; "required": false; "isSignal": true; }; "pageLoading": { "alias": "pageLoading"; "required": false; "isSignal": true; }; "toggleAriaLabel": { "alias": "toggleAriaLabel"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["[layoutBanner]", "[layoutBrand]", "[layoutToggleIcon]", "[layoutAside]", "[layoutAsideFooter]", "[layoutContentPanel]", "[layoutMenuIcon]", "[layoutTopbarStart]", "[layoutTopbarEnd]", "*", "[layoutPageLoader]", "[layoutEnd]", "[layoutFooter]"], true, never>;
 }
 
 export { BackNavComponent, ColumnsComponent, ContentColumnComponent, ContentColumnHeadlineComponent, ContentDetailHeaderComponent, ContentDetailPageComponent, ContentPageSectionComponent, ContentRowComponent, ContentSplitLayoutComponent, ContextSwitcherComponent, DashboardLayoutComponent, DashboardNavComponent, DetailPanelComponent, DialogFooterComponent, DialogHeaderComponent, DialogShellComponent, InlineLoaderComponent, OnboardingGuideComponent, PageHeaderComponent, SearchBarLayoutComponent, SidebarNavComponent, SidebarNavItemDirective, TableEmptyStateComponent };