@theseam/ui-common 0.4.28-beta.4 → 0.4.28

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;
@@ -15,11 +23,15 @@ export declare class SideNavItemComponent implements OnDestroy {
     static ngAcceptInputType_active: BooleanInput;
     private readonly _ngUnsubscribe;
     readonly faAngleLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    readonly _linkHistoryState: {
+        seamReload: boolean;
+        triggeredByNavBar: boolean;
+    };
     itemType: 'divider' | 'basic' | 'link' | 'button' | 'title' | undefined | null;
     icon: SeamIcon | undefined | null;
-    hideEmptyIcon: boolean | undefined | null;
     label: string | undefined | null;
     active: boolean;
+    activeNavigatable: boolean;
     set link(value: string | undefined | null);
     get link(): string | undefined | null;
     private readonly _link;
@@ -51,14 +63,15 @@ export declare class SideNavItemComponent implements OnDestroy {
     menuItemTooltipConfig: SideNavItemMenuItemTooltipConfig | undefined | null;
     menuItemTooltipDisabled: boolean | undefined | null;
     get _isActiveCssClass(): boolean;
+    get _isClickableWhenActiveCssClass(): 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"; "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>;
 }

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 {
@@ -77,9 +73,14 @@ seam-side-nav-item {
       background-color: $seam-side-nav-item-bg-color-hover;
     }
 
-    &.active {
+    &.active:not(.active-clickable) {
       pointer-events: none;
       cursor: default;
+
+      .side-nav-item--badge {
+        pointer-events: none;
+        cursor: default;
+      }
     }
   }
 
@@ -105,11 +106,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,8 +122,13 @@ seam-side-nav-item {
 
     &:disabled,
     &.disabled {
-      color: $seam-side-nav-item-toggle-disabled-color;
+      color: $seam-side-nav-item-disabled-color;
       pointer-events: none;
+
+      .side-nav-item--badge {
+        pointer-events: none;
+        cursor: default;
+      }
     }
   }
 
@@ -144,6 +150,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-tokens.d.ts

@@ -4,3 +4,11 @@ export interface SideNavAccessor {
     collapse(): void;
 }
 export declare const THESEAM_SIDE_NAV_ACCESSOR: InjectionToken<SideNavAccessor>;
+export interface SideNavConfig {
+    /**
+     * Default: false
+     */
+    activeNavigatable: boolean;
+}
+export declare const THESEAM_SIDE_NAV_CONFIG: InjectionToken<SideNavConfig>;
+export declare const DEFAULT_SIDE_NAV_CONFIG: SideNavConfig;

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

@@ -1,18 +1,24 @@
 import { ISideNavBasic, ISideNavButton, ISideNavDivider, ISideNavItem, ISideNavItemState, ISideNavLink, ISideNavTitle, SideNavItemCanHaveChildren, SideNavItemCanHaveState } from './side-nav.models';
-export declare function isNavItemType(item: ISideNavItem, type: 'title'): item is ISideNavTitle;
-export declare function isNavItemType(item: ISideNavItem, type: 'divider'): item is ISideNavDivider;
-export declare function isNavItemType(item: ISideNavItem, type: 'basic'): item is ISideNavBasic;
-export declare function isNavItemType(item: ISideNavItem, type: 'link'): item is ISideNavLink;
-export declare function isNavItemType(item: ISideNavItem, type: 'button'): item is ISideNavButton;
+import { SideNavConfig } from './side-nav-tokens';
+interface NavItemTypeMap {
+    title: ISideNavTitle;
+    divider: ISideNavDivider;
+    basic: ISideNavBasic;
+    link: ISideNavLink;
+    button: ISideNavButton;
+}
+export declare function isNavItemType<T extends keyof NavItemTypeMap>(item: ISideNavItem, type: T): item is NavItemTypeMap[T];
 export declare function isNavItemActive(item: ISideNavItem): boolean;
 export declare function isExpanded(item: ISideNavItem): boolean;
 export declare function hasChildren(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink) & Required<SideNavItemCanHaveChildren>;
 export declare function canHaveChildren(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink);
 export declare function hasActiveChild(item: ISideNavItem): boolean;
 export declare function hasExpandedChild(item: ISideNavItem): boolean;
-export declare function canBeActive(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink);
+export declare function canBeActive(item: ISideNavItem): item is (ISideNavButton | ISideNavLink);
 export declare function canExpand(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink);
 export declare function findLinkItems(items: ISideNavItem[]): ISideNavLink[];
 export declare function setItemStateProp<K extends keyof ISideNavItemState>(item: ISideNavItem, prop: K, value: ISideNavItemState[K]): void;
 export declare function getItemStateProp<K extends keyof ISideNavItemState>(item: ISideNavItem, prop: K): ISideNavItemState[K];
 export declare function setDefaultState(item: ISideNavItem): ISideNavItem & Required<SideNavItemCanHaveState>;
+export declare function applyItemConfig(item: ISideNavItem, config: SideNavConfig): ISideNavItem;
+export {};

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

@@ -3,8 +3,8 @@ 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';
 import { TheSeamSideNavService } from './side-nav.service';
 import * as i0 from "@angular/core";
@@ -13,27 +13,20 @@ export declare class SideNavComponent implements OnInit, OnDestroy, ITheSeamBase
     private readonly _viewContainerRef;
     private readonly _layout;
     private readonly _sideNav;
-    private readonly _baseLayoutRef;
+    private readonly _config?;
+    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,11 +39,9 @@ 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);
+    constructor(_viewContainerRef: ViewContainerRef, _layout: TheSeamLayoutService, _sideNav: TheSeamSideNavService, _config?: SideNavConfig | undefined, _baseLayoutRef?: ITheSeamBaseLayoutRef | undefined);
     ngOnInit(): void;
     ngOnDestroy(): void;
     expand(): void;
@@ -58,7 +49,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 ɵ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>;
 }

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;
@@ -13,6 +14,17 @@ export interface SideNavItemCanHaveState {
      */
     __state?: ISideNavItemState;
 }
+export interface SideNavItemCanBeActive {
+    /**
+     * Can navigate, when active.
+     *
+     * Enable if you need to receive events when the item is already active, such
+     * as observing `NavigationSkipped` router events.
+     *
+     * Default: false
+     */
+    activeNavigatable?: boolean;
+}
 export interface SideNavItemCanHaveChildren {
     children?: ISideNavItem[];
 }
@@ -42,7 +54,7 @@ export interface ISideNavBasic extends ISideNavItemBase<'basic'>, SideNavItemCan
     icon?: SeamIcon;
     label: string;
 }
-export interface ISideNavLink extends ISideNavItemBase<'link'>, Partial<Pick<UrlCreationOptions, 'queryParams' | 'fragment' | 'queryParamsHandling' | 'preserveFragment'>>, SideNavItemCanHaveChildren {
+export interface ISideNavLink extends ISideNavItemBase<'link'>, Partial<Pick<UrlCreationOptions, 'queryParams' | 'fragment' | 'queryParamsHandling' | 'preserveFragment'>>, SideNavItemCanHaveChildren, SideNavItemCanBeActive {
     icon?: SeamIcon;
     label: string;
     link?: any[] | string;
@@ -51,7 +63,7 @@ export interface ISideNavLink extends ISideNavItemBase<'link'>, Partial<Pick<Url
      */
     matchOptions?: Partial<IsActiveMatchOptions>;
 }
-export interface ISideNavButton extends ISideNavItemBase<'button'> {
+export interface ISideNavButton extends ISideNavItemBase<'button'>, SideNavItemCanBeActive {
     onClick: (event: MouseEvent) => void;
 }
 export type ISideNavItem = ISideNavTitle | ISideNavDivider | ISideNavBasic | ISideNavLink | ISideNavButton;
@@ -61,13 +73,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>;
 }