@theseam/ui-common 0.3.12-beta.0 → 0.3.13-beta.0

package/bundles/theseam-ui-common-framework.umd.js

@@ -3495,6 +3495,10 @@
         var _a, _b;
         return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
     }
+    function isHorizontalNavItemFocused(item) {
+        var _a, _b;
+        return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.focused) !== null && _b !== void 0 ? _b : false;
+    }
     function horizontalNavItemHasChildren(item) {
         return horizontalNavItemCanHaveChildren(item) && utils.hasProperty(item, 'children') && item.children.length > 0;
     }
@@ -3591,7 +3595,8 @@
         }
         item.__state = {
             active: false,
-            expanded: false
+            expanded: false,
+            focused: false
         };
         // TODO: See if there is a nice way to fix the typing for this.
         return item;
@@ -3621,8 +3626,235 @@
         return false;
     }
 
+    var TheSeamNavService = /** @class */ (function () {
+        function TheSeamNavService(_router) {
+            this._router = _router;
+            this._updatingCount = new rxjs.BehaviorSubject(0);
+            this.itemChanged = new rxjs.Subject();
+            this.loading$ = this._updatingCount.pipe(operators.map(function (count) { return count > 0; }), operators.distinctUntilChanged(), operators.shareReplay({ bufferSize: 1, refCount: true }));
+        }
+        TheSeamNavService.prototype.createItemsObservable = function (items) {
+            var _this = this;
+            return rxjs.defer(function () {
+                _this.updateItemsStates(items);
+                return new rxjs.Observable(function (subscriber) {
+                    var stateChangeSub = _this.itemChanged.pipe(operators.switchMap(function (change) {
+                        if (change.prop === 'focused' && change.newValue) {
+                            _this.updateFocusedItem(items, change.item);
+                        }
+                        return _this.loading$.pipe(operators.filter(function (loading) { return !loading; }));
+                    })).subscribe(function () {
+                        subscriber.next(items);
+                    });
+                    try {
+                        _this.updateItemsStates(items);
+                    }
+                    catch (err) {
+                        subscriber.error(err);
+                    }
+                    var routeChangeSub = _this._router.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; })).subscribe(function (event) {
+                        try {
+                            _this.updateItemsStates(items);
+                        }
+                        catch (err) {
+                            subscriber.error(err);
+                        }
+                    });
+                    return function () {
+                        stateChangeSub.unsubscribe();
+                        routeChangeSub.unsubscribe();
+                    };
+                }).pipe(operators.startWith(items));
+            });
+        };
+        TheSeamNavService.prototype._incUpdatingCount = function () {
+            this._updatingCount.next(this._updatingCount.value + 1);
+        };
+        TheSeamNavService.prototype._decrUpdatingCount = function () {
+            this._updatingCount.next(this._updatingCount.value - 1);
+        };
+        TheSeamNavService.prototype.updateItemsStates = function (items) {
+            var e_1, _a;
+            this._incUpdatingCount();
+            this.updateRouterFocusedItem(items);
+            try {
+                try {
+                    for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                        var item = items_1_1.value;
+                        if (horizontalNavItemHasChildren(item)) {
+                            this.updateItemsStates(item.children);
+                        }
+                        this.updateItemState(item);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                this._decrUpdatingCount();
+            }
+            catch (err) {
+                this._decrUpdatingCount();
+                throw err;
+            }
+        };
+        TheSeamNavService.prototype.updateItemState = function (item) {
+            this._incUpdatingCount();
+            try {
+                setDefaultHorizontalNavItemState(item);
+                this.setItemStateProp(item, 'active', this.horizontalNavLinkActive(item));
+                // TODO: Implement this in a more optimized way. Unless our apps start
+                // having large navs constantly updating their state, this shouldn't
+                // have much impact on performance.
+                this._updateItemExpandedState(item);
+                this._decrUpdatingCount();
+            }
+            catch (err) {
+                this._decrUpdatingCount();
+                throw err;
+            }
+        };
+        TheSeamNavService.prototype.horizontalNavLinkActive = function (item) {
+            if (isHorizontalNavItemType(item, 'link')) {
+                var url = this._getUrl(item);
+                if (utils.notNullOrUndefined(url)) {
+                    var opts = this._getMatchOptions(item);
+                    return this._router.isActive(url, opts);
+                }
+            }
+            return false;
+        };
+        TheSeamNavService.prototype._updateItemsExpandedState = function (items) {
+            var e_2, _a;
+            try {
+                for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
+                    var item = items_2_1.value;
+                    if (horizontalNavItemHasChildren(item)) {
+                        this._updateItemsExpandedState(item.children);
+                    }
+                    this._updateItemExpandedState(item);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+        TheSeamNavService.prototype._updateItemExpandedState = function (item) {
+            if (!horizontalNavItemCanExpand(item)) {
+                if (getHorizontalNavItemStateProp(item, 'expanded')) {
+                    this.setItemStateProp(item, 'expanded', false);
+                }
+                return;
+            }
+            if (horizontalNavItemHasChildren(item)) {
+                this._updateItemsExpandedState(item.children);
+            }
+            if (horizontalNavItemHasActiveChild(item) || horizontalNavItemHasExpandedChild(item)) {
+                if (!getHorizontalNavItemStateProp(item, 'expanded')) {
+                    this.setItemStateProp(item, 'expanded', true);
+                }
+            }
+            else {
+                if (getHorizontalNavItemStateProp(item, 'expanded')) {
+                    this.setItemStateProp(item, 'expanded', false);
+                }
+            }
+        };
+        TheSeamNavService.prototype.updateRouterFocusedItem = function (items) {
+            var focusedItem = items.find(function (i) { return isHorizontalNavItemActive(i); }) || items.find(function (i) { return horizontalNavItemHasActiveChild(i); });
+            this.updateFocusedItem(items, focusedItem);
+        };
+        TheSeamNavService.prototype.updateFocusedItem = function (items, focusedItem) {
+            var e_3, _a;
+            try {
+                for (var items_3 = __values(items), items_3_1 = items_3.next(); !items_3_1.done; items_3_1 = items_3.next()) {
+                    var item = items_3_1.value;
+                    if (item === focusedItem) {
+                        setHorizontalNavItemStateProp(item, 'focused', true);
+                    }
+                    else {
+                        setHorizontalNavItemStateProp(item, 'focused', false);
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (items_3_1 && !items_3_1.done && (_a = items_3.return)) _a.call(items_3);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        };
+        TheSeamNavService.prototype._getNavExtras = function (item) {
+            var navigationExtras = {};
+            if (utils.hasProperty(item, 'queryParams')) {
+                navigationExtras.queryParams = item.queryParams;
+            }
+            if (utils.hasProperty(item, 'fragment')) {
+                navigationExtras.fragment = item.fragment;
+            }
+            if (utils.hasProperty(item, 'queryParamsHandling')) {
+                navigationExtras.queryParamsHandling = item.queryParamsHandling;
+            }
+            if (utils.hasProperty(item, 'preserveFragment')) {
+                navigationExtras.preserveFragment = item.preserveFragment;
+            }
+            return navigationExtras;
+        };
+        TheSeamNavService.prototype._getUrl = function (item) {
+            var link = item.link;
+            if (typeof link === 'string') {
+                return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
+            }
+            else if (Array.isArray(link)) {
+                return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
+            }
+            return null;
+        };
+        TheSeamNavService.prototype._getMatchOptions = function (item) {
+            var defaultMatchOpts = {
+                paths: 'subset',
+                queryParams: 'subset',
+                fragment: 'ignored',
+                matrixParams: 'ignored'
+            };
+            if (utils.hasProperty(item, 'matchOptions')) {
+                return Object.assign(Object.assign({}, defaultMatchOpts), item.matchOptions);
+            }
+            return defaultMatchOpts;
+        };
+        TheSeamNavService.prototype.setItemStateProp = function (item, prop, value) {
+            var currentValue = getHorizontalNavItemStateProp(item, prop);
+            if (currentValue !== value) {
+                setHorizontalNavItemStateProp(item, prop, value);
+                var changed = {
+                    item: item,
+                    prop: prop,
+                    prevValue: currentValue,
+                    newValue: value
+                };
+                this.itemChanged.next(changed);
+            }
+        };
+        return TheSeamNavService;
+    }());
+    TheSeamNavService.decorators = [
+        { type: i0.Injectable }
+    ];
+    TheSeamNavService.ctorParameters = function () { return [
+        { type: router.Router }
+    ]; };
+
     var NavItemComponent = /** @class */ (function () {
-        function NavItemComponent() {
+        function NavItemComponent(_nav) {
+            this._nav = _nav;
             this._ngUnsubscribe = new rxjs.Subject();
             this.faAngleLeft = freeSolidSvgIcons.faAngleLeft;
             this.active = false;
@@ -3634,6 +3866,7 @@
             this.expanded$ = this._expanded.asObservable();
             this._compact = new rxjs.BehaviorSubject(false);
             this.compact$ = this._compact.asObservable();
+            this.focused = false;
             this.badgeTheme = 'danger';
             this.childAction = 'menu';
             this.expandAction = 'toggle';
@@ -3698,6 +3931,11 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(NavItemComponent.prototype, "_isFocusedCssClass", {
+            get: function () { return this.focused; },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(NavItemComponent.prototype, "_attrDataHierLevel", {
             get: function () { return this.hierLevel; },
             enumerable: false,
@@ -3752,6 +3990,9 @@
             }
             this.expanded = ex;
             this.navItemExpanded.emit(this.expanded);
+            if (this.item && this.expanded) {
+                this._nav.setItemStateProp(this.item, 'focused', this.expanded);
+            }
             // Prevents seam-menu from closing out when toggling child expand
             event.stopPropagation();
         };
@@ -3779,7 +4020,7 @@
     NavItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-nav-item',
-                    template: "<div class=\"d-flex flex-row h-100\">\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=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" 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 nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\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=\"nav-item nav-link d-flex flex-row 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    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" 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=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\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=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" 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=\"nav-item--badge\"\n      [class.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\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\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    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n",
+                    template: "<div class=\"d-flex flex-row h-100\">\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=\"hasExpandingChildren\">\n  <div class=\"nav--group nav--group--level-{{ hierLevel + 1 }}\"\n    *ngIf=\"expanded$ | async\" @childGroupAnim>\n    <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #itemTypeBasic>\n  <button class=\"nav-item btn nav-btn p-0 d-flex align-items-stretch flex-row text-decoration-none w-100\"\n    cdkMonitorElementFocus\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\">\n    <div class=\"nav-link d-flex flex-row align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n        <ng-container *ngIf=\"compact\">\n          <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n        </ng-container>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" 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 nav-btn nav-item--toggle-btn-container d-flex align-items-center\">\n      <seam-icon\n        class=\"nav-item--toggle-btn\"\n        [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\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=\"nav-item nav-link d-flex flex-row 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    <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n      <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      <ng-container *ngIf=\"compact\">\n        <ng-template [ngTemplateOutlet]=\"itemBadge\"></ng-template>\n      </ng-container>\n    </div>\n    <span *ngIf=\"!compact\" nav-item-label>\n      {{ label }}\n    </span>\n    <span *ngIf=\"compact\" class=\"sr-only\" 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=\"nav-item nav-link d-flex flex-row w-100 align-items-center\" [class.nav-link__compact]=\"compact\">\n      <div class=\"nav-item--icon\" *ngIf=\"showIconBlock\">\n        <seam-icon [icon]=\"icon\" *ngIf=\"icon\"></seam-icon>\n      </div>\n      <span *ngIf=\"!compact\" nav-item-label>\n        {{ label }}\n      </span>\n      <span *ngIf=\"compact\" class=\"sr-only\" nav-item-label>{{ label }}</span>\n    </a>\n  </ng-template>\n\n  <button *ngIf=\"hasChildren && !compact\"\n    type=\"button\"\n    class=\"btn nav-btn nav-item--toggle-btn-container\"\n    (click)=\"_toggleChildren($event)\"\n    [seamMenuToggle]=\"menuTpl\"\n    (menuToggle)=\"_menuEvent($event)\"\n    [attr.aria-expanded]=\"expanded$ | async\"\n    cdkMonitorElementFocus>\n    <seam-icon\n      class=\"nav-item--toggle-btn\"\n      [class.nav-item--toggle-btn-expanded]=\"expanded$ | async\"\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=\"nav-item--divider\" />\n  </div>\n</ng-template>\n\n<ng-template #itemTypeTitle>\n  <ng-container *ngIf=\"!compact\">\n    <span class=\"nav-item--title pt-1\" 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=\"nav-item--badge\"\n      [class.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\n<seam-menu #menu *ngIf=\"hasMenuToggle\">\n  <ng-container *ngTemplateOutlet=\"navChildren\"></ng-container>\n</seam-menu>\n\n<ng-template #navChildren>\n  <seam-nav-item *ngFor=\"let child of children\"\n    [item]=\"child\"\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    [focused]=\"$any(child).__state?.focused\"\n    childAction=\"expand\"\n    [hideEmptyIcon]=\"hideEmptyIcon\">\n  </seam-nav-item>\n</ng-template>\n\n",
                     exportAs: 'seamNavItem',
                     animations: [
                         animations.trigger('childGroupAnim', [
@@ -3798,7 +4039,9 @@
                     styles: ["seam-nav-item{display:block;transition:.25s ease-in-out background-color;text-align:inherit;border-radius:0;overflow:hidden;background:transparent;margin:0}seam-nav-item.seam-nav-item--expanded{background-color:transparent}seam-nav-item.seam-nav-item--expanded .nav-link{color:#000}seam-nav-item.seam-nav-item--child-active{background-color:#dae0e5}seam-nav-item.seam-nav-item--child-active .nav-link{color:#000}seam-nav-item.seam-nav-item--active{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .active,seam-nav-item.seam-nav-item--active:active,seam-nav-item.seam-nav-item--active .nav-item.active:hover{background-color:#dae0e5}seam-nav-item.seam-nav-item--active .nav-item:hover{background-color:#e9ecef}seam-nav-item.seam-nav-item--active .nav-link{color:#000}seam-nav-item .badge{vertical-align:middle}seam-nav-item:not(.nav-item--icon) .nav-item--badge{pointer-events:all;margin-left:5px;margin-right:3px}seam-nav-item .nav-item--icon{position:relative;width:24px;max-width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px;text-align:center;margin-right:.5rem}seam-nav-item .nav-item--icon .nav-item--badge{top:-4px;right:-4px;position:absolute}seam-nav-item .nav-item--icon .nav-item--badge .badge:empty{display:block;width:8px;height:8px;padding:0}seam-nav-item .nav-item--icon .nav-item--badge.nav-item--badge-no-icon{top:0px;right:0px}seam-nav-item .nav-item{transition:.25s ease-in-out background-color}seam-nav-item .nav-item:hover{background-color:#e9ecef}seam-nav-item .nav-item.active{pointer-events:none;cursor:default}seam-nav-item a.nav-item:not([href]):not([tabindex]){color:#000}seam-nav-item a.nav-item:not([href]):not([tabindex]):hover{background-color:transparent}seam-nav-item .nav-link{color:#000}seam-nav-item .nav-btn{font-weight:400;color:#000;text-decoration:none;border-radius:0;border:0 solid #dee2e6}seam-nav-item .nav-btn:hover{color:#000;text-decoration:underline}seam-nav-item .nav-btn:focus,seam-nav-item .nav-btn.focus{text-decoration:underline;box-shadow:none}seam-nav-item .nav-btn:disabled,seam-nav-item .nav-btn.disabled{color:#000;pointer-events:none}seam-nav-item .cdk-keyboard-focused{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}seam-nav-item .nav-item--toggle-btn-container{transition:.25s ease-in-out background-color;padding:0 .5rem}seam-nav-item button.nav-item--toggle-btn-container:hover{background-color:#e9ecef}seam-nav-item .nav-item--toggle-btn .svg-inline--fa{transition:.1s ease-in-out transform;transform:none}seam-nav-item .nav-item--toggle-btn.nav-item--toggle-btn-expanded .svg-inline--fa{transform:rotate(-90deg)}seam-nav-item .nav--group{will-change:height;overflow:hidden}seam-nav-item .nav--group--level-1{background-color:#eff1f4}seam-nav-item .nav--group--level-2{background-color:#e6eaed}seam-nav-item .nav--group--level-3{background-color:#dde2e7}seam-nav-item .nav--group--level-4{background-color:#d4dae1}seam-nav-item .nav--group--level-5{background-color:#cbd3da}seam-nav-item .nav--group--level-6{background-color:#c2cbd4}seam-nav-item .nav--group--level-7{background-color:#bac3cd}seam-nav-item .nav--group--level-8{background-color:#b1bcc7}seam-nav-item .nav--group--level-9{background-color:#a8b4c1}seam-nav-item .nav-item--divider{display:block;border-top:1px solid #dae0e5;width:100%}seam-nav-item .nav-item--title{color:#000;font-size:24px;padding-left:10px}seam-nav-item .sr-only{top:0;left:0}\n"]
                 },] }
     ];
-    NavItemComponent.ctorParameters = function () { return []; };
+    NavItemComponent.ctorParameters = function () { return [
+        { type: TheSeamNavService }
+    ]; };
     NavItemComponent.propDecorators = {
         item: [{ type: i0.Input }],
         itemType: [{ type: i0.Input }],
@@ -3813,6 +4056,7 @@
         indentSize: [{ type: i0.Input }],
         expanded: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
+        focused: [{ type: i0.Input }],
         badgeText: [{ type: i0.Input }],
         badgeTheme: [{ type: i0.Input }],
         badgeSrContent: [{ type: i0.Input }],
@@ -3823,6 +4067,7 @@
         _isActiveCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--active',] }],
         _isChildActiveCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--child-active',] }],
         _isExpandedCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--expanded',] }],
+        _isFocusedCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--focused',] }],
         _attrDataHierLevel: [{ type: i0.HostBinding, args: ['attr.data-hier-level',] }],
         _menu: [{ type: i0.ViewChild, args: [menu.MenuComponent,] }],
         _navItems: [{ type: i0.ViewChildren, args: [NavItemComponent,] }]
@@ -3837,211 +4082,18 @@
         core.InputNumber(10)
     ], NavItemComponent.prototype, "indentSize", void 0);
 
-    var TheSeamNavService = /** @class */ (function () {
-        function TheSeamNavService(_router) {
-            this._router = _router;
-            this._updatingCount = new rxjs.BehaviorSubject(0);
-            this.itemChanged = new rxjs.Subject();
-            this.loading$ = this._updatingCount.pipe(operators.map(function (count) { return count > 0; }), operators.distinctUntilChanged(), operators.shareReplay({ bufferSize: 1, refCount: true }));
-        }
-        TheSeamNavService.prototype.createItemsObservable = function (items) {
-            var _this = this;
-            return rxjs.defer(function () {
-                _this.updateItemsStates(items);
-                return new rxjs.Observable(function (subscriber) {
-                    var stateChangeSub = _this.itemChanged.pipe(operators.switchMap(function (change) {
-                        return _this.loading$.pipe(operators.filter(function (loading) { return !loading; }));
-                    })).subscribe(function () {
-                        subscriber.next(items);
-                    });
-                    try {
-                        _this.updateItemsStates(items);
-                    }
-                    catch (err) {
-                        subscriber.error(err);
-                    }
-                    var routeChangeSub = _this._router.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; })).subscribe(function () {
-                        try {
-                            _this.updateItemsStates(items);
-                        }
-                        catch (err) {
-                            subscriber.error(err);
-                        }
-                    });
-                    return function () {
-                        stateChangeSub.unsubscribe();
-                        routeChangeSub.unsubscribe();
-                    };
-                }).pipe(operators.startWith(items));
-            });
-        };
-        TheSeamNavService.prototype._incUpdatingCount = function () {
-            this._updatingCount.next(this._updatingCount.value + 1);
-        };
-        TheSeamNavService.prototype._decrUpdatingCount = function () {
-            this._updatingCount.next(this._updatingCount.value - 1);
-        };
-        TheSeamNavService.prototype.updateItemsStates = function (items) {
-            var e_1, _a;
-            this._incUpdatingCount();
-            try {
-                try {
-                    for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                        var item = items_1_1.value;
-                        if (horizontalNavItemHasChildren(item)) {
-                            this.updateItemsStates(item.children);
-                        }
-                        this.updateItemState(item);
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                this._decrUpdatingCount();
-            }
-            catch (err) {
-                this._decrUpdatingCount();
-                throw err;
-            }
-        };
-        TheSeamNavService.prototype.updateItemState = function (item) {
-            this._incUpdatingCount();
-            try {
-                setDefaultHorizontalNavItemState(item);
-                if (isHorizontalNavItemType(item, 'link')) {
-                    var url = this._getUrl(item);
-                    if (utils.notNullOrUndefined(url)) {
-                        var opts = this._getMatchOptions(item);
-                        this.setItemStateProp(item, 'active', this._router.isActive(url, opts));
-                    }
-                }
-                // TODO: Implement this in a more optimized way. Unless our apps start
-                // having large navs constantly updating their state, this shouldn't
-                // have much impact on performance.
-                this._updateItemExpandedState(item);
-                this._decrUpdatingCount();
-            }
-            catch (err) {
-                this._decrUpdatingCount();
-                throw err;
-            }
-        };
-        TheSeamNavService.prototype._updateItemsExpandedState = function (items) {
-            var e_2, _a;
-            try {
-                for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
-                    var item = items_2_1.value;
-                    if (horizontalNavItemHasChildren(item)) {
-                        this._updateItemsExpandedState(item.children);
-                    }
-                    this._updateItemExpandedState(item);
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-        };
-        TheSeamNavService.prototype._updateItemExpandedState = function (item) {
-            if (!horizontalNavItemCanExpand(item)) {
-                if (getHorizontalNavItemStateProp(item, 'expanded')) {
-                    this.setItemStateProp(item, 'expanded', false);
-                }
-                return;
-            }
-            if (horizontalNavItemHasChildren(item)) {
-                this._updateItemsExpandedState(item.children);
-            }
-            if (horizontalNavItemHasActiveChild(item) || horizontalNavItemHasExpandedChild(item)) {
-                if (!getHorizontalNavItemStateProp(item, 'expanded')) {
-                    this.setItemStateProp(item, 'expanded', true);
-                }
-            }
-            else {
-                if (getHorizontalNavItemStateProp(item, 'expanded')) {
-                    this.setItemStateProp(item, 'expanded', false);
-                }
-            }
-        };
-        TheSeamNavService.prototype._getNavExtras = function (item) {
-            var navigationExtras = {};
-            if (utils.hasProperty(item, 'queryParams')) {
-                navigationExtras.queryParams = item.queryParams;
-            }
-            if (utils.hasProperty(item, 'fragment')) {
-                navigationExtras.fragment = item.fragment;
-            }
-            if (utils.hasProperty(item, 'queryParamsHandling')) {
-                navigationExtras.queryParamsHandling = item.queryParamsHandling;
-            }
-            if (utils.hasProperty(item, 'preserveFragment')) {
-                navigationExtras.preserveFragment = item.preserveFragment;
-            }
-            return navigationExtras;
-        };
-        TheSeamNavService.prototype._getUrl = function (item) {
-            var link = item.link;
-            if (typeof link === 'string') {
-                return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
-            }
-            else if (Array.isArray(link)) {
-                return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
-            }
-            return null;
-        };
-        TheSeamNavService.prototype._getMatchOptions = function (item) {
-            var defaultMatchOpts = {
-                paths: 'subset',
-                queryParams: 'subset',
-                fragment: 'ignored',
-                matrixParams: 'ignored'
-            };
-            if (utils.hasProperty(item, 'matchOptions')) {
-                return Object.assign(Object.assign({}, defaultMatchOpts), item.matchOptions);
-            }
-            return defaultMatchOpts;
-        };
-        TheSeamNavService.prototype.setItemStateProp = function (item, prop, value) {
-            var currentValue = getHorizontalNavItemStateProp(item, prop);
-            if (currentValue !== value) {
-                setHorizontalNavItemStateProp(item, prop, value);
-                var changed = {
-                    item: item,
-                    prop: prop,
-                    prevValue: currentValue,
-                    newValue: value
-                };
-                this.itemChanged.next(changed);
-            }
-        };
-        return TheSeamNavService;
-    }());
-    TheSeamNavService.decorators = [
-        { type: i0.Injectable }
-    ];
-    TheSeamNavService.ctorParameters = function () { return [
-        { type: router.Router }
-    ]; };
-
     var HorizontalNavComponent = /** @class */ (function () {
-        function HorizontalNavComponent() {
+        function HorizontalNavComponent(_nav) {
+            var _this = this;
+            this._nav = _nav;
             this._ngUnsubscribe = new rxjs.Subject();
             this._items = new rxjs.BehaviorSubject([]);
             this.hideEmptyIcon = true;
             this.hierLevel = 0;
             this.childAction = 'menu';
             this.expandAction = 'toggle';
-            this._focusedNavItem = new rxjs.BehaviorSubject(undefined);
-            this.focusedNavItem$ = this._focusedNavItem.asObservable();
             this.navItemExpanded = new i0.EventEmitter();
-            this.items$ = this._items.asObservable();
+            this.items$ = this._items.asObservable().pipe(operators.switchMap(function (items) { return items ? _this._nav.createItemsObservable(items) : []; }), operators.shareReplay({ bufferSize: 1, refCount: true }));
         }
         Object.defineProperty(HorizontalNavComponent.prototype, "items", {
             get: function () { return this._items.value; },
@@ -4051,21 +4103,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(HorizontalNavComponent.prototype, "focusedNavItem", {
-            /**
-             * The 'focused' nav item refers to the item in
-             * the list that was most recently expanded or activated.
-             * // TODO: make all this better
-             */
-            get: function () {
-                return this._focusedNavItem.value;
-            },
-            set: function (value) {
-                this._focusedNavItem.next(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
         HorizontalNavComponent.prototype.ngOnInit = function () { };
         HorizontalNavComponent.prototype.ngOnDestroy = function () {
             this._ngUnsubscribe.next();
@@ -4074,15 +4111,12 @@
         HorizontalNavComponent.prototype._navItemExpanded = function (item, expanded) {
             this.navItemExpanded.emit({ navItem: item, expanded: expanded });
         };
-        HorizontalNavComponent.prototype._navItemIsFocused = function (item) {
-            return this.focusedNavItem$.pipe(operators.map(function (focusedNavItem) { return areSameHorizontalNavItem(focusedNavItem, item); }));
-        };
         return HorizontalNavComponent;
     }());
     HorizontalNavComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-horizontal-nav',
-                    template: "<div class=\"nav-inner-wrapper\" class=\"nav-inner-wrapper-{{hierLevel}}\">\n  <div class=\"nav-items-row\">\n    <seam-nav-item *ngFor=\"let item of items$ | async\"\n      class=\"flex-shrink-0\"\n      [item]=\"item\"\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      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [class.seam-nav-item--focused]=\"_navItemIsFocused(item) | async\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n",
+                    template: "<div class=\"nav-inner-wrapper\" class=\"nav-inner-wrapper-{{hierLevel}}\">\n  <div class=\"nav-items-row\">\n    <seam-nav-item *ngFor=\"let item of items$ | async\"\n      class=\"flex-shrink-0\"\n      [item]=\"item\"\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      [focused]=\"$any(item).__state?.focused\"\n      [hierLevel]=\"hierLevel\"\n      [childAction]=\"childAction\"\n      [expandAction]=\"expandAction\"\n      (navItemExpanded)=\"_navItemExpanded(item, $event)\"\n      [hideEmptyIcon]=\"hideEmptyIcon\">\n    </seam-nav-item>\n  </div>\n</div>\n",
                     providers: [
                         TheSeamNavService
                     ],
@@ -4091,14 +4125,15 @@
                     styles: ["seam-horizontal-nav,.seam-horizontal-nav{display:block;height:100%;position:relative;z-index:2}seam-horizontal-nav .nav-inner-wrapper,.seam-horizontal-nav .nav-inner-wrapper{background:none;height:100%}seam-horizontal-nav .nav-backdrop,.seam-horizontal-nav .nav-backdrop{background:rgba(52,58,64,.6);width:100vw;height:100vh}seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden,.seam-horizontal-nav .nav-backdrop.nav-backdrop-hidden{display:none;width:0;height:0;padding:0;margin:0}seam-horizontal-nav .nav-content,.seam-horizontal-nav .nav-content{display:flex;flex-direction:column;height:100%;flex-wrap:nowrap}seam-horizontal-nav .nav-items-container,.seam-horizontal-nav .nav-items-container{display:flex;flex-direction:column;width:100%;flex:1 1 100%}seam-horizontal-nav .nav-items-row,.seam-horizontal-nav .nav-items-row{height:100%;display:flex;padding:.25rem .5rem}\n"]
                 },] }
     ];
-    HorizontalNavComponent.ctorParameters = function () { return []; };
+    HorizontalNavComponent.ctorParameters = function () { return [
+        { type: TheSeamNavService }
+    ]; };
     HorizontalNavComponent.propDecorators = {
         items: [{ type: i0.Input }],
         hideEmptyIcon: [{ type: i0.Input }],
         hierLevel: [{ type: i0.Input }],
         childAction: [{ type: i0.Input }],
         expandAction: [{ type: i0.Input }],
-        focusedNavItem: [{ type: i0.Input }],
         navItemExpanded: [{ type: i0.Output }]
     };
 
@@ -4198,6 +4233,7 @@
     exports.isExpanded = isExpanded;
     exports.isHorizontalNavItemActive = isHorizontalNavItemActive;
     exports.isHorizontalNavItemExpanded = isHorizontalNavItemExpanded;
+    exports.isHorizontalNavItemFocused = isHorizontalNavItemFocused;
     exports.isHorizontalNavItemType = isHorizontalNavItemType;
     exports.isNavItemActive = isNavItemActive;
     exports.isNavItemType = isNavItemType;