@theseam/ui-common 0.4.22 → 0.4.24-beta.0

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

@@ -11,8 +11,7 @@ seam-base-layout {
     top: 0;
     bottom: 0;
     left: 0;
-    float: left;
-    z-index: 9999;
+    z-index: 999;
   }
 
   .base-layout-side-bar-container {
@@ -53,6 +52,23 @@ 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 {
@@ -64,14 +80,6 @@ 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,17 +3,18 @@ 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-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";
+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";
 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.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 ɵ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 ɵinj: i0.ɵɵInjectorDeclaration<TheSeamBaseLayoutModule>;
 }

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

@@ -1,17 +1,22 @@
+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 {
+export declare class BaseLayoutNavToggleDirective implements OnInit {
+    private readonly _cdr;
     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(_baseLayout: ITheSeamBaseLayoutRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaseLayoutNavToggleDirective, [{ optional: true; }]>;
+    constructor(_cdr: ChangeDetectorRef, _baseLayout: ITheSeamBaseLayoutRef);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseLayoutNavToggleDirective, [null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseLayoutNavToggleDirective, "button[seamBaseLayoutNavToggle]", ["seamBaseLayoutNavToggle"], { "type": "type"; "ariaLabel": "aria-label"; }, {}, never, never, false, never>;
 }

package/framework/base-layout/directives/base-layout-side-bar-header.directive.d.ts

@@ -0,0 +1,9 @@
+import { ElementRef } from '@angular/core';
+import { HasElementRef } from '@theseam/ui-common/core';
+import * as i0 from "@angular/core";
+export declare class BaseLayoutSideBarHeaderDirective implements HasElementRef {
+    _elementRef: ElementRef;
+    constructor(_elementRef: ElementRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseLayoutSideBarHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseLayoutSideBarHeaderDirective, "[seamBaseLayoutSideBarHeader]", never, {}, {}, never, never, false, never>;
+}

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

@@ -5,6 +5,7 @@ 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,8 +1,25 @@
+// 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;
@@ -12,11 +29,15 @@ $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/nav/_nav-theme.scss

@@ -0,0 +1,4 @@
+@import './styles/utilities';
+
+@import './horizontal-nav/horizontal-nav.component';
+@import './nav-item/nav-item.component';

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

@@ -0,0 +1,25 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { INavItem, NavItemChildAction, NavItemExpandAction, NavItemExpandedEvent } from '../nav.models';
+import { TheSeamNavService } from '../nav.service';
+import * as i0 from "@angular/core";
+export declare class HorizontalNavComponent implements OnDestroy {
+    private readonly _nav;
+    static ngAcceptInputType_hasHeaderToggle: BooleanInput;
+    private readonly _ngUnsubscribe;
+    get items(): INavItem[];
+    set items(value: INavItem[]);
+    private _items;
+    readonly items$: Observable<INavItem[]>;
+    hideEmptyIcon: boolean | undefined | null;
+    hierLevel: number;
+    childAction: NavItemChildAction;
+    expandAction: NavItemExpandAction;
+    navItemExpanded: EventEmitter<NavItemExpandedEvent>;
+    constructor(_nav: TheSeamNavService);
+    ngOnDestroy(): void;
+    _navItemExpanded(item: INavItem, expanded: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HorizontalNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HorizontalNavComponent, "seam-horizontal-nav", never, { "items": "items"; "hideEmptyIcon": "hideEmptyIcon"; "hierLevel": "hierLevel"; "childAction": "childAction"; "expandAction": "expandAction"; }, { "navItemExpanded": "navItemExpanded"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,50 @@
+@import '../styles/utilities';
+
+seam-horizontal-nav,
+.seam-horizontal-nav {
+  display: block;
+  height: 100%;
+
+  // Prevent main page content layer overlapping the nav while animating.
+  position: relative;
+  z-index: 2;
+
+  .nav-inner-wrapper {
+    background: $seam-nav-bg;
+    height: 100%;
+  }
+
+  .nav-backdrop {
+    background: $seam-nav-background-bg-color;
+    width: 100vw;
+    height: 100vh;
+
+    &.nav-backdrop-hidden {
+      display: none;
+      width: 0;
+      height: 0;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .nav-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex-wrap: nowrap;
+  }
+
+  .nav-items-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1 1 100%;
+  }
+
+  .nav-items-row {
+    height: 100%;
+    display: flex;
+    padding: $seam-nav-row-padding;
+  }
+}

package/framework/nav/index.d.ts

@@ -0,0 +1,5 @@
+export * from './nav-item/nav-item.component';
+export * from './horizontal-nav/horizontal-nav.component';
+export * from './nav.models';
+export * from './nav.module';
+export * from './nav-utils';

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

@@ -0,0 +1,74 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { EventEmitter, OnDestroy } from '@angular/core';
+import type { SeamIcon } from '@theseam/ui-common/icon';
+import type { ThemeTypes } from '@theseam/ui-common/models';
+import { MenuComponent } from '@theseam/ui-common/menu';
+import { INavItem, NavItemBadgeTooltip, NavItemChildAction, NavItemExpandAction } from '../nav.models';
+import { TheSeamNavService } from '../nav.service';
+import * as i0 from "@angular/core";
+export declare class NavItemComponent implements OnDestroy {
+    private readonly _nav;
+    static ngAcceptInputType_hierLevel: NumberInput;
+    static ngAcceptInputType_indentSize: NumberInput;
+    static ngAcceptInputType_expanded: BooleanInput;
+    static ngAcceptInputType_compact: BooleanInput;
+    static ngAcceptInputType_active: BooleanInput;
+    private readonly _ngUnsubscribe;
+    readonly faAngleLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    item: INavItem | undefined | null;
+    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);
+    get link(): string | undefined | null;
+    private readonly _link;
+    readonly link$: import("rxjs").Observable<string | null | undefined>;
+    queryParams: {
+        [k: string]: any;
+    } | undefined | null;
+    children: INavItem[] | undefined | null;
+    hierLevel: number;
+    indentSize: number;
+    set expanded(value: boolean);
+    get expanded(): boolean;
+    private readonly _expanded;
+    readonly expanded$: import("rxjs").Observable<boolean>;
+    set compact(value: boolean);
+    get compact(): boolean;
+    private readonly _compact;
+    readonly compact$: import("rxjs").Observable<boolean>;
+    focused: boolean;
+    badgeText: string | undefined | null;
+    badgeTheme: ThemeTypes | undefined | null;
+    /**
+     * Content to provide to assistive technology, such as screen readers.
+     */
+    badgeSrContent: string | undefined | null;
+    get badgeTooltip(): string | NavItemBadgeTooltip | undefined | null;
+    set badgeTooltip(value: string | NavItemBadgeTooltip | undefined | null);
+    private _badgeTooltip;
+    childAction: NavItemChildAction;
+    expandAction: NavItemExpandAction;
+    navItemExpanded: EventEmitter<boolean>;
+    get _isActiveCssClass(): boolean;
+    get _isChildActiveCssClass(): boolean;
+    get _isExpandedCssClass(): boolean;
+    get _isFocusedCssClass(): boolean;
+    get _attrDataHierLevel(): number;
+    _menu?: MenuComponent;
+    _navItems?: NavItemComponent[];
+    constructor(_nav: TheSeamNavService);
+    ngOnDestroy(): void;
+    get hasChildren(): boolean;
+    get hasActiveChild(): boolean;
+    get hasMenuToggle(): boolean;
+    get menuTpl(): MenuComponent | undefined;
+    get hasExpandingChildren(): boolean;
+    _toggleChildren(event: Event): void;
+    _menuEvent(menuExpanded: any): void;
+    get showIconBlock(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavItemComponent, "seam-nav-item", ["seamNavItem"], { "item": "item"; "itemType": "itemType"; "icon": "icon"; "hideEmptyIcon": "hideEmptyIcon"; "label": "label"; "active": "active"; "link": "link"; "queryParams": "queryParams"; "children": "children"; "hierLevel": "hierLevel"; "indentSize": "indentSize"; "expanded": "expanded"; "compact": "compact"; "focused": "focused"; "badgeText": "badgeText"; "badgeTheme": "badgeTheme"; "badgeSrContent": "badgeSrContent"; "badgeTooltip": "badgeTooltip"; "childAction": "childAction"; "expandAction": "expandAction"; }, { "navItemExpanded": "navItemExpanded"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,203 @@
+@import '../styles/utilities';
+
+seam-nav-item {
+  display: block;
+  transition: 250ms ease-in-out background-color;
+  text-align: $seam-nav-item-text-align;
+  border-radius: $seam-nav-item-border-radius;
+  overflow: hidden;
+  background: $seam-nav-item-bg-color;
+  margin: $seam-nav-item-margin;
+
+  &.seam-nav-item--expanded {
+    background-color: $seam-nav-item-bg-color-expanded;
+    .nav-link {
+      color: $seam-nav-item-color-expanded;
+    }
+  }
+
+  &.seam-nav-item--child-active {
+    background-color: $seam-nav-item-bg-color-child-active;
+    .nav-link {
+      color: $seam-nav-item-color-child-active;
+    }
+  }
+
+  &.seam-nav-item--active {
+    background-color: $seam-nav-item-bg-color-active;
+
+    .active,
+    &:active,
+    .nav-item.active:hover {
+      background-color: $seam-nav-item-bg-color-active;
+    }
+
+    .nav-item {
+      &:hover {
+        background-color: $seam-nav-item-bg-color-hover;
+      }
+    }
+
+    .nav-link {
+      color: $seam-nav-item-color-active;
+    }
+  }
+
+  .badge {
+    vertical-align: middle;
+  }
+
+  &:not(.nav-item--icon) {
+    .nav-item--badge {
+      pointer-events: all;
+      margin-left: 5px;
+      margin-right: 3px;
+    }
+  }
+
+  .nav-item--icon {
+    position: relative;
+    width: 24px;
+    max-width: 24px;
+    min-width: 24px;
+    height: 24px;
+    max-height: 24px;
+    min-height: 24px;
+    text-align: center;
+
+    margin-right: .5rem;
+
+    .nav-item--badge {
+      top: -4px;
+      right: -4px;
+      position: absolute;
+
+      .badge:empty {
+        display: block;
+        width: 8px;
+        height: 8px;
+        padding: 0;
+      }
+
+      &.nav-item--badge-no-icon {
+        top: 0px;
+        right: 0px;
+      }
+    }
+  }
+
+  .nav-item {
+    transition: 250ms ease-in-out background-color;
+
+    &:hover {
+      background-color: $seam-nav-item-bg-color-hover;
+    }
+
+    &.active {
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  a.nav-item:not([href]):not([tabindex]) {
+    color: $seam-nav-item-disabled-color;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .nav-link {
+    color: $seam-nav-item-color;
+  }
+
+  .nav-btn {
+    font-weight: $font-weight-normal;
+    color: $seam-nav-toggle-btn-color;
+    text-decoration: $link-decoration;
+    border-radius: $seam-nav-toggle-btn-border-radius;
+    border:
+      $seam-nav-toggle-btn-border-width
+      $seam-nav-toggle-btn-border-style
+      $seam-nav-toggle-btn-border-color;
+
+    @include hover {
+      color: $seam-nav-toggle-btn-color-hover;
+      text-decoration: $link-hover-decoration;
+    }
+
+    &:focus,
+    &.focus {
+      text-decoration: $link-hover-decoration;
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: $seam-nav-item-disabled-color;
+      pointer-events: none;
+    }
+  }
+
+  // Add the button focus like a link when navigating with keyboard.
+  .cdk-keyboard-focused {
+    // outline: -webkit-focus-ring-color auto 1px;
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  .nav-item--toggle-btn-container {
+    transition: 250ms ease-in-out background-color;
+    padding: $seam-nav-toggle-btn-padding;
+  }
+  button.nav-item--toggle-btn-container {
+    &:hover {
+      background-color: $seam-nav-item-bg-color-hover;
+    }
+  }
+
+  .nav-item--toggle-btn {
+    .svg-inline--fa {
+      transition: 100ms ease-in-out transform;
+      transform: $seam-nav-toggle-btn-transform;
+    }
+
+    @if $seam-nav-toggle-btn-use-transform-active {
+      &.nav-item--toggle-btn-expanded {
+        .svg-inline--fa {
+          transform: $seam-nav-toggle-btn-transform-active;
+        }
+      }
+    }
+  }
+
+  .nav--group {
+    will-change: height;
+    overflow: hidden;
+  }
+
+  @for $i from 1 through 9 {
+    .nav--group--level-#{$i} {
+      background-color: darken($seam-nav-bg-color, ($i * $seam-nav-group-bg-variation-amount));
+    }
+  }
+
+  .nav-item--divider {
+    display: block;
+    border-top: $seam-nav-divider-size solid $seam-nav-divider-color;
+    width: 100%;
+  }
+
+  .nav-item--title {
+    color: $seam-nav-title-color;
+    font-size: $seam-nav-title-font-size;
+    padding-left: $seam-nav-title-padding-left;
+  }
+
+  // without a set position, these labels can cause unnecessary scrollbars
+  .sr-only {
+    top: 0;
+    left: 0;
+  }
+}
+

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

@@ -0,0 +1,20 @@
+import { INavBasic, INavButton, INavDivider, INavItem, INavItemState, INavLink, INavTitle, NavItemCanHaveChildren, NavItemCanHaveState } from './nav.models';
+export declare function isHorizontalNavItemType(item: INavItem, type: 'title'): item is INavTitle;
+export declare function isHorizontalNavItemType(item: INavItem, type: 'divider'): item is INavDivider;
+export declare function isHorizontalNavItemType(item: INavItem, type: 'basic'): item is INavBasic;
+export declare function isHorizontalNavItemType(item: INavItem, type: 'link'): item is INavLink;
+export declare function isHorizontalNavItemType(item: INavItem, type: 'button'): item is INavButton;
+export declare function isHorizontalNavItemActive(item: INavItem): boolean;
+export declare function isHorizontalNavItemExpanded(item: INavItem): boolean;
+export declare function isHorizontalNavItemFocused(item: INavItem): boolean;
+export declare function horizontalNavItemHasChildren(item: INavItem): item is (INavBasic | INavLink) & Required<NavItemCanHaveChildren>;
+export declare function horizontalNavItemCanHaveChildren(item: INavItem): item is (INavBasic | INavLink);
+export declare function horizontalNavItemHasActiveChild(item: INavItem): boolean;
+export declare function horizontalNavItemHasExpandedChild(item: INavItem): boolean;
+export declare function horizontalNavItemCanBeActive(item: INavItem): item is (INavBasic | INavLink);
+export declare function horizontalNavItemCanExpand(item: INavItem): item is (INavBasic | INavLink);
+export declare function findHorizontalNavLinkItems(items: INavItem[]): INavLink[];
+export declare function setHorizontalNavItemStateProp<K extends keyof INavItemState>(item: INavItem, prop: K, value: INavItemState[K]): void;
+export declare function getHorizontalNavItemStateProp<K extends keyof INavItemState>(item: INavItem, prop: K): INavItemState[K];
+export declare function setDefaultHorizontalNavItemState(item: INavItem): INavItem & Required<NavItemCanHaveState>;
+export declare function areSameHorizontalNavItem(item1: INavItem | undefined, item2: INavItem | undefined): boolean;

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

@@ -0,0 +1,77 @@
+import { IsActiveMatchOptions, UrlCreationOptions } from '@angular/router';
+import { SeamIcon } from '@theseam/ui-common/icon';
+import type { ThemeTypes } from '@theseam/ui-common/models';
+export interface INavItemState {
+    active: boolean;
+    expanded: boolean;
+    focused: boolean;
+}
+export interface NavItemCanHaveState {
+    /**
+     * This prop is managed by the Nav. If manually set it will be overwritten.
+     *
+     * @ignore
+     */
+    __state?: INavItemState;
+}
+export interface NavItemCanHaveChildren {
+    children?: INavItem[];
+}
+export interface INavItemBase<T extends string> extends NavItemCanHaveState {
+    /**
+     * default: 'route'
+     */
+    itemType?: T;
+    badge?: INavBadge;
+}
+export interface INavTitle extends INavItemBase<'title'> {
+    label?: string;
+}
+export interface INavDivider extends INavItemBase<'divider'> {
+    label?: string;
+}
+export interface INavBadge {
+    text?: string;
+    theme?: ThemeTypes;
+    /**
+     * Content to provide to assistive technology, such as screen readers.
+     */
+    srContent?: string;
+    tooltip?: string | NavItemBadgeTooltip;
+}
+export interface INavBasic extends INavItemBase<'basic'>, NavItemCanHaveChildren {
+    icon?: SeamIcon;
+    label: string;
+}
+export interface INavLink extends INavItemBase<'link'>, Partial<Pick<UrlCreationOptions, 'queryParams' | 'fragment' | 'queryParamsHandling' | 'preserveFragment'>>, NavItemCanHaveChildren {
+    icon?: SeamIcon;
+    label: string;
+    link?: any[] | string;
+    /**
+     * Default: { paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored' }
+     */
+    matchOptions?: Partial<IsActiveMatchOptions>;
+}
+export interface INavButton extends INavItemBase<'button'> {
+    onClick: (event: MouseEvent) => void;
+}
+export type INavItem = INavTitle | INavDivider | INavBasic | INavLink | INavButton;
+export interface NavItemStateChanged {
+    item: INavItem;
+    prop: keyof INavItemState;
+    prevValue: any;
+    newValue: any;
+}
+export interface NavItemBadgeTooltip {
+    tooltip?: string;
+    class?: string;
+    placement?: string;
+    container?: string;
+    disabled?: boolean;
+}
+export type NavItemChildAction = 'menu' | 'expand' | 'none' | null | undefined;
+export type NavItemExpandAction = 'toggle' | 'expandOnly' | null | undefined;
+export interface NavItemExpandedEvent {
+    navItem: INavItem;
+    expanded: boolean;
+}

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

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./nav-item/nav-item.component";
+import * as i2 from "./horizontal-nav/horizontal-nav.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/router";
+import * as i5 from "@theseam/ui-common/icon";
+import * as i6 from "@angular/cdk/a11y";
+import * as i7 from "@theseam/ui-common/scrollbar";
+import * as i8 from "@theseam/ui-common/layout";
+import * as i9 from "@ng-bootstrap/ng-bootstrap";
+import * as i10 from "@angular/cdk/portal";
+import * as i11 from "@theseam/ui-common/menu";
+export declare class TheSeamNavModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamNavModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamNavModule, [typeof i1.NavItemComponent, typeof i2.HorizontalNavComponent], [typeof i3.CommonModule, typeof i4.RouterModule, typeof i5.TheSeamIconModule, typeof i6.A11yModule, typeof i7.TheSeamScrollbarModule, typeof i8.TheSeamLayoutModule, typeof i9.NgbTooltipModule, typeof i10.PortalModule, typeof i11.TheSeamMenuModule], [typeof i1.NavItemComponent, typeof i2.HorizontalNavComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamNavModule>;
+}