@theseam/ui-common 0.4.12-beta.0 → 0.4.13

package/framework/base-layout/base-layout.component.scss

@@ -11,7 +11,8 @@ seam-base-layout {
     top: 0;
     bottom: 0;
     left: 0;
-    z-index: 999;
+    float: left;
+    z-index: 9999;
   }
 
   .base-layout-side-bar-container {
@@ -52,23 +53,6 @@ seam-base-layout {
 
     .base-layout-content-container-header {
       flex: 0 0 auto;
-      background: $base-header-background;
-      margin: $base-header-margin;
-      padding: $base-header-padding;
-      border-radius: $base-header-border-radius;
-      overflow: hidden;
-      &-left {
-        background: $base-header-left-bg;
-        padding: $base-header-left-padding;
-        margin: $base-header-left-margin;
-        border-radius: $base-header-left-border-radius;
-      }
-      &-right {
-        background: $base-header-right-bg;
-        padding: $base-header-right-padding;
-        margin: $base-header-right-margin;
-        border-radius: $base-header-right-border-radius;
-      }
     }
 
     .base-layout-content-container-inner {
@@ -80,6 +64,14 @@ seam-base-layout {
     }
   }
 
+  .base-layout-content-container-header {
+    margin: $base-header-margin;
+    padding: $base-header-padding;
+    background: $base-header-background;
+    border-radius: $base-header-border-radius;
+    overflow: hidden;
+  }
+
   .btn-baselayout-action {
     margin: $base-action-margin;
     @include button-variant(

package/framework/base-layout/base-layout.module.d.ts

@@ -3,18 +3,17 @@ import * as i1 from "./base-layout.component";
 import * as i2 from "./directives/base-layout-content.directive";
 import * as i3 from "./directives/base-layout-side-bar.directive";
 import * as i4 from "./directives/base-layout-side-bar-footer.directive";
-import * as i5 from "./directives/base-layout-side-bar-header.directive";
-import * as i6 from "./directives/base-layout-top-bar.directive";
-import * as i7 from "./directives/base-layout-nav-toggle.directive";
-import * as i8 from "./directives/base-layout-content-header.directive";
-import * as i9 from "./directives/base-layout-content-footer.directive";
-import * as i10 from "@angular/common";
-import * as i11 from "@angular/cdk/portal";
-import * as i12 from "@theseam/ui-common/scrollbar";
-import * as i13 from "@theseam/ui-common/icon";
-import * as i14 from "@theseam/ui-common/buttons";
+import * as i5 from "./directives/base-layout-top-bar.directive";
+import * as i6 from "./directives/base-layout-nav-toggle.directive";
+import * as i7 from "./directives/base-layout-content-header.directive";
+import * as i8 from "./directives/base-layout-content-footer.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/cdk/portal";
+import * as i11 from "@theseam/ui-common/scrollbar";
+import * as i12 from "@theseam/ui-common/icon";
+import * as i13 from "@theseam/ui-common/buttons";
 export declare class TheSeamBaseLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamBaseLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamBaseLayoutModule, [typeof i1.TheSeamBaseLayoutComponent, typeof i2.BaseLayoutContentDirective, typeof i3.BaseLayoutSideBarDirective, typeof i4.BaseLayoutSideBarFooterDirective, typeof i5.BaseLayoutSideBarHeaderDirective, typeof i6.BaseLayoutTopBarDirective, typeof i7.BaseLayoutNavToggleDirective, typeof i8.BaseLayoutContentHeaderDirective, typeof i9.BaseLayoutContentFooterDirective], [typeof i10.CommonModule, typeof i11.PortalModule, typeof i12.TheSeamScrollbarModule, typeof i13.TheSeamIconModule, typeof i14.TheSeamButtonsModule], [typeof i1.TheSeamBaseLayoutComponent, typeof i2.BaseLayoutContentDirective, typeof i3.BaseLayoutSideBarDirective, typeof i4.BaseLayoutSideBarFooterDirective, typeof i5.BaseLayoutSideBarHeaderDirective, typeof i6.BaseLayoutTopBarDirective, typeof i7.BaseLayoutNavToggleDirective, typeof i8.BaseLayoutContentHeaderDirective, typeof i9.BaseLayoutContentFooterDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamBaseLayoutModule, [typeof i1.TheSeamBaseLayoutComponent, typeof i2.BaseLayoutContentDirective, typeof i3.BaseLayoutSideBarDirective, typeof i4.BaseLayoutSideBarFooterDirective, typeof i5.BaseLayoutTopBarDirective, typeof i6.BaseLayoutNavToggleDirective, typeof i7.BaseLayoutContentHeaderDirective, typeof i8.BaseLayoutContentFooterDirective], [typeof i9.CommonModule, typeof i10.PortalModule, typeof i11.TheSeamScrollbarModule, typeof i12.TheSeamIconModule, typeof i13.TheSeamButtonsModule], [typeof i1.TheSeamBaseLayoutComponent, typeof i2.BaseLayoutContentDirective, typeof i3.BaseLayoutSideBarDirective, typeof i4.BaseLayoutSideBarFooterDirective, typeof i5.BaseLayoutTopBarDirective, typeof i6.BaseLayoutNavToggleDirective, typeof i7.BaseLayoutContentHeaderDirective, typeof i8.BaseLayoutContentFooterDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamBaseLayoutModule>;
 }

package/framework/base-layout/directives/base-layout-nav-toggle.directive.d.ts

@@ -1,22 +1,17 @@
-import { ChangeDetectorRef, OnInit } from '@angular/core';
 import type { ITheSeamBaseLayoutRef } from '../base-layout-ref';
 import * as i0 from "@angular/core";
 /**
  * Can be used to toggle the expand state of the registered nav.
  */
-export declare class BaseLayoutNavToggleDirective implements OnInit {
-    private readonly _cdr;
+export declare class BaseLayoutNavToggleDirective {
     baseLayout: ITheSeamBaseLayoutRef | undefined;
     get _attrType(): string | null | undefined;
     type: string | undefined | null;
     get _attrAriaLabel(): string | null;
     /** Screenreader label for the button. */
     ariaLabel: string | undefined | null;
-    _toggleClass: boolean;
-    _expandedClass: boolean;
     _onClick(): void;
-    constructor(_cdr: ChangeDetectorRef, _baseLayout: ITheSeamBaseLayoutRef);
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaseLayoutNavToggleDirective, [null, { optional: true; }]>;
+    constructor(_baseLayout: ITheSeamBaseLayoutRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseLayoutNavToggleDirective, [{ optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseLayoutNavToggleDirective, "button[seamBaseLayoutNavToggle]", ["seamBaseLayoutNavToggle"], { "type": "type"; "ariaLabel": "aria-label"; }, {}, never, never, false, never>;
 }

package/framework/base-layout/index.d.ts

@@ -5,7 +5,6 @@ export * from './directives/base-layout-nav-toggle.directive';
 export * from './directives/base-layout-side-bar-footer.directive';
 export * from './directives/base-layout-side-bar.directive';
 export * from './directives/base-layout-top-bar.directive';
-export * from './directives/base-layout-side-bar-header.directive';
 export * from './base-layout.component';
 export * from './base-layout.module';
 export * from './base-layout-nav';

package/framework/base-layout/styles/_variables.scss

@@ -1,25 +1,8 @@
-// Header Bar Styles
 $base-header-margin: .25rem !default;
 $base-header-padding: 0 !default;
 $base-header-background: none !default;
 $base-header-border-radius: 0 !default;
 
-
-// Left Side
-$base-header-left-bg: none !default;
-$base-header-left-padding: 0rem !default;
-$base-header-left-margin: 0 !default;
-$base-header-left-border-radius: 0 !default;
-
-
-// Right Side
-$base-header-right-bg: none !default;
-$base-header-right-padding: 0rem !default;
-$base-header-right-margin: 0 !default;
-$base-header-right-border-radius: 0 !default;
-
-
-// Right Side Action Buttons
 $base-action-margin: 0 0 0 .25rem !default;
 $base-action-bg: $gray-200 !default;
 $base-action-hover-bg: #d3d9df !default;
@@ -29,15 +12,11 @@ $base-action-padding-x: 1rem !default;
 $base-action-padding-y: .5rem !default;
 $base-action-border-radius: .25rem !default;
 
-
-// Top Bar Wrapper
 $base-layout-top-bar-container-border-top: none !default;
 $base-layout-top-bar-container-border-right: none !default;
 $base-layout-top-bar-container-border-bottom: 1px solid #dee2e6 !default;
 $base-layout-top-bar-container-border-left: none !default;
 
-
-// Side Bar Wrapper
 $base-layout-side-bar-container-border-top: none !default;
 $base-layout-side-bar-container-border-right: 1px solid #dee2e6 !default;
 $base-layout-side-bar-container-border-bottom: none !default;

package/framework/public-api.d.ts

@@ -4,4 +4,3 @@ 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,13 +1,21 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
-import { SeamIcon } from '@theseam/ui-common/icon';
+import type { SeamIcon } from '@theseam/ui-common/icon';
 import type { ThemeTypes } from '@theseam/ui-common/models';
 import { SideNavAccessor } from '../side-nav-tokens';
-import { ISideNavItem, SideNavItemBadgeTooltip, SideNavItemMenuItemTooltipConfig } from '../side-nav.models';
+import { ISideNavItem, 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;
@@ -17,7 +25,6 @@ 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);
@@ -53,12 +60,12 @@ export declare class SideNavItemComponent implements OnDestroy {
     get _isActiveCssClass(): boolean;
     get _attrDataHierLevel(): number;
     readonly childGroupAnimState$: Observable<string>;
-    constructor(_sideNav: SideNavAccessor);
+    readonly compactAnimState$: Observable<string>;
+    constructor(_sideNav: SideNavAccessor, _parent?: SideNavItemComponent | undefined);
     ngOnDestroy(): void;
     get hasChildren(): boolean;
     toggleChildren(): void;
     _linkClicked(): void;
-    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>;
+    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>;
 }

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

@@ -22,10 +22,6 @@ 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 {
@@ -105,11 +101,11 @@ seam-side-nav-item {
 
   .side-nav-btn {
     font-weight: $font-weight-normal;
-    color: $seam-side-nav-item-toggle-color;
+    color: $seam-side-nav-item-color;
     text-decoration: $link-decoration;
 
     @include hover {
-      color: $seam-side-nav-item-toggle-color-hover;
+      color: $seam-side-nav-item-bg-color-hover;
       text-decoration: $link-hover-decoration;
     }
 
@@ -121,7 +117,7 @@ seam-side-nav-item {
 
     &:disabled,
     &.disabled {
-      color: $seam-side-nav-item-toggle-disabled-color;
+      color: $seam-side-nav-item-disabled-color;
       pointer-events: none;
     }
   }
@@ -144,6 +140,8 @@ 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,14 +1,12 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter, TemplateRef } from '@angular/core';
-import { SeamIcon } from '@theseam/ui-common/icon';
+import { EventEmitter } from '@angular/core';
 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"; "toggleIcon": "toggleIcon"; "toggleTpl": "toggleTpl"; }, { "toggleExpand": "toggleExpand"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavToggleComponent, "seam-side-nav-toggle", never, { "expanded": "expanded"; }, { "toggleExpand": "toggleExpand"; }, never, ["*"], false, never>;
 }

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

@@ -4,14 +4,12 @@ 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: $seam-side-nav-toggle-height;
+  height: 45px;
   width: 100%;
 
   //
@@ -20,6 +18,11 @@ 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,7 +3,6 @@ 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';
@@ -16,24 +15,16 @@ 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;
@@ -46,8 +37,6 @@ 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);
@@ -58,7 +47,6 @@ 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"; "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>;
+    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>;
 }

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

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

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

@@ -1,6 +1,7 @@
 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;
@@ -61,13 +62,6 @@ 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,8 +2,16 @@ 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, never, [typeof i1.SideNavItemComponent, typeof i2.SideNavComponent, typeof i3.SideNavToggleComponent], [typeof i1.SideNavItemComponent, typeof i2.SideNavComponent, typeof i3.SideNavToggleComponent]>;
+    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 ɵinj: i0.ɵɵInjectorDeclaration<TheSeamSideNavModule>;
 }

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

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

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

@@ -16,12 +16,6 @@ $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;
@@ -34,6 +28,4 @@ $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,7 +1,5 @@
 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-item.directive.d.ts

@@ -1,11 +1,8 @@
 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, { "seamTopBarItem": "seamTopBarItem"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TopBarItemDirective, "[seamTopBarItem]", never, {}, {}, never, never, false, never>;
 }

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

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

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

@@ -1,13 +1,11 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, OnDestroy, QueryList } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { 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.
@@ -33,10 +31,6 @@ 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. */
@@ -53,26 +47,10 @@ 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 */
-    _rightItems: BehaviorSubject<TopBarItemDirective[]>;
-    /** Additional templates to display on right side of top bar */
-    rightItems$: Observable<TopBarItemDirective[]>;
+    _items$?: Observable<TopBarItemDirective[]>;
     /** @ignore */
     isMobile$: Observable<boolean>;
     constructor(_layout: TheSeamLayoutService);
@@ -81,5 +59,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"; "hasTopBarMenuButton": "hasTopBarMenuButton"; "profileIcon": "profileIcon"; "toggleIcon": "toggleIcon"; "navToggleAlign": "navToggleAlign"; }, {}, ["_topBarMenu", "_topBarMenuBtnDetailTpl", "_topBarCompactMenuBtnDetailTpl", "_topBarNavToggleBtnDetailTpl", "_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"; "profileIcon": "profileIcon"; }, {}, ["_topBarMenu", "_topBarMenuBtnDetailTpl", "_topBarItems"], never, false, never>;
 }

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

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

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

@@ -5,17 +5,15 @@ 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 "./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";
+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";
 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.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 ɵ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 ɵinj: i0.ɵɵInjectorDeclaration<TheSeamTopBarModule>;
 }