npm - @theseam/ui-common - Versions diffs - 0.4.9 → 0.4.11 - Mend

@theseam/ui-common 0.4.9 → 0.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/fesm2020/theseam-ui-common-framework.mjs CHANGED Viewed

@@ -982,7 +982,7 @@ DashboardWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             // tslint:disable-next-line:no-use-before-declare
             useExisting: forwardRef(() => DashboardWidgetsComponent)
         },
-    ], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i6.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n  This is an ugly trick I am using to render the component into an <ng-content>\n  wrapped in an <ng-template> to move the component to different outlets without\n  reinitializing it. This way the widget won't reload when moving between\n  columns. When I remember how I programatically did this I will remove this\n  weirdness.\n -->\n <seam-dashboard-widget-container *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\" [def]=\"$any(item)\">\n  <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n  <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n  style=\"flex: 1410px;\"\n  [style.padding.px]=\"_gapStyleSize$ | async\"\n  (seamElemResized)=\"_resized($event)\"\n  cdkDropListGroup>\n  <div *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n    class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n    cdkDropList\n    [cdkDropListData]=\"col.items\"\n    (cdkDropListDropped)=\"drop($any($event))\">\n    <div *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n      class=\"dashboard-widgets-list-item\"\n      [attr.data-widget-id]=\"item.widgetId\"\n      cdkDrag\n      [cdkDragDisabled]=\"!widgetsDraggable\">\n      <div [style.margin.px]=\"_gapStyleSize$ | async\">\n        <seam-dashboard-widget-template-container [item]=\"item\"></seam-dashboard-widget-template-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n  <button seamButton theme=\"baselayout-action\" title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\" (click)=\"toggleDragging()\">\n    <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n  </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i6.ElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], DashboardWidgetsComponent.prototype, "widgetsDraggable", void 0);
@@ -1114,6 +1114,7 @@ class SideNavItemComponent {
                 this._badgeTooltip = {
                     tooltip: value,
                     placement: 'auto',
+                    container: 'body',
                     disabled: false
                 };
             }
@@ -1121,6 +1122,7 @@ class SideNavItemComponent {
                 this._badgeTooltip = {
                     ...value,
                     placement: value.placement || 'auto',
+                    container: value.container || 'body',
                     disabled: typeof value?.disabled === 'boolean'
                         ? value.disabled
                         : typeof value.tooltip !== 'string'
@@ -1171,7 +1173,7 @@ class SideNavItemComponent {
     }
 }
 SideNavItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavItemComponent, deps: [{ token: THESEAM_SIDE_NAV_ACCESSOR }, { token: SideNavItemComponent, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-SideNavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: { itemType: "itemType", icon: "icon", label: "label", active: "active", link: "link", queryParams: "queryParams", children: "children", hierLevel: "hierLevel", indentSize: "indentSize", expanded: "expanded", compact: "compact", badgeText: "badgeText", badgeTheme: "badgeTheme", badgeSrContent: "badgeSrContent", badgeTooltip: "badgeTooltip" }, host: { properties: { "class.seam-side-nav-item--active": "this._isActiveCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, exportAs: ["seamSideNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip"], exportAs: ["seamSideNavItem"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+SideNavItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: { 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" }, host: { properties: { "class.seam-side-nav-item--active": "this._isActiveCssClass", "attr.data-hier-level": "this._attrDataHierLevel" } }, exportAs: ["seamSideNavItem"], ngImport: i0, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [isMobile]=\"isMobile\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\"\n      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <div class=\"d-flex flex-row w-100\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n      [class.nav-link__compact]=\"compact\"\n      [routerLink]=\"link\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n        [class.nav-link__compact]=\"compact\"\n        [ngbTooltip]=\"label\"\n        [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n        [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n        [container]=\"$any(menuItemTooltipConfig)?.container\"\n        [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n        <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n        <div class=\"side-nav-item--icon\">\n          <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        </div>\n        <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n          {{ label }}\n        </span>\n        <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      </a>\n    </ng-template>\n\n    <button *ngIf=\"hasChildren && !compact\"\n      type=\"button\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n      (click)=\"toggleChildren()\"\n      [attr.aria-expanded]=\"expanded\"\n      cdkMonitorElementFocus>\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n      <span class=\"sr-only\">Group Toggle</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"isMobile || !badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i4$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
         trigger('childGroupAnim', [
             state(EXPANDED_STATE$1, style({ height: '*' })),
             state(COLLAPSED_STATE$1, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
@@ -1239,7 +1241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         //   ], { optional: true })
                         // ]),
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n    [class.nav-link__compact]=\"compact\"\n    [routerLink]=\"link\"\n    [queryParams]=\"queryParams\"\n    routerLinkActive=\"active\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    (click)=\"_linkClicked()\">\n    <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n    <div class=\"side-nav-item--icon\">\n      <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    <ng-container *ngIf=\"!compact\">\n      <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n    </ng-container>\n  </a>\n\n  <ng-template #noLink>\n    <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"side-nav-item--toggle-btn\"\n      [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n      [icon]=\"faAngleLeft\"\n      type>\n    </seam-icon>\n    <span class=\"sr-only\">Group Toggle</span>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"!badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"d-flex flex-row\">\n  <ng-container *ngIf=\"itemType === 'basic'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeBasic\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'link'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeLink\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'divider'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeDivider\"></ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"itemType === 'title'\">\n    <ng-template [ngTemplateOutlet]=\"itemTypeTitle\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"hasChildren\">\n  <div class=\"side-nav--group side-nav--group--level-{{ hierLevel + 1 }}\"\n    [@childGroupAnim]=\"childGroupAnimState$ | async\">\n    <seam-side-nav-item *ngFor=\"let child of children\"\n      [hierLevel]=\"compact ? 0 : (hierLevel + 1)\"\n      [compact]=\"compact\"\n      [isMobile]=\"isMobile\"\n      [itemType]=\"$any(child).itemType\"\n      [icon]=\"$any(child).icon\"\n      [label]=\"$any(child).label\"\n      [link]=\"$any(child).link\"\n      [badgeText]=\"$any(child).badge?.text\"\n      [badgeTheme]=\"$any(child).badge?.theme || 'danger'\"\n      [badgeSrContent]=\"$any(child).badge?.srContent\"\n      [badgeTooltip]=\"$any(child)?.badge?.tooltip\"\n      [queryParams]=\"$any(child).queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      [children]=\"$any(child)?.children\"\n      [active]=\"$any(child).__state?.active\"\n      [expanded]=\"$any(child).__state?.expanded\"\n      [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n      [menuItemTooltipDisabled]=\"menuItemTooltipDisabled\">\n    </seam-side-nav-item>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"side-nav-item btn side-nav-btn p-0 d-flex flex-row rounded-0 text-decoration-none text-nowrap w-100\"\n    cdkMonitorElementFocus\n    (click)=\"toggleChildren()\"\n    [attr.aria-expanded]=\"expanded\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <div class=\"nav-link d-flex flex-row w-100\" [class.nav-link__compact]=\"compact\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" side-nav-item-label style=\"margin-left: 11px;\">\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"hasChildren && !compact\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\">\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #itemTypeLink>\n  <div class=\"d-flex flex-row w-100\"\n    [ngbTooltip]=\"label\"\n    [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n    [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n    [container]=\"$any(menuItemTooltipConfig)?.container\"\n    [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n    <a *ngIf=\"link; else noLink\" class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n      [class.nav-link__compact]=\"compact\"\n      [routerLink]=\"link\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: true }\"\n      (click)=\"_linkClicked()\">\n      <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n      <div class=\"side-nav-item--icon\">\n        <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      <ng-container *ngIf=\"!compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </a>\n\n    <ng-template #noLink>\n      <a class=\"side-nav-item nav-link d-flex flex-row text-nowrap w-100 align-items-center\"\n        [class.nav-link__compact]=\"compact\"\n        [ngbTooltip]=\"label\"\n        [tooltipClass]=\"$any(menuItemTooltipConfig)?.class\"\n        [placement]=\"$any(menuItemTooltipConfig)?.placement\"\n        [container]=\"$any(menuItemTooltipConfig)?.container\"\n        [disableTooltip]=\"$any(menuItemTooltipDisabled)\">\n        <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n        <div class=\"side-nav-item--icon\">\n          <seam-icon *ngIf=\"icon\" [icon]=\"icon\"></seam-icon>\n        </div>\n        <span *ngIf=\"!compact\" style=\"margin-left: 11px;\" side-nav-item-label>\n          {{ label }}\n        </span>\n        <span *ngIf=\"compact\" class=\"sr-only\" side-nav-item-label>{{ label }}</span>\n      </a>\n    </ng-template>\n\n    <button *ngIf=\"hasChildren && !compact\"\n      type=\"button\"\n      class=\"btn side-nav-btn side-nav-item--toggle-btn-container rounded-0\"\n      (click)=\"toggleChildren()\"\n      [attr.aria-expanded]=\"expanded\"\n      cdkMonitorElementFocus>\n      <seam-icon\n        class=\"side-nav-item--toggle-btn\"\n        [class.side-nav-item--toggle-btn-expanded]=\"expanded\"\n        [icon]=\"faAngleLeft\"\n        type>\n      </seam-icon>\n      <span class=\"sr-only\">Group Toggle</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #itemTypeDivider>\n  <div class=\"px-2 w-100\">\n    <hr class=\"side-nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"side-nav-item--title pt-1\" side-nav-item-label>{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #itemBadge>\n  <ng-container *ngIf=\"badgeText\">\n    <div class=\"badge-spacer flex-grow-1\" *ngIf=\"!compact\"></div>\n    <div class=\"side-nav-item--badge\"\n      [class.side-nav-item--badge-no-icon]=\"!icon\"\n      [ngbTooltip]=\"$any(badgeTooltip)?.tooltip\"\n      [tooltipClass]=\"$any(badgeTooltip)?.class\"\n      [placement]=\"$any(badgeTooltip)?.placement\"\n      [container]=\"$any(badgeTooltip)?.container\"\n      [disableTooltip]=\"isMobile || !badgeTooltip || !!$any(badgeTooltip)?.disabled\">\n      <span class=\"badge badge-pill badge-{{ badgeTheme }}\">\n        <ng-container *ngIf=\"!compact || !icon\">\n          {{ badgeText }}\n        </ng-container>\n        <span *ngIf=\"badgeSrContent\">{{ badgeSrContent }}</span>\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: ["seam-side-nav-item{display:block;transition:.25s ease-in-out background-color}seam-side-nav-item.seam-side-nav-item--active{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .active,seam-side-nav-item.seam-side-nav-item--active:active,seam-side-nav-item.seam-side-nav-item--active .side-nav-item.active:hover{background-color:#2a6395}seam-side-nav-item.seam-side-nav-item--active .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item.seam-side-nav-item--active .nav-link{color:#fff}seam-side-nav-item .badge{vertical-align:middle}seam-side-nav-item:not(.side-nav-item--icon) .side-nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-side-nav-item .side-nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge{top:-4px;right:-4px;position:absolute}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-side-nav-item .side-nav-item--icon .side-nav-item--badge.side-nav-item--badge-no-icon{top:0;right:0}seam-side-nav-item .side-nav-item{min-height:45px;transition:.25s ease-in-out background-color}seam-side-nav-item .side-nav-item:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item.active{pointer-events:none;cursor:default}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]){color:#ccc}seam-side-nav-item a.side-nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-side-nav-item .nav-link{color:#fff;padding-right:2px}seam-side-nav-item .nav-link__compact{padding-right:0;padding-left:12px}seam-side-nav-item .nav-link:last-child{padding-right:8px}seam-side-nav-item .side-nav-btn{font-weight:400;color:#fff;text-decoration:none}seam-side-nav-item .side-nav-btn:hover{color:#2f71a9;text-decoration:underline}seam-side-nav-item .side-nav-btn:focus,seam-side-nav-item .side-nav-btn.focus{text-decoration:underline;box-shadow:none}seam-side-nav-item .side-nav-btn:disabled,seam-side-nav-item .side-nav-btn.disabled{color:#ccc;pointer-events:none}seam-side-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-side-nav-item .side-nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:.5rem 1rem}seam-side-nav-item button.side-nav-item--toggle-btn-container:hover{background-color:#2f71a9}seam-side-nav-item .side-nav-item--toggle-btn{color:#fff}seam-side-nav-item .side-nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform}seam-side-nav-item .side-nav-item--toggle-btn.side-nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-side-nav-item .side-nav--group{will-change:height;overflow:hidden}seam-side-nav-item .side-nav--group--level-1{background-color:#3276b1}seam-side-nav-item .side-nav--group--level-2{background-color:#2e6ea5}seam-side-nav-item .side-nav--group--level-3{background-color:#2b6699}seam-side-nav-item .side-nav--group--level-4{background-color:#285e8d}seam-side-nav-item .side-nav--group--level-5{background-color:#245681}seam-side-nav-item .side-nav--group--level-6{background-color:#214e75}seam-side-nav-item .side-nav--group--level-7{background-color:#1e4669}seam-side-nav-item .side-nav--group--level-8{background-color:#1a3e5d}seam-side-nav-item .side-nav--group--level-9{background-color:#173651}seam-side-nav-item .side-nav-item--divider{display:block;border-top:1px solid #2a6395;width:100%}seam-side-nav-item .side-nav-item--title{color:#fff;font-size:24px;padding-left:10px}seam-side-nav-item .sr-only{top:0;left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [THESEAM_SIDE_NAV_ACCESSOR]
@@ -1271,6 +1273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], compact: [{
                 type: Input
+            }], isMobile: [{
+                type: Input
             }], badgeText: [{
                 type: Input
             }], badgeTheme: [{
@@ -1279,6 +1283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], badgeTooltip: [{
                 type: Input
+            }], menuItemTooltipConfig: [{
+                type: Input
+            }], menuItemTooltipDisabled: [{
+                type: Input
             }], _isActiveCssClass: [{
                 type: HostBinding,
                 args: ['class.seam-side-nav-item--active']
@@ -1602,6 +1610,15 @@ class SideNavComponent {
     }
     get overlay() { return this._overlay.value; }
     set overlay(value) { this._overlay.next(coerceBooleanProperty(value)); }
+    get menuItemTooltipConfig() { return this._menuItemTooltipConfig; }
+    set menuItemTooltipConfig(value) {
+        this._menuItemTooltipConfig = {
+            class: value?.class,
+            placement: value?.placement || this._menuItemTooltipConfig.placement,
+            container: value?.container || this._menuItemTooltipConfig.container,
+            behavior: value?.behavior || this._menuItemTooltipConfig.behavior
+        };
+    }
     constructor(_viewContainerRef, _layout, _sideNav, _baseLayoutRef) {
         this._viewContainerRef = _viewContainerRef;
         this._layout = _layout;
@@ -1618,6 +1635,11 @@ class SideNavComponent {
         this.expanded$ = this._expanded.asObservable();
         this._overlay = new BehaviorSubject(false);
         this.overlay$ = this._overlay.asObservable();
+        this._menuItemTooltipConfig = {
+            placement: 'right',
+            container: 'body',
+            behavior: 'always'
+        };
         this.toggleExpand = new EventEmitter();
         this._backdropHidden = new BehaviorSubject(true);
         this.items$ = this._items.asObservable().pipe(switchMap(items => this._sideNav.createItemsObservable(items)), shareReplay({ bufferSize: 1, refCount: true }));
@@ -1625,6 +1647,15 @@ class SideNavComponent {
         this.sideNavExpandedState$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => expanded
             ? overlay ? EXPANDED_OVERLAY_STATE : EXPANDED_STATE
             : overlay ? COLLAPSED_OVERLAY_STATE : COLLAPSED_STATE), distinctUntilChanged());
+        this.menuItemTooltipDisabled$ = combineLatest([this.expanded$, this.overlay$]).pipe(map(([expanded, overlay]) => {
+            // never display tooltip on mobile, it breaks the layout
+            if (overlay) {
+                return true;
+            }
+            return this.menuItemTooltipConfig?.behavior === 'always' ? false
+                : this.menuItemTooltipConfig?.behavior === 'never' ? true
+                    : this.menuItemTooltipConfig?.behavior === 'collapseOnly' ? expanded : true;
+        }), distinctUntilChanged());
     }
     ngOnInit() {
         if (this._baseLayoutRef) {
@@ -1668,14 +1699,14 @@ class SideNavComponent {
     }
 }
 SideNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SideNavComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.TheSeamLayoutService }, { token: TheSeamSideNavService }, { token: THESEAM_BASE_LAYOUT_REF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavComponent, selector: "seam-side-nav", inputs: { hasHeaderToggle: "hasHeaderToggle", items: "items", expanded: "expanded", overlay: "overlay" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "@sideNavAnim": "this._sideNavExpand" } }, providers: [
+SideNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SideNavComponent, selector: "seam-side-nav", inputs: { hasHeaderToggle: "hasHeaderToggle", items: "items", expanded: "expanded", overlay: "overlay", menuItemTooltipConfig: "menuItemTooltipConfig" }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "@sideNavAnim": "this._sideNavExpand" } }, providers: [
         TheSeamSideNavService,
         {
             provide: THESEAM_SIDE_NAV_ACCESSOR,
             // tslint:disable-next-line:no-use-before-declare
             useExisting: forwardRef(() => SideNavComponent)
         },
-    ], queries: [{ propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+    ], queries: [{ propertyName: "_sideBarFooterTpl", first: true, predicate: BaseLayoutSideBarFooterDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [isMobile]=\"isMobile$ | async\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\"\n        [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n        [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.OverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SideNavItemComponent, selector: "seam-side-nav-item", inputs: ["itemType", "icon", "label", "active", "link", "queryParams", "children", "hierLevel", "indentSize", "expanded", "compact", "isMobile", "badgeText", "badgeTheme", "badgeSrContent", "badgeTooltip", "menuItemTooltipConfig", "menuItemTooltipDisabled"], exportAs: ["seamSideNavItem"] }, { kind: "component", type: SideNavToggleComponent, selector: "seam-side-nav-toggle", inputs: ["expanded"], outputs: ["toggleExpand"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
         //
         // TODO: This animation code turned into a mess. Clean it up and make it
         // more smooth.
@@ -1812,7 +1843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             //   ])
                             // ]),
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n  [@sideNavBackdrop]=\"_sideNavExpand\"\n  [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div class=\"side-nav-inner-wrapper\" [@sideNavExpand]=\"_sideNavExpand\"\n  (@sideNavExpand.start)=\"animateStart()\"\n  (@sideNavExpand.done)=\"animateEnd()\">\n  <nav class=\"nav side-nav-content\">\n    <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n      [expanded]=\"expanded$ | async\"\n      (toggleExpand)=\"toggle()\">\n    </seam-side-nav-toggle>\n    <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n      <seam-side-nav-item *ngFor=\"let item of items$ | async\"\n        [compact]=\"!(expanded$ | async)\"\n        [isMobile]=\"isMobile$ | async\"\n        [itemType]=\"$any(item)?.itemType\"\n        [icon]=\"$any(item)?.icon\"\n        [label]=\"$any(item)?.label\"\n        [link]=\"$any(item)?.link\"\n        [badgeText]=\"$any(item)?.badge?.text\"\n        [badgeTheme]=\"$any(item)?.badge?.theme || 'danger'\"\n        [badgeSrContent]=\"$any(item)?.badge?.srContent\"\n        [badgeTooltip]=\"$any(item)?.badge?.tooltip\"\n        [queryParams]=\"$any(item)?.queryParams\"\n        [children]=\"$any(item)?.children\"\n        [active]=\"$any(item).__state.active\"\n        [expanded]=\"$any(item).__state.expanded\"\n        [menuItemTooltipConfig]=\"menuItemTooltipConfig\"\n        [menuItemTooltipDisabled]=\"menuItemTooltipDisabled$ | async\">\n      </seam-side-nav-item>\n    </div>\n    <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n  </nav>\n</div>\n", styles: ["seam-side-nav,.seam-side-nav{display:block;height:100%;position:relative;z-index:2;overflow:hidden}seam-side-nav .side-nav-inner-wrapper,.seam-side-nav .side-nav-inner-wrapper{background:#357ebd;height:100%}seam-side-nav .side-nav-backdrop,.seam-side-nav .side-nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden,.seam-side-nav .side-nav-backdrop.side-nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-side-nav .side-nav-content,.seam-side-nav .side-nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-side-nav .side-nav-items-container,.seam-side-nav .side-nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.TheSeamLayoutService }, { type: TheSeamSideNavService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1829,6 +1860,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], overlay: [{
                 type: Input
+            }], menuItemTooltipConfig: [{
+                type: Input
             }], toggleExpand: [{
                 type: Output
             }], _sideBarFooterTpl: [{
@@ -2030,7 +2063,7 @@ class TheSeamTopBarComponent {
     }
 }
 TheSeamTopBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamTopBarComponent, deps: [{ token: i1.TheSeamLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamTopBarComponent, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", profileIcon: "profileIcon" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "directive", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TheSeamTopBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamTopBarComponent, selector: "seam-top-bar", inputs: { logo: "logo", logoSm: "logoSm", logoHref: "logoHref", logoHrefTarget: "logoHrefTarget", logoRoute: "logoRoute", hasTitle: "hasTitle", titleText: "titleText", subTitleText: "subTitleText", profileIcon: "profileIcon" }, queries: [{ propertyName: "_topBarMenu", first: true, predicate: TopBarMenuDirective, descendants: true, static: true }, { propertyName: "_topBarMenuBtnDetailTpl", first: true, predicate: TopBarMenuBtnDetailDirective, descendants: true }, { propertyName: "_topBarItems", predicate: TopBarItemDirective }], exportAs: ["seamTopBar"], ngImport: i0, template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n", styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultImgSrcDirective, selector: "  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", inputs: ["src.xs", "src.sm", "src.md", "src.lg", "src.xl", "src.lt-sm", "src.lt-md", "src.lt-lg", "src.lt-xl", "src.gt-xs", "src.gt-sm", "src.gt-md", "src.gt-lg"] }, { kind: "component", type: i2$1.IconBtnComponent, selector: "button[seamIconBtn]", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "iconType", "btnTheme", "badgeTheme", "badgeText", "btnSize", "type", "role"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "directive", type: BaseLayoutNavToggleDirective, selector: "button[seamBaseLayoutNavToggle]", inputs: ["type", "aria-label"], exportAs: ["seamBaseLayoutNavToggle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TopBarTitleComponent, selector: "seam-top-bar-title", inputs: ["titleText", "subTitleText"] }, { kind: "component", type: TopBarMenuButtonComponent, selector: "button[seamTopBarMenuButton]", inputs: ["disabled", "detailTpl", "compact", "profileIcon"], exportAs: ["seamButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
@@ -2784,7 +2817,7 @@ class TheSeamSchemaFormSubmitSplitComponent {
     }
 }
 TheSeamSchemaFormSubmitSplitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, deps: [{ token: i1$3.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSubmitSplitComponent, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$2.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
+TheSeamSchemaFormSubmitSplitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamSchemaFormSubmitSplitComponent, selector: "seam-schema-form-submit-split", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i3$2.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i3$2.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamSchemaFormSubmitSplitComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-schema-form-submit-split', template: "<div\n  [class]=\"options?.htmlClass || ''\">\n  <div [class.btn-group]=\"_dropdownObj\">\n    <button seamButton theme=\"primary\" type=\"submit\"\n      [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n      [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n      [attr.required]=\"options?.required\"\n      [class]=\"'btn btn-primary ' + (options?.fieldHtmlClass || '')\"\n      [disabled]=\"controlDisabled\"\n      [id]=\"'control' + layoutNode?._id\"\n      [name]=\"controlName\"\n      [value]=\"controlValue\"\n      (click)=\"updateValue($event)\">\n      {{ _buttonLabel }}\n      <span *ngIf=\"_selectedItem\">\n        [{{ _selectedItem.name }}]\n      </span>\n    </button>\n    <ng-container *ngIf=\"_dropdownObj\">\n      <button\n        [seamMenuToggle]=\"menu\" seamButton theme=\"primary\"\n        class=\"dropdown-toggle dropdown-toggle-split\"\n        [disabled]=\"_dropdownDisabled\">\n        <span class=\"sr-only\">Toggle Dropdown</span>\n      </button>\n      <seam-menu #menu>\n        <ng-container *ngFor=\"let item of _selectList\">\n          <button seamMenuItem\n            [class.active]=\"item.checked\"\n            (click)=\"_setDropdownValue(item.value)\">\n            {{ item.name }}\n          </button>\n        </ng-container>\n      </seam-menu>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]