@theseam/ui-common 0.4.18 → 0.4.19-beta.0

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;
@@ -25,6 +17,7 @@ export declare class SideNavItemComponent implements OnDestroy {
     readonly faAngleLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
     itemType: 'divider' | 'basic' | 'link' | 'button' | 'title' | undefined | null;
     icon: SeamIcon | undefined | null;
+    hideEmptyIcon: boolean | undefined | null;
     label: string | undefined | null;
     active: boolean;
     set link(value: string | undefined | null);
@@ -60,12 +53,12 @@ export declare class SideNavItemComponent implements OnDestroy {
     get _isActiveCssClass(): 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"; "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"; "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 {
@@ -101,11 +105,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;
     }
 
@@ -117,7 +121,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;
     }
   }
@@ -140,8 +144,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 { ISideNavItem, SideNavItemMenuItemTooltipConfig } from './side-nav.models';
 import { TheSeamSideNavService } from './side-nav.service';
@@ -15,16 +16,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;
@@ -37,6 +46,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, _baseLayoutRef: ITheSeamBaseLayoutRef);
@@ -47,6 +58,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; }]>;
-    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;
@@ -62,6 +61,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;
 }

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

@@ -5,15 +5,17 @@ import * as i3 from "./top-bar-menu-button/top-bar-menu-button.component";
 import * as i4 from "./top-bar-menu.directive";
 import * as i5 from "./top-bar-item.directive";
 import * as i6 from "./top-bar-menu-btn-detail.directive";
-import * as i7 from "@angular/common";
-import * as i8 from "@theseam/ui-common/layout";
-import * as i9 from "@theseam/ui-common/buttons";
-import * as i10 from "@theseam/ui-common/icon";
-import * as i11 from "@theseam/ui-common/menu";
-import * as i12 from "../base-layout/base-layout.module";
-import * as i13 from "@angular/router";
+import * as i7 from "./top-bar-compact-menu-btn-detail.directive";
+import * as i8 from "./top-bar-nav-toggle-btn-detail.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@theseam/ui-common/layout";
+import * as i11 from "@theseam/ui-common/buttons";
+import * as i12 from "@theseam/ui-common/icon";
+import * as i13 from "@theseam/ui-common/menu";
+import * as i14 from "../base-layout/base-layout.module";
+import * as i15 from "@angular/router";
 export declare class TheSeamTopBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTopBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTopBarModule, [typeof i1.TheSeamTopBarComponent, typeof i2.TopBarTitleComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective], [typeof i7.CommonModule, typeof i8.TheSeamLayoutModule, typeof i9.TheSeamButtonsModule, typeof i10.TheSeamIconModule, typeof i11.TheSeamMenuModule, typeof i12.TheSeamBaseLayoutModule, typeof i13.RouterModule], [typeof i1.TheSeamTopBarComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i11.TheSeamMenuModule, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTopBarModule, [typeof i1.TheSeamTopBarComponent, typeof i2.TopBarTitleComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective, typeof i7.TopBarCompactMenuBtnDetailDirective, typeof i8.TopBarNavToggleBtnDetailDirective], [typeof i9.CommonModule, typeof i10.TheSeamLayoutModule, typeof i11.TheSeamButtonsModule, typeof i12.TheSeamIconModule, typeof i13.TheSeamMenuModule, typeof i14.TheSeamBaseLayoutModule, typeof i15.RouterModule], [typeof i1.TheSeamTopBarComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i13.TheSeamMenuModule, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective, typeof i7.TopBarCompactMenuBtnDetailDirective, typeof i8.TopBarNavToggleBtnDetailDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamTopBarModule>;
 }

package/layout/layout.service.d.ts

@@ -5,11 +5,19 @@ import * as i0 from "@angular/core";
 export declare class TheSeamLayoutService {
     private _media;
     /**
-     * Is app a mobile-like size.
+     * Observes if app is a mobile-like size.
+     * Default mobile breakpoint is <= 599px,
+     * use setMobileBreakpoint() to change size.
      */
     isMobile$: Observable<boolean>;
+    private _mobileBreakpoint;
+    mobileBreakpoint$: Observable<MediaQueryAliases>;
     constructor(_media: MediaObserver);
     observe(alias: MediaQueryAliases): Observable<boolean>;
+    /**
+     * Update breakpoint observed by isMobile$
+     */
+    setMobileBreakpoint(alias: MediaQueryAliases): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamLayoutService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<TheSeamLayoutService>;
 }

package/menu/menu-toggle.directive.d.ts

@@ -30,6 +30,7 @@ export declare class MenuToggleDirective implements OnDestroy, AfterContentInit
     set positions(val: ConnectionPositionPair[]);
     get positions(): ConnectionPositionPair[];
     private _positions;
+    readonly menuToggle: EventEmitter<boolean>;
     seamMenuTogglePositionsOffsetY: number;
     /** Event emitted when the associated menu is opened. */
     readonly menuOpened: EventEmitter<void>;
@@ -78,5 +79,5 @@ export declare class MenuToggleDirective implements OnDestroy, AfterContentInit
     /** Handles the cases where the user hovers over the trigger. */
     private _handleHover;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuToggleDirective, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuToggleDirective, "[seamMenuToggle]", ["seamMenuToggle"], { "menu": "seamMenuToggle"; "positions": "positions"; "seamMenuTogglePositionsOffsetY": "seamMenuTogglePositionsOffsetY"; }, { "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuToggleDirective, "[seamMenuToggle]", ["seamMenuToggle"], { "menu": "seamMenuToggle"; "positions": "positions"; "seamMenuTogglePositionsOffsetY": "seamMenuTogglePositionsOffsetY"; }, { "menuToggle": "menuToggle"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theseam/ui-common",
-  "version": "0.4.18",
+  "version": "0.4.19-beta.0",
   "peerDependencies": {
     "@angular/cdk": "^15.0.0",
     "@angular/common": "^15.0.0",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@fortawesome/angular-fontawesome": "~0.9.0",
     "@marklb/file-type": "~10.6.5",
-    "@marklb/ngx-datatable": "18.0.3",
+    "@marklb/ngx-datatable": "~18.0.5",
     "@marklb/ngx-loading": "^10.0.0",
     "@ng-select/ng-select": "~6.1.0",
     "@ng-bootstrap/ng-bootstrap": "~9.1.1",

package/styles/vendor/ngx-datatable/_ngx-datatable.scss

@@ -142,17 +142,19 @@
   .datatable-header,
   .datatable-body {
     .datatable-row-left {
-      background-color: $datatable-background;
-      background-position: 100% 0;
-      background-repeat: repeat-y;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
+      background-color: $datatable-left-background;
+    }
+
+    .datatable-row-even .datatable-row-left {
+      background-color: $datatable-left-row-even-background;
     }
 
     .datatable-row-right {
-      background-position: 0 0;
-      background-color: $datatable-background;
-      background-repeat: repeat-y;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
+      background-color: $datatable-right-background;
+    }
+
+    .datatable-row-even .datatable-row-right {
+      background-color: $datatable-right-row-even-background;
     }
   }
 
@@ -268,6 +270,9 @@
         color: $datatable-body-cell-color;
         font-size: $datatable-body-cell-font-size;
         font-weight: $datatable-body-cell-font-weight;
+        .datatable-body-cell-label {
+          height: 100%;
+        }
       }
       .datatable-body-group-cell {
         vertical-align: top;
@@ -476,13 +481,51 @@
 // }
 
 .datatable-action-button {
-  color: $datatable-action-button-color;
-  background-color: $datatable-action-button-background;
-  box-shadow: $datatable-action-button-box-shadow;
-  &:hover {
-    color: $datatable-action-button-hover-color;
-    background-color: $datatable-action-button-hover-background;
+  flex: 0 0 auto;
+
+  @if $datatable-action-button-outline {
+    @include button-outline-variant(
+      $color: $datatable-action-button-outline-color,
+      $color-hover: $datatable-action-button-outline-color-hover,
+      $active-background: $datatable-action-button-outline-active-background,
+      $active-border: $datatable-action-button-outline-active-border
+    );
+
+    // allow variable override for outline button bg
+    background: $datatable-action-button-outline-background;
+
+  } @else {
+    @include button-variant(
+      $background: $datatable-action-button-background,
+      $border: $datatable-action-button-border,
+      $hover-background: $datatable-action-button-hover-background,
+      $hover-border: $datatable-action-button-hover-border,
+      $active-background: $datatable-action-button-active-background,
+      $active-border: $datatable-action-button-active-border
+    );
+
+    // allow variable override for solid button color
+    color: $datatable-action-button-color;
+
+    &:hover {
+      color: $datatable-action-button-hover-color;
+    }
+
+    &:not(:disabled):not(.disabled):active {
+      color: $datatable-action-button-active-color;
+    }
   }
+
+  box-shadow: $datatable-action-button-box-shadow;
+  font-size: $datatable-action-button-font-size;
+  line-height: $datatable-action-button-line-height;
+
+  width: $datatable-action-button-width;
+  height: $datatable-action-button-height;
+
+  padding: $datatable-action-button-padding;
+  border-radius: $datatable-action-button-border-radius;
+  text-align: $datatable-action-button-text-align;
 }
 
 /**