@theseam/ui-common 0.4.29 → 0.4.30

package/framework/nav/nav.service.d.ts

@@ -0,0 +1,27 @@
+import { Router } from '@angular/router';
+import { Observable, Subject } from 'rxjs';
+import { INavItem, INavItemState, NavItemStateChanged } from './nav.models';
+import * as i0 from "@angular/core";
+export declare class TheSeamNavService {
+    private readonly _router;
+    private readonly _updatingCount;
+    readonly loading$: Observable<boolean>;
+    readonly itemChanged: Subject<NavItemStateChanged>;
+    constructor(_router: Router);
+    createItemsObservable(items: INavItem[]): Observable<INavItem[]>;
+    private _incUpdatingCount;
+    private _decrUpdatingCount;
+    updateItemsStates(items: INavItem[]): void;
+    updateItemState(item: INavItem): void;
+    horizontalNavLinkActive(item: INavItem): boolean;
+    private _updateItemsExpandedState;
+    private _updateItemExpandedState;
+    updateRouterFocusedItem(items: INavItem[]): void;
+    updateFocusedItem(items: INavItem[], focusedItem: INavItem | undefined): void;
+    private _getNavExtras;
+    private _getUrl;
+    private _getMatchOptions;
+    setItemStateProp<K extends keyof INavItemState>(item: INavItem, prop: K, value: INavItemState[K]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamNavService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TheSeamNavService>;
+}

package/framework/nav/styles/_themes/light/_variables.scss

@@ -0,0 +1,56 @@
+$seam-nav-bg-color: $gray-100 !default;
+$seam-nav-bg: none !default;
+
+$seam-nav-row-padding: 0.25rem 0.5rem !default;
+
+// Backdrop
+$seam-nav-background-bg-color: rgba($dark, 0.6) !default;
+
+// Group
+$seam-nav-group-bg-variation-amount: 3% !default;
+
+// Item
+$seam-nav-item-text-align: inherit !default;
+
+$seam-nav-item-border-radius: 0 !default;
+
+$seam-nav-item-bg-color: transparent !default;
+$seam-nav-item-bg-color-active: darken($seam-nav-bg-color, 10%) !default;
+$seam-nav-item-bg-color-expanded: $seam-nav-item-bg-color !default;
+$seam-nav-item-bg-color-child-active: $seam-nav-item-bg-color-active !default;
+$seam-nav-item-bg-color-hover: darken($seam-nav-bg-color, 5%) !default;
+
+$seam-nav-item-color: $black !default;
+$seam-nav-item-color-active: $seam-nav-item-color !default;
+$seam-nav-item-color-expanded: $seam-nav-item-color !default;
+$seam-nav-item-color-child-active: $seam-nav-item-color-active !default;
+
+$seam-nav-item-disabled-color: darken($seam-nav-item-color, 20%) !default;
+
+$seam-nav-item-margin: 0 !default;
+
+// Divider
+$seam-nav-divider-color: darken($seam-nav-bg-color, 10%) !default;
+$seam-nav-divider-size: 1px !default;
+
+// Title
+$seam-nav-title-color: $seam-nav-item-color !default;
+
+$seam-nav-title-font-size: 24px !default;
+
+$seam-nav-title-padding-left: 10px !default;
+
+// Toggle Buttons
+$seam-nav-toggle-btn-padding: 0 .5rem !default;
+
+$seam-nav-toggle-btn-use-transform-active: true !default;
+$seam-nav-toggle-btn-transform: none !default;
+$seam-nav-toggle-btn-transform-active: rotate(-90deg) !default;
+
+$seam-nav-toggle-btn-color: $seam-nav-item-color !default;
+$seam-nav-toggle-btn-color-hover: $seam-nav-toggle-btn-color !default;
+
+$seam-nav-toggle-btn-border-radius: 0 !default;
+$seam-nav-toggle-btn-border-width: 0 !default;
+$seam-nav-toggle-btn-border-style: solid !default;
+$seam-nav-toggle-btn-border-color: $border-color !default;

package/framework/nav/styles/_themes/primary/_variables.scss

@@ -0,0 +1,56 @@
+$seam-nav-bg-color: $primary !default;
+$seam-nav-bg: $seam-nav-bg-color !default;
+
+$seam-nav-row-padding: 0.25rem 0.5rem !default;
+
+// Backdrop
+$seam-nav-background-bg-color: rgba($dark, 0.6) !default;
+
+// Group
+$seam-nav-group-bg-variation-amount: 3% !default;
+
+// Item
+$seam-nav-item-text-align: inherit !default;
+
+$seam-nav-item-border-radius: 0 !default;
+
+$seam-nav-item-bg-color: transparent !default;
+$seam-nav-item-bg-color-active: darken($seam-nav-bg-color, 10%) !default;
+$seam-nav-item-bg-color-expanded: $seam-nav-item-bg-color !default;
+$seam-nav-item-bg-color-child-active: $seam-nav-item-bg-color-active !default;
+$seam-nav-item-bg-color-hover: darken($seam-nav-bg-color, 5%) !default;
+
+$seam-nav-item-color: $white !default;
+$seam-nav-item-color-active: $seam-nav-item-color !default;
+$seam-nav-item-color-expanded: $seam-nav-item-color !default;
+$seam-nav-item-color-child-active: $seam-nav-item-color-active !default;
+
+$seam-nav-item-disabled-color: darken($seam-nav-item-color, 20%) !default;
+
+$seam-nav-item-margin: 0 !default;
+
+// Divider
+$seam-nav-divider-color: darken($seam-nav-bg-color, 10%) !default;
+$seam-nav-divider-size: 1px !default;
+
+// Title
+$seam-nav-title-color: $seam-nav-item-color !default;
+
+$seam-nav-title-font-size: 24px !default;
+
+$seam-nav-title-padding-left: 10px !default;
+
+// Toggle Buttons
+$seam-nav-toggle-btn-padding: 0 .5rem !default;
+
+$seam-nav-toggle-btn-use-transform-active: true !default;
+$seam-nav-toggle-btn-transform: none !default;
+$seam-nav-toggle-btn-transform-active: rotate(-90deg) !default;
+
+$seam-nav-toggle-btn-color: $seam-nav-item-color !default;
+$seam-nav-toggle-btn-color-hover: $seam-nav-toggle-btn-color !default;
+
+$seam-nav-toggle-btn-border-radius: 0 !default;
+$seam-nav-toggle-btn-border-width: 0 !default;
+$seam-nav-toggle-btn-border-style: solid !default;
+$seam-nav-toggle-btn-border-color: $border-color !default;

package/framework/nav/styles/_utilities.scss

@@ -0,0 +1,3 @@
+@import '../../../styles/utilities';
+
+@import './variables';

package/framework/nav/styles/_variables.scss

@@ -0,0 +1,2 @@
+@import './_themes/light/_variables';
+// @import './_themes/primary/_variables';

package/framework/public-api.d.ts

@@ -4,3 +4,4 @@ export * from './side-nav/index';
 export * from './top-bar/index';
 export * from './dynamic-router/index';
 export * from './schema-form/index';
+export * from './nav/index';

package/framework/side-nav/side-nav-item/side-nav-item.component.d.ts

@@ -1,21 +1,13 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
-import type { SeamIcon } from '@theseam/ui-common/icon';
+import { SeamIcon } from '@theseam/ui-common/icon';
 import type { ThemeTypes } from '@theseam/ui-common/models';
 import { SideNavAccessor } from '../side-nav-tokens';
-import { ISideNavItem, SideNavItemMenuItemTooltipConfig } from '../side-nav.models';
+import { ISideNavItem, SideNavItemBadgeTooltip, SideNavItemMenuItemTooltipConfig } from '../side-nav.models';
 import * as i0 from "@angular/core";
-export interface SideNavItemBadgeTooltip {
-    tooltip?: string;
-    class?: string;
-    placement?: string;
-    container?: string;
-    disabled?: boolean;
-}
 export declare class SideNavItemComponent implements OnDestroy {
     private readonly _sideNav;
-    private readonly _parent?;
     static ngAcceptInputType_hierLevel: NumberInput;
     static ngAcceptInputType_indentSize: NumberInput;
     static ngAcceptInputType_expanded: BooleanInput;
@@ -29,6 +21,7 @@ export declare class SideNavItemComponent implements OnDestroy {
     };
     itemType: 'divider' | 'basic' | 'link' | 'button' | 'title' | undefined | null;
     icon: SeamIcon | undefined | null;
+    hideEmptyIcon: boolean | undefined | null;
     label: string | undefined | null;
     active: boolean;
     activeNavigatable: boolean;
@@ -66,12 +59,12 @@ export declare class SideNavItemComponent implements OnDestroy {
     get _isClickableWhenActiveCssClass(): boolean;
     get _attrDataHierLevel(): number;
     readonly childGroupAnimState$: Observable<string>;
-    readonly compactAnimState$: Observable<string>;
-    constructor(_sideNav: SideNavAccessor, _parent?: SideNavItemComponent | undefined);
+    constructor(_sideNav: SideNavAccessor);
     ngOnDestroy(): void;
     get hasChildren(): boolean;
     toggleChildren(): void;
     _linkClicked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SideNavItemComponent, [null, { optional: true; host: true; skipSelf: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavItemComponent, "seam-side-nav-item", ["seamSideNavItem"], { "itemType": "itemType"; "icon": "icon"; "label": "label"; "active": "active"; "activeNavigatable": "activeNavigatable"; "link": "link"; "queryParams": "queryParams"; "children": "children"; "hierLevel": "hierLevel"; "indentSize": "indentSize"; "expanded": "expanded"; "compact": "compact"; "isMobile": "isMobile"; "badgeText": "badgeText"; "badgeTheme": "badgeTheme"; "badgeSrContent": "badgeSrContent"; "badgeTooltip": "badgeTooltip"; "menuItemTooltipConfig": "menuItemTooltipConfig"; "menuItemTooltipDisabled": "menuItemTooltipDisabled"; }, {}, never, never, false, never>;
+    get showIconBlock(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideNavItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavItemComponent, "seam-side-nav-item", ["seamSideNavItem"], { "itemType": "itemType"; "icon": "icon"; "hideEmptyIcon": "hideEmptyIcon"; "label": "label"; "active": "active"; "activeNavigatable": "activeNavigatable"; "link": "link"; "queryParams": "queryParams"; "children": "children"; "hierLevel": "hierLevel"; "indentSize": "indentSize"; "expanded": "expanded"; "compact": "compact"; "isMobile": "isMobile"; "badgeText": "badgeText"; "badgeTheme": "badgeTheme"; "badgeSrContent": "badgeSrContent"; "badgeTooltip": "badgeTooltip"; "menuItemTooltipConfig": "menuItemTooltipConfig"; "menuItemTooltipDisabled": "menuItemTooltipDisabled"; }, {}, never, never, true, never>;
 }

package/framework/side-nav/side-nav-item/side-nav-item.component.scss

@@ -22,6 +22,10 @@ seam-side-nav-item {
     .nav-link {
       color: $seam-side-nav-item-color-active;
     }
+
+    .side-nav-btn {
+      color: $seam-side-nav-item-toggle-color-active;
+    }
   }
 
   .badge {
@@ -106,11 +110,11 @@ seam-side-nav-item {
 
   .side-nav-btn {
     font-weight: $font-weight-normal;
-    color: $seam-side-nav-item-color;
+    color: $seam-side-nav-item-toggle-color;
     text-decoration: $link-decoration;
 
     @include hover {
-      color: $seam-side-nav-item-bg-color-hover;
+      color: $seam-side-nav-item-toggle-color-hover;
       text-decoration: $link-hover-decoration;
     }
 
@@ -122,7 +126,7 @@ seam-side-nav-item {
 
     &:disabled,
     &.disabled {
-      color: $seam-side-nav-item-disabled-color;
+      color: $seam-side-nav-item-toggle-disabled-color;
       pointer-events: none;
 
       .side-nav-item--badge {
@@ -150,8 +154,6 @@ seam-side-nav-item {
   }
 
   .side-nav-item--toggle-btn {
-    color: $seam-side-nav-item-color-active;
-
     .svg-inline--fa {
       transition: 100ms ease-in-out transform;
     }

package/framework/side-nav/side-nav-toggle/side-nav-toggle.component.d.ts

@@ -1,12 +1,14 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { SeamIcon } from '@theseam/ui-common/icon';
 import * as i0 from "@angular/core";
 export declare class SideNavToggleComponent {
     static ngAcceptInputType_expanded: BooleanInput;
-    faBars: import("@fortawesome/fontawesome-common-types").IconDefinition;
     expanded: boolean;
+    toggleIcon: SeamIcon | undefined | null;
+    toggleTpl: TemplateRef<any> | undefined | null;
     toggleExpand: EventEmitter<void>;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SideNavToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavToggleComponent, "seam-side-nav-toggle", never, { "expanded": "expanded"; }, { "toggleExpand": "toggleExpand"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavToggleComponent, "seam-side-nav-toggle", never, { "expanded": "expanded"; "toggleIcon": "toggleIcon"; "toggleTpl": "toggleTpl"; }, { "toggleExpand": "toggleExpand"; }, never, ["*"], true, never>;
 }

package/framework/side-nav/side-nav-toggle/side-nav-toggle.component.scss

@@ -4,12 +4,14 @@ seam-side-nav-toggle {
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
+  align-items: center;
+  background: $seam-side-nav-toggle-bg-color;
 
   // &.side-nav-toggle--compact {
   //   width: 50px;
   // }
   position: relative;
-  height: 45px;
+  height: $seam-side-nav-toggle-height;
   width: 100%;
 
   //
@@ -18,11 +20,6 @@ seam-side-nav-toggle {
   }
 
   .side-nav-toggle--btn {
-    // flex: 0 0 auto;
-    // align-self: flex-end;
-    position: absolute;
-    top: 0;
-    right: 5px;
     color: $seam-side-nav-toggle-btn-color;
 
     seam-icon {

package/framework/side-nav/side-nav.component.d.ts

@@ -3,6 +3,7 @@ import { TemplatePortal } from '@angular/cdk/portal';
 import { EventEmitter, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { TheSeamLayoutService } from '@theseam/ui-common/layout';
+import { SeamIcon } from '@theseam/ui-common/icon';
 import { ITheSeamBaseLayoutNav, ITheSeamBaseLayoutRef } from '../base-layout/index';
 import { SideNavConfig } from './side-nav-tokens';
 import { ISideNavItem, SideNavItemMenuItemTooltipConfig } from './side-nav.models';
@@ -17,16 +18,24 @@ export declare class SideNavComponent implements OnInit, OnDestroy, ITheSeamBase
     private readonly _baseLayoutRef?;
     static ngAcceptInputType_hasHeaderToggle: BooleanInput;
     private readonly _ngUnsubscribe;
+    faBars: import("@fortawesome/fontawesome-common-types").IconDefinition;
     _sideNavExpand: string;
     hasHeaderToggle: boolean;
+    toggleIcon: SeamIcon | null | undefined;
+    toggleTpl: TemplateRef<any> | undefined | null;
     get items(): ISideNavItem[];
     set items(value: ISideNavItem[]);
     private _items;
     readonly items$: Observable<ISideNavItem[]>;
+    hideEmptyIcon: boolean | null | undefined;
+    indentSize: number;
     get expanded(): boolean;
     set expanded(value: boolean);
     private _expanded;
     readonly expanded$: Observable<boolean>;
+    expandOrigin: 'left' | 'right' | 'top' | 'bottom';
+    expandHeight: string;
+    expandWidth: string;
     get overlay(): boolean;
     set overlay(value: boolean);
     private _overlay;
@@ -39,6 +48,8 @@ export declare class SideNavComponent implements OnInit, OnDestroy, ITheSeamBase
     readonly isMobile$: Observable<boolean>;
     readonly sideNavExpandedState$: Observable<string>;
     _backdropHidden: BehaviorSubject<boolean>;
+    _sideBarHeaderTpl?: TemplateRef<any> | null;
+    _sideBarHeaderPortal?: TemplatePortal;
     _sideBarFooterTpl?: TemplateRef<any> | null;
     _sideBarFooterPortal?: TemplatePortal;
     constructor(_viewContainerRef: ViewContainerRef, _layout: TheSeamLayoutService, _sideNav: TheSeamSideNavService, _config?: SideNavConfig | undefined, _baseLayoutRef?: ITheSeamBaseLayoutRef | undefined);
@@ -49,6 +60,7 @@ export declare class SideNavComponent implements OnInit, OnDestroy, ITheSeamBase
     toggle(): void;
     animateStart(): void;
     animateEnd(): void;
+    get expandOriginTransform(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<SideNavComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavComponent, "seam-side-nav", never, { "hasHeaderToggle": "hasHeaderToggle"; "items": "items"; "expanded": "expanded"; "overlay": "overlay"; "menuItemTooltipConfig": "menuItemTooltipConfig"; }, { "toggleExpand": "toggleExpand"; }, ["_sideBarFooterTpl"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavComponent, "seam-side-nav", never, { "hasHeaderToggle": "hasHeaderToggle"; "toggleIcon": "toggleIcon"; "toggleTpl": "toggleTpl"; "items": "items"; "hideEmptyIcon": "hideEmptyIcon"; "indentSize": "indentSize"; "expanded": "expanded"; "expandOrigin": "expandOrigin"; "expandHeight": "expandHeight"; "expandWidth": "expandWidth"; "overlay": "overlay"; "menuItemTooltipConfig": "menuItemTooltipConfig"; }, { "toggleExpand": "toggleExpand"; }, ["_sideBarHeaderTpl", "_sideBarFooterTpl"], never, true, never>;
 }

package/framework/side-nav/side-nav.component.scss

@@ -30,7 +30,6 @@ seam-side-nav,
 
   overflow: hidden;
 
-  //
   .side-nav-content {
     display: flex;
     flex-direction: column;

package/framework/side-nav/side-nav.models.d.ts

@@ -1,7 +1,6 @@
 import { IsActiveMatchOptions, UrlCreationOptions } from '@angular/router';
 import { SeamIcon } from '@theseam/ui-common/icon';
 import type { ThemeTypes } from '@theseam/ui-common/models';
-import { SideNavItemBadgeTooltip } from './side-nav-item/side-nav-item.component';
 export interface ISideNavItemState {
     active: boolean;
     expanded: boolean;
@@ -73,6 +72,13 @@ export interface SideNavItemStateChanged {
     prevValue: any;
     newValue: any;
 }
+export interface SideNavItemBadgeTooltip {
+    tooltip?: string;
+    class?: string;
+    placement?: string;
+    container?: string;
+    disabled?: boolean;
+}
 /**
  * When `never`, menu item tooltip is always disabled.
  * When `always`, menu item tooltip is always enabled.

package/framework/side-nav/side-nav.module.d.ts

@@ -2,16 +2,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "./side-nav-item/side-nav-item.component";
 import * as i2 from "./side-nav.component";
 import * as i3 from "./side-nav-toggle/side-nav-toggle.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/router";
-import * as i6 from "@theseam/ui-common/icon";
-import * as i7 from "@angular/cdk/a11y";
-import * as i8 from "@theseam/ui-common/scrollbar";
-import * as i9 from "@theseam/ui-common/layout";
-import * as i10 from "@ng-bootstrap/ng-bootstrap";
-import * as i11 from "@angular/cdk/portal";
 export declare class TheSeamSideNavModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamSideNavModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamSideNavModule, [typeof i1.SideNavItemComponent, typeof i2.SideNavComponent, typeof i3.SideNavToggleComponent], [typeof i4.CommonModule, typeof i5.RouterModule, typeof i6.TheSeamIconModule, typeof i7.A11yModule, typeof i8.TheSeamScrollbarModule, typeof i9.TheSeamLayoutModule, typeof i10.NgbTooltipModule, typeof i11.PortalModule], [typeof i1.SideNavItemComponent, typeof i2.SideNavComponent, typeof i3.SideNavToggleComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamSideNavModule, never, [typeof i1.SideNavItemComponent, typeof i2.SideNavComponent, typeof i3.SideNavToggleComponent], [typeof i1.SideNavItemComponent, typeof i2.SideNavComponent, typeof i3.SideNavToggleComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamSideNavModule>;
 }

package/framework/side-nav/styles/_themes/light/_variables.scss

@@ -1,29 +1,39 @@
-$seam-side-nav-bg-color: $gray-200;
+$seam-side-nav-bg-color: $gray-200 !default;
+$seam-side-nav-bg: $seam-side-nav-bg-color !default;
 
-$seam-side-nav-background-bg-color: rgba($dark, 0.6);
+// Backdrop
+$seam-side-nav-background-bg-color: rgba($dark, 0.6) !default;
 
 // Group
-$seam-side-nav-group-bg-variation-amount: 3%;
+$seam-side-nav-group-bg-variation-amount: 3% !default;
 
 // Item
-$seam-side-nav-item-bg-color-active: $white;
-$seam-side-nav-item-bg-color-hover: rgba($primary, 0.4);
+$seam-side-nav-item-bg-color-active: $white !default;
+$seam-side-nav-item-bg-color-hover: rgba($primary, 0.4) !default;
 
-$seam-side-nav-item-color: $black;
-$seam-side-nav-item-color-active: $black;
+$seam-side-nav-item-color: $black !default;
+$seam-side-nav-item-color-active: $black !default;
 
-$seam-side-nav-item-disabled-color: $text-muted;
+$seam-side-nav-item-disabled-color: $text-muted !default;
+
+$seam-side-nav-item-toggle-color: $seam-side-nav-item-color !default;
+$seam-side-nav-item-toggle-color-active: $seam-side-nav-item-toggle-color !default;
+$seam-side-nav-item-toggle-color-hover: $seam-side-nav-item-toggle-color !default;
+
+$seam-side-nav-item-toggle-disabled-color: darken($seam-side-nav-item-toggle-color, 20%) !default;
 
 // Divider
-$seam-side-nav-divider-color: $gray-500;
-$seam-side-nav-divider-size: 1px;
+$seam-side-nav-divider-color: $gray-500 !default;
+$seam-side-nav-divider-size: 1px !default;
 
 // Title
-$seam-side-nav-title-color: $black;
+$seam-side-nav-title-color: $black !default;
 
-$seam-side-nav-title-font-size: 24px;
+$seam-side-nav-title-font-size: 24px !default;
 
-$seam-side-nav-title-padding-left: 10px;
+$seam-side-nav-title-padding-left: 10px !default;
 
 // Toggle
-$seam-side-nav-toggle-btn-color: $seam-side-nav-item-color;
+$seam-side-nav-toggle-bg-color: $seam-side-nav-bg-color !default;
+$seam-side-nav-toggle-btn-color: $seam-side-nav-item-color !default;
+$seam-side-nav-toggle-height: 45px !default;

package/framework/side-nav/styles/_themes/primary/_variables.scss

@@ -16,6 +16,12 @@ $seam-side-nav-item-color-active: $seam-side-nav-item-color !default;
 
 $seam-side-nav-item-disabled-color: darken($seam-side-nav-item-color, 20%) !default;
 
+$seam-side-nav-item-toggle-color: $seam-side-nav-item-color !default;
+$seam-side-nav-item-toggle-color-active: $seam-side-nav-item-toggle-color !default;
+$seam-side-nav-item-toggle-color-hover: $seam-side-nav-item-toggle-color !default;
+
+$seam-side-nav-item-toggle-disabled-color: darken($seam-side-nav-item-toggle-color, 20%) !default;
+
 // Divider
 $seam-side-nav-divider-color: darken($seam-side-nav-bg-color, 10%) !default;
 $seam-side-nav-divider-size: 1px !default;
@@ -28,4 +34,6 @@ $seam-side-nav-title-font-size: 24px !default;
 $seam-side-nav-title-padding-left: 10px !default;
 
 // Toggle
+$seam-side-nav-toggle-bg-color: $seam-side-nav-bg-color !default;
 $seam-side-nav-toggle-btn-color: $seam-side-nav-item-color !default;
+$seam-side-nav-toggle-height: 45px !default;

package/framework/top-bar/index.d.ts

@@ -1,5 +1,7 @@
 export * from './top-bar-menu-button/top-bar-menu-button.component';
 export * from './top-bar-title/top-bar-title.component';
+export * from './top-bar-compact-menu-btn-detail.directive';
+export * from './top-bar-nav-toggle-btn-detail.directive';
 export * from './top-bar-item.directive';
 export * from './top-bar-menu-btn-detail.directive';
 export * from './top-bar-menu.directive';

package/framework/top-bar/top-bar-compact-menu-btn-detail.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TopBarCompactMenuBtnDetailDirective {
+    template: TemplateRef<any>;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TopBarCompactMenuBtnDetailDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TopBarCompactMenuBtnDetailDirective, "[seamTopBarCompactMenuBtnDetail]", never, {}, {}, never, never, false, never>;
+}

package/framework/top-bar/top-bar-item.directive.d.ts

@@ -1,8 +1,11 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+export type TopBarPosition = 'left' | 'right' | 'center';
 export declare class TopBarItemDirective {
     template: TemplateRef<any>;
+    position: TopBarPosition;
+    set seamTopBarItem(value: any);
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<TopBarItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TopBarItemDirective, "[seamTopBarItem]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TopBarItemDirective, "[seamTopBarItem]", never, { "seamTopBarItem": "seamTopBarItem"; }, {}, never, never, false, never>;
 }

package/framework/top-bar/top-bar-menu-button/top-bar-menu-button.component.d.ts

@@ -9,7 +9,10 @@ declare const _TopBarMenuButtonMixinBase: CanDisableCtor & typeof TopBarMenuButt
 export declare class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBase {
     static ngAcceptInputType_compact: BooleanInput;
     faAngleDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    detailTpl: TemplateRef<object> | undefined | null;
+    /** Custom template to show in desktop mode. No default. */
+    detailTpl: TemplateRef<any> | undefined | null;
+    /** Custom template to show in mobile mode. Defaults to icon. */
+    compactDetailTpl: TemplateRef<any> | undefined | null;
     compact: boolean;
     /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
     profileIcon: SeamIcon | undefined | null;
@@ -18,6 +21,6 @@ export declare class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBas
     get _hasRoundedClass(): boolean;
     get _hasBtnLinkClass(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TopBarMenuButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TopBarMenuButtonComponent, "button[seamTopBarMenuButton]", ["seamButton"], { "disabled": "disabled"; "detailTpl": "detailTpl"; "compact": "compact"; "profileIcon": "profileIcon"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TopBarMenuButtonComponent, "button[seamTopBarMenuButton]", ["seamButton"], { "disabled": "disabled"; "detailTpl": "detailTpl"; "compactDetailTpl": "compactDetailTpl"; "compact": "compact"; "profileIcon": "profileIcon"; }, {}, never, never, false, never>;
 }
 export {};

package/framework/top-bar/top-bar-nav-toggle-btn-detail.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TopBarNavToggleBtnDetailDirective {
+    template: TemplateRef<any>;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TopBarNavToggleBtnDetailDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TopBarNavToggleBtnDetailDirective, "[seamTopBarNavToggleBtnDetail]", never, {}, {}, never, never, false, never>;
+}

package/framework/top-bar/top-bar.component.d.ts

@@ -1,11 +1,13 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, OnDestroy, QueryList } from '@angular/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { TheSeamLayoutService } from '@theseam/ui-common/layout';
 import { SeamIcon } from '@theseam/ui-common/icon';
+import { TopBarCompactMenuBtnDetailDirective } from './top-bar-compact-menu-btn-detail.directive';
 import { TopBarItemDirective } from './top-bar-item.directive';
 import { TopBarMenuBtnDetailDirective } from './top-bar-menu-btn-detail.directive';
 import { TopBarMenuDirective } from './top-bar-menu.directive';
+import { TopBarNavToggleBtnDetailDirective } from './top-bar-nav-toggle-btn-detail.directive';
 import * as i0 from "@angular/core";
 /**
  * Top bar of an app.
@@ -31,6 +33,10 @@ export declare class TheSeamTopBarComponent implements OnDestroy, AfterContentIn
     _topBarItems?: QueryList<TopBarItemDirective>;
     /** @ignore */
     _topBarMenuBtnDetailTpl?: TopBarMenuBtnDetailDirective | null;
+    /** @ignore */
+    _topBarCompactMenuBtnDetailTpl?: TopBarCompactMenuBtnDetailDirective | null;
+    /** @ignore */
+    _topBarNavToggleBtnDetailTpl?: TopBarNavToggleBtnDetailDirective | null;
     /** Logo displayed on the top bar. */
     logo: string | undefined | null;
     /** Logo displayed on the top bar when a smaller logo is needed. */
@@ -47,10 +53,26 @@ export declare class TheSeamTopBarComponent implements OnDestroy, AfterContentIn
     titleText: string | undefined | null;
     /** Sub Title text displayed when `hasTitle` is true. The sub title will be less prominent. */
     subTitleText: string | undefined | null;
+    /** Determines if the top bar button should be displayed. */
+    hasTopBarMenuButton: boolean;
     /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
     profileIcon: SeamIcon | undefined | null;
+    /** Icon to display for mobile nav toggle. Defaults to faBars. */
+    toggleIcon: SeamIcon | undefined | null;
+    /** Display nav toggle on either left or right side of top bar. Defaults to left. */
+    navToggleAlign: 'left' | 'right' | undefined | null;
+    /** @ignore */
+    _leftItems: BehaviorSubject<TopBarItemDirective[]>;
+    /** Additional templates to display on left side of top bar */
+    leftItems$: Observable<TopBarItemDirective[]>;
+    /** @ignore */
+    _centerItems: BehaviorSubject<TopBarItemDirective[]>;
+    /** Additional templates to display in center of top bar */
+    centerItems$: Observable<TopBarItemDirective[]>;
     /** @ignore */
-    _items$?: Observable<TopBarItemDirective[]>;
+    _rightItems: BehaviorSubject<TopBarItemDirective[]>;
+    /** Additional templates to display on right side of top bar */
+    rightItems$: Observable<TopBarItemDirective[]>;
     /** @ignore */
     isMobile$: Observable<boolean>;
     constructor(_layout: TheSeamLayoutService);
@@ -59,5 +81,5 @@ export declare class TheSeamTopBarComponent implements OnDestroy, AfterContentIn
     /** @ignore */
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTopBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TheSeamTopBarComponent, "seam-top-bar", ["seamTopBar"], { "logo": "logo"; "logoSm": "logoSm"; "logoHref": "logoHref"; "logoHrefTarget": "logoHrefTarget"; "logoRoute": "logoRoute"; "hasTitle": "hasTitle"; "titleText": "titleText"; "subTitleText": "subTitleText"; "profileIcon": "profileIcon"; }, {}, ["_topBarMenu", "_topBarMenuBtnDetailTpl", "_topBarItems"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TheSeamTopBarComponent, "seam-top-bar", ["seamTopBar"], { "logo": "logo"; "logoSm": "logoSm"; "logoHref": "logoHref"; "logoHrefTarget": "logoHrefTarget"; "logoRoute": "logoRoute"; "hasTitle": "hasTitle"; "titleText": "titleText"; "subTitleText": "subTitleText"; "hasTopBarMenuButton": "hasTopBarMenuButton"; "profileIcon": "profileIcon"; "toggleIcon": "toggleIcon"; "navToggleAlign": "navToggleAlign"; }, {}, ["_topBarMenu", "_topBarMenuBtnDetailTpl", "_topBarCompactMenuBtnDetailTpl", "_topBarNavToggleBtnDetailTpl", "_topBarItems"], never, false, never>;
 }

package/framework/top-bar/top-bar.component.scss

@@ -34,6 +34,11 @@ seam-top-bar {
   }
 }
 
-.top-bar-icon-container {
-  margin: auto 0;
+.top-bar--left {
+  flex-grow: 1;
+}
+
+.top-bar-items {
+  display: flex;
+  align-items: center;
 }