@theseam/ui-common 0.3.10 → 0.3.12-beta.0
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.
- package/breadcrumbs/_breadcrumbs-theme.scss +3 -3
- package/breadcrumbs/breadcrumbs/breadcrumbs.component.scss +10 -10
- package/bundles/theseam-ui-common-framework.umd.js +899 -47
- package/bundles/theseam-ui-common-framework.umd.js.map +1 -1
- package/bundles/theseam-ui-common-layout.umd.js +14 -5
- package/bundles/theseam-ui-common-layout.umd.js.map +1 -1
- package/bundles/theseam-ui-common-menu.umd.js +4 -0
- package/bundles/theseam-ui-common-menu.umd.js.map +1 -1
- package/bundles/theseam-ui-common-table-cell-types.umd.js +2 -5
- package/bundles/theseam-ui-common-table-cell-types.umd.js.map +1 -1
- package/esm2015/framework/base-layout/base-layout.component.js +12 -4
- package/esm2015/framework/base-layout/base-layout.module.js +4 -1
- package/esm2015/framework/base-layout/directives/base-layout-nav-toggle.directive.js +17 -3
- package/esm2015/framework/base-layout/directives/base-layout-side-bar-header.directive.js +15 -0
- package/esm2015/framework/nav/horizontal-nav/horizontal-nav.component.js +68 -0
- package/esm2015/framework/nav/index.js +6 -0
- package/esm2015/framework/nav/nav-item/nav-item.component.js +169 -0
- package/esm2015/framework/nav/nav-utils.js +105 -0
- package/esm2015/framework/nav/nav.models.js +2 -0
- package/esm2015/framework/nav/nav.module.js +42 -0
- package/esm2015/framework/nav/nav.service.js +175 -0
- package/esm2015/framework/public-api.js +2 -1
- package/esm2015/framework/side-nav/side-nav-item/side-nav-item.component.js +11 -5
- package/esm2015/framework/side-nav/side-nav-toggle/side-nav-toggle.component.js +5 -5
- package/esm2015/framework/side-nav/side-nav.component.js +67 -18
- package/esm2015/framework/side-nav/side-nav.service.js +1 -1
- package/esm2015/framework/theseam-ui-common-framework.js +13 -9
- package/esm2015/framework/top-bar/top-bar-compact-menu-btn-detail.directive.js +15 -0
- package/esm2015/framework/top-bar/top-bar-item.directive.js +9 -2
- package/esm2015/framework/top-bar/top-bar-menu-button/top-bar-menu-button.component.js +4 -3
- package/esm2015/framework/top-bar/top-bar-nav-toggle-btn-detail.directive.js +15 -0
- package/esm2015/framework/top-bar/top-bar.component.js +44 -7
- package/esm2015/framework/top-bar/top-bar.module.js +9 -3
- package/esm2015/layout/layout.service.js +12 -2
- package/esm2015/menu/menu-toggle.directive.js +6 -2
- package/esm2015/table-cell-types/table-cell-type-date/table-cell-type-date.component.js +3 -6
- package/fesm2015/theseam-ui-common-framework.js +730 -41
- package/fesm2015/theseam-ui-common-framework.js.map +1 -1
- package/fesm2015/theseam-ui-common-layout.js +11 -2
- package/fesm2015/theseam-ui-common-layout.js.map +1 -1
- package/fesm2015/theseam-ui-common-menu.js +5 -1
- package/fesm2015/theseam-ui-common-menu.js.map +1 -1
- package/fesm2015/theseam-ui-common-table-cell-types.js +2 -5
- package/fesm2015/theseam-ui-common-table-cell-types.js.map +1 -1
- package/framework/base-layout/base-layout.component.d.ts +3 -1
- package/framework/base-layout/base-layout.component.scss +18 -10
- package/framework/base-layout/directives/base-layout-nav-toggle.directive.d.ts +7 -2
- package/framework/base-layout/directives/base-layout-side-bar-header.directive.d.ts +6 -0
- package/framework/base-layout/styles/_variables.scss +21 -0
- package/framework/nav/horizontal-nav/horizontal-nav.component.d.ts +31 -0
- package/framework/nav/index.d.ts +5 -0
- package/framework/nav/nav-item/nav-item.component.d.ts +67 -0
- package/framework/nav/nav-utils.d.ts +19 -0
- package/framework/nav/nav.models.d.ts +76 -0
- package/framework/nav/nav.module.d.ts +2 -0
- package/framework/nav/nav.service.d.ts +21 -0
- package/framework/public-api.d.ts +1 -0
- package/framework/side-nav/side-nav-item/side-nav-item.component.d.ts +2 -0
- package/framework/side-nav/side-nav-item/side-nav-item.component.scss +7 -5
- package/framework/side-nav/side-nav-toggle/side-nav-toggle.component.d.ts +4 -2
- package/framework/side-nav/side-nav-toggle/side-nav-toggle.component.scss +3 -6
- package/framework/side-nav/side-nav.component.d.ts +13 -1
- package/framework/side-nav/side-nav.component.scss +0 -1
- package/framework/side-nav/styles/_themes/light/_variables.scss +24 -14
- package/framework/side-nav/styles/_themes/primary/_variables.scss +8 -0
- package/framework/theseam-ui-common-framework.d.ts +12 -8
- package/framework/theseam-ui-common-framework.metadata.json +1 -1
- package/framework/top-bar/_top-bar-theme.scss +5 -5
- package/framework/top-bar/top-bar-compact-menu-btn-detail.directive.d.ts +5 -0
- package/framework/top-bar/top-bar-item.directive.d.ts +3 -0
- package/framework/top-bar/top-bar-menu-button/top-bar-menu-button.component.d.ts +4 -1
- package/framework/top-bar/top-bar-nav-toggle-btn-detail.directive.d.ts +5 -0
- package/framework/top-bar/top-bar.component.d.ts +25 -3
- package/framework/top-bar/top-bar.component.scss +7 -2
- package/layout/layout.service.d.ts +9 -1
- package/layout/theseam-ui-common-layout.metadata.json +1 -1
- package/menu/menu-toggle.directive.d.ts +2 -1
- package/menu/theseam-ui-common-menu.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/portal'), require('rxjs'), require('@fortawesome/free-solid-svg-icons'), require('@theseam/ui-common/layout'), require('@angular/common'), require('@theseam/ui-common/buttons'), require('@theseam/ui-common/icon'), require('@theseam/ui-common/scrollbar'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@theseam/ui-common/framework', ['exports', '@angular/core', '@angular/cdk/portal', 'rxjs', '@fortawesome/free-solid-svg-icons', '@theseam/ui-common/layout', '@angular/common', '@theseam/ui-common/buttons', '@theseam/ui-common/icon', '@theseam/ui-common/scrollbar', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam["ui-common"] = global.theseam["ui-common"] || {}, global.theseam["ui-common"].framework = {}), global.ng.core, global.ng.cdk.portal, global.rxjs, global.freeSolidSvgIcons, global.theseam["ui-common"].layout, global.ng.common, global.theseam["ui-common"].buttons, global.theseam["ui-common"].icon, global.theseam["ui-common"].scrollbar, global.
|
|
5
|
-
})(this, (function (exports, i0, portal, rxjs, freeSolidSvgIcons, layout, common, buttons, icon, scrollbar,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('@angular/cdk/portal'), require('rxjs'), require('@fortawesome/free-solid-svg-icons'), require('@theseam/ui-common/layout'), require('@angular/common'), require('@theseam/ui-common/buttons'), require('@theseam/ui-common/icon'), require('@theseam/ui-common/scrollbar'), require('@angular/cdk/coercion'), require('@angular/cdk/drag-drop'), require('@theseam/ui-common/core'), require('@theseam/ui-common/widget'), require('@theseam/ui-common/dynamic-component-loader'), require('@theseam/ui-common/utils'), require('@theseam/ui-common/shared'), require('@angular/animations'), require('@angular/router'), require('@angular/cdk/a11y'), require('@ng-bootstrap/ng-bootstrap'), require('@theseam/ui-common/menu'), require('@fortawesome/free-regular-svg-icons'), require('@ajsf/core'), require('@angular/forms'), require('@ng-select/ng-select'), require('@theseam/ui-common/checkbox'), require('@theseam/ui-common/form-field')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@theseam/ui-common/framework', ['exports', '@angular/core', 'rxjs/operators', '@angular/cdk/portal', 'rxjs', '@fortawesome/free-solid-svg-icons', '@theseam/ui-common/layout', '@angular/common', '@theseam/ui-common/buttons', '@theseam/ui-common/icon', '@theseam/ui-common/scrollbar', '@angular/cdk/coercion', '@angular/cdk/drag-drop', '@theseam/ui-common/core', '@theseam/ui-common/widget', '@theseam/ui-common/dynamic-component-loader', '@theseam/ui-common/utils', '@theseam/ui-common/shared', '@angular/animations', '@angular/router', '@angular/cdk/a11y', '@ng-bootstrap/ng-bootstrap', '@theseam/ui-common/menu', '@fortawesome/free-regular-svg-icons', '@ajsf/core', '@angular/forms', '@ng-select/ng-select', '@theseam/ui-common/checkbox', '@theseam/ui-common/form-field'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam["ui-common"] = global.theseam["ui-common"] || {}, global.theseam["ui-common"].framework = {}), global.ng.core, global.rxjs.operators, global.ng.cdk.portal, global.rxjs, global.freeSolidSvgIcons, global.theseam["ui-common"].layout, global.ng.common, global.theseam["ui-common"].buttons, global.theseam["ui-common"].icon, global.theseam["ui-common"].scrollbar, global.ng.cdk.coercion, global.ng.cdk.dragDrop, global.theseam["ui-common"].core, global.theseam["ui-common"].widget, global.theseam["ui-common"]["dynamic-component-loader"], global.theseam["ui-common"].utils, global.theseam["ui-common"].shared, global.ng.animations, global.ng.router, global.ng.cdk.a11y, global.ngBootstrap, global.theseam["ui-common"].menu, global.freeRegularSvgIcons, global.core$1, global.ng.forms, global.ngSelect, global.theseam["ui-common"].checkbox, global.theseam["ui-common"]["form-field"]));
|
|
5
|
+
})(this, (function (exports, i0, operators, portal, rxjs, freeSolidSvgIcons, layout, common, buttons, icon, scrollbar, coercion, dragDrop, core, widget, i1, utils, shared, animations, router, a11y, ngBootstrap, menu, freeRegularSvgIcons, core$1, forms, ngSelect, checkbox, formField) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -76,10 +76,13 @@
|
|
|
76
76
|
* Can be used to toggle the expand state of the registered nav.
|
|
77
77
|
*/
|
|
78
78
|
var BaseLayoutNavToggleDirective = /** @class */ (function () {
|
|
79
|
-
function BaseLayoutNavToggleDirective(_baseLayout) {
|
|
79
|
+
function BaseLayoutNavToggleDirective(_cdr, _baseLayout) {
|
|
80
|
+
this._cdr = _cdr;
|
|
80
81
|
this.type = 'button';
|
|
81
82
|
/** Screenreader label for the button. */
|
|
82
83
|
this.ariaLabel = 'Navigation toggle';
|
|
84
|
+
this._toggleClass = true;
|
|
85
|
+
this._expandedClass = false;
|
|
83
86
|
this.baseLayout = _baseLayout;
|
|
84
87
|
}
|
|
85
88
|
Object.defineProperty(BaseLayoutNavToggleDirective.prototype, "_attrType", {
|
|
@@ -97,6 +100,14 @@
|
|
|
97
100
|
this.baseLayout.registeredNav.toggle();
|
|
98
101
|
}
|
|
99
102
|
};
|
|
103
|
+
BaseLayoutNavToggleDirective.prototype.ngOnInit = function () {
|
|
104
|
+
var _this = this;
|
|
105
|
+
var _a, _b;
|
|
106
|
+
(_b = (_a = this.baseLayout) === null || _a === void 0 ? void 0 : _a.registeredNav) === null || _b === void 0 ? void 0 : _b.expanded$.pipe(operators.tap(function (exp) {
|
|
107
|
+
_this._expandedClass = exp;
|
|
108
|
+
_this._cdr.markForCheck();
|
|
109
|
+
})).subscribe();
|
|
110
|
+
};
|
|
100
111
|
return BaseLayoutNavToggleDirective;
|
|
101
112
|
}());
|
|
102
113
|
BaseLayoutNavToggleDirective.decorators = [
|
|
@@ -106,6 +117,7 @@
|
|
|
106
117
|
},] }
|
|
107
118
|
];
|
|
108
119
|
BaseLayoutNavToggleDirective.ctorParameters = function () { return [
|
|
120
|
+
{ type: i0.ChangeDetectorRef },
|
|
109
121
|
{ type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [THESEAM_BASE_LAYOUT_REF,] }] }
|
|
110
122
|
]; };
|
|
111
123
|
BaseLayoutNavToggleDirective.propDecorators = {
|
|
@@ -113,6 +125,8 @@
|
|
|
113
125
|
type: [{ type: i0.Input }],
|
|
114
126
|
_attrAriaLabel: [{ type: i0.HostBinding, args: ['attr.aria-label',] }],
|
|
115
127
|
ariaLabel: [{ type: i0.Input, args: ['aria-label',] }],
|
|
128
|
+
_toggleClass: [{ type: i0.HostBinding, args: ['class.base-layout-nav-toggle',] }],
|
|
129
|
+
_expandedClass: [{ type: i0.HostBinding, args: ['class.base-layout-nav-toggle--expanded',] }],
|
|
116
130
|
_onClick: [{ type: i0.HostListener, args: ['click',] }]
|
|
117
131
|
};
|
|
118
132
|
|
|
@@ -159,6 +173,7 @@
|
|
|
159
173
|
this.faAngleDoubleRight = freeSolidSvgIcons.faAngleDoubleRight;
|
|
160
174
|
this.faAngleDoubleLeft = freeSolidSvgIcons.faAngleDoubleLeft;
|
|
161
175
|
this.overlayNav = false;
|
|
176
|
+
this.showSidebar = true;
|
|
162
177
|
this._hasSideBar = new rxjs.BehaviorSubject(false);
|
|
163
178
|
this._registeredNav = new rxjs.BehaviorSubject(undefined);
|
|
164
179
|
this.registeredNav$ = this._registeredNav.asObservable();
|
|
@@ -178,12 +193,17 @@
|
|
|
178
193
|
configurable: true
|
|
179
194
|
});
|
|
180
195
|
TheSeamBaseLayoutComponent.prototype.ngOnInit = function () {
|
|
196
|
+
if (this.mobileBreakpoint) {
|
|
197
|
+
this._layout.setMobileBreakpoint(this.mobileBreakpoint);
|
|
198
|
+
}
|
|
181
199
|
if (this._topBarTpl) {
|
|
182
200
|
this._topBarPortal = new portal.TemplatePortal(this._topBarTpl, this._viewContainerRef);
|
|
183
201
|
}
|
|
184
202
|
if (this._sideBarTpl) {
|
|
185
203
|
this._sideBarPortal = new portal.TemplatePortal(this._sideBarTpl, this._viewContainerRef);
|
|
186
|
-
this.
|
|
204
|
+
if (this.showSidebar) {
|
|
205
|
+
this._hasSideBar.next(true);
|
|
206
|
+
}
|
|
187
207
|
}
|
|
188
208
|
if (this._contentTpl) {
|
|
189
209
|
this._contentPortal = new portal.TemplatePortal(this._contentTpl, this._viewContainerRef);
|
|
@@ -241,11 +261,11 @@
|
|
|
241
261
|
TheSeamBaseLayoutComponent.decorators = [
|
|
242
262
|
{ type: i0.Component, args: [{
|
|
243
263
|
selector: 'seam-base-layout',
|
|
244
|
-
template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n <div *ngIf=\"hasSideBar$ | async\"\n class=\"base-layout-side-bar-container\">\n <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n </div>\n </div>\n <div class=\"base-layout-content-container\">\n <div class=\"base-layout-content-container-header
|
|
264
|
+
template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n <div *ngIf=\"hasSideBar$ | async\"\n class=\"base-layout-side-bar-container\">\n <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n </div>\n </div>\n <div class=\"base-layout-content-container\">\n <div class=\"base-layout-content-container-header d-flex flex-row\">\n <div class=\"base-layout-content-container-header-left flex-grow-1\">\n <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n </div>\n <div class=\"base-layout-content-container-header-right d-flex\">\n <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n <div class=\"base-layout-registered-action\">\n <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n </div>\n <div class=\"base-layout-content-container-footer\">\n <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n </div>\n </div>\n</div>\n",
|
|
245
265
|
providers: [THE_SEAM_BASE_LAYOUT],
|
|
246
266
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
247
267
|
encapsulation: i0.ViewEncapsulation.None,
|
|
248
|
-
styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;
|
|
268
|
+
styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;z-index:999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto;background:none;margin:.25rem;padding:0;border-radius:0;overflow:hidden}seam-base-layout .base-layout-content-container .base-layout-content-container-header-left{background:none;padding:0;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-header-right{background:none;padding:0;margin:0;border-radius:0}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"]
|
|
249
269
|
},] }
|
|
250
270
|
];
|
|
251
271
|
TheSeamBaseLayoutComponent.ctorParameters = function () { return [
|
|
@@ -254,6 +274,8 @@
|
|
|
254
274
|
]; };
|
|
255
275
|
TheSeamBaseLayoutComponent.propDecorators = {
|
|
256
276
|
overlayNav: [{ type: i0.Input }],
|
|
277
|
+
mobileBreakpoint: [{ type: i0.Input }],
|
|
278
|
+
showSidebar: [{ type: i0.Input }],
|
|
257
279
|
_topBarTpl: [{ type: i0.ContentChild, args: [BaseLayoutTopBarDirective, { static: true, read: i0.TemplateRef },] }],
|
|
258
280
|
_sideBarTpl: [{ type: i0.ContentChild, args: [BaseLayoutSideBarDirective, { static: true, read: i0.TemplateRef },] }],
|
|
259
281
|
_contentTpl: [{ type: i0.ContentChild, args: [BaseLayoutContentDirective, { static: true, read: i0.TemplateRef },] }],
|
|
@@ -276,6 +298,21 @@
|
|
|
276
298
|
{ type: i0.ElementRef }
|
|
277
299
|
]; };
|
|
278
300
|
|
|
301
|
+
var BaseLayoutSideBarHeaderDirective = /** @class */ (function () {
|
|
302
|
+
function BaseLayoutSideBarHeaderDirective(_elementRef) {
|
|
303
|
+
this._elementRef = _elementRef;
|
|
304
|
+
}
|
|
305
|
+
return BaseLayoutSideBarHeaderDirective;
|
|
306
|
+
}());
|
|
307
|
+
BaseLayoutSideBarHeaderDirective.decorators = [
|
|
308
|
+
{ type: i0.Directive, args: [{
|
|
309
|
+
selector: '[seamBaseLayoutSideBarHeader]'
|
|
310
|
+
},] }
|
|
311
|
+
];
|
|
312
|
+
BaseLayoutSideBarHeaderDirective.ctorParameters = function () { return [
|
|
313
|
+
{ type: i0.ElementRef }
|
|
314
|
+
]; };
|
|
315
|
+
|
|
279
316
|
var TheSeamBaseLayoutModule = /** @class */ (function () {
|
|
280
317
|
function TheSeamBaseLayoutModule() {
|
|
281
318
|
}
|
|
@@ -288,6 +325,7 @@
|
|
|
288
325
|
BaseLayoutContentDirective,
|
|
289
326
|
BaseLayoutSideBarDirective,
|
|
290
327
|
BaseLayoutSideBarFooterDirective,
|
|
328
|
+
BaseLayoutSideBarHeaderDirective,
|
|
291
329
|
BaseLayoutTopBarDirective,
|
|
292
330
|
BaseLayoutNavToggleDirective,
|
|
293
331
|
BaseLayoutContentHeaderDirective,
|
|
@@ -305,6 +343,7 @@
|
|
|
305
343
|
BaseLayoutContentDirective,
|
|
306
344
|
BaseLayoutSideBarDirective,
|
|
307
345
|
BaseLayoutSideBarFooterDirective,
|
|
346
|
+
BaseLayoutSideBarHeaderDirective,
|
|
308
347
|
BaseLayoutTopBarDirective,
|
|
309
348
|
BaseLayoutNavToggleDirective,
|
|
310
349
|
BaseLayoutContentHeaderDirective,
|
|
@@ -1774,14 +1813,20 @@
|
|
|
1774
1813
|
this._sideNav = _sideNav;
|
|
1775
1814
|
this._baseLayoutRef = _baseLayoutRef;
|
|
1776
1815
|
this._ngUnsubscribe = new rxjs.Subject();
|
|
1816
|
+
this.faBars = freeSolidSvgIcons.faBars;
|
|
1777
1817
|
// @HostBinding('@sideNavExpand') _sideNavExpand = EXPANDED_STATE
|
|
1778
1818
|
// _sideNavExpand = EXPANDED_STATE
|
|
1779
1819
|
// @HostBinding('@sideNavAnim') _sideNavExpand = EXPANDED_STATE
|
|
1780
1820
|
this._sideNavExpand = 'initial';
|
|
1781
1821
|
this.hasHeaderToggle = true;
|
|
1822
|
+
this.toggleIcon = freeSolidSvgIcons.faBars;
|
|
1782
1823
|
this._items = new rxjs.BehaviorSubject([]);
|
|
1824
|
+
this.indentSize = 10;
|
|
1783
1825
|
this._expanded = new rxjs.BehaviorSubject(true);
|
|
1784
1826
|
this.expanded$ = this._expanded.asObservable();
|
|
1827
|
+
this.expandOrigin = 'left';
|
|
1828
|
+
this.expandHeight = '100%';
|
|
1829
|
+
this.expandWidth = 'calc(100vw - 50px)';
|
|
1785
1830
|
this._overlay = new rxjs.BehaviorSubject(false);
|
|
1786
1831
|
this.overlay$ = this._overlay.asObservable();
|
|
1787
1832
|
this.toggleExpand = new i0.EventEmitter();
|
|
@@ -1831,6 +1876,9 @@
|
|
|
1831
1876
|
this.sideNavExpandedState$
|
|
1832
1877
|
.pipe(operators.takeUntil(this._ngUnsubscribe))
|
|
1833
1878
|
.subscribe(function (v) { return _this._sideNavExpand = v; });
|
|
1879
|
+
if (this._sideBarHeaderTpl) {
|
|
1880
|
+
this._sideBarHeaderPortal = new portal.TemplatePortal(this._sideBarHeaderTpl, this._viewContainerRef);
|
|
1881
|
+
}
|
|
1834
1882
|
if (this._sideBarFooterTpl) {
|
|
1835
1883
|
this._sideBarFooterPortal = new portal.TemplatePortal(this._sideBarFooterTpl, this._viewContainerRef);
|
|
1836
1884
|
}
|
|
@@ -1861,12 +1909,33 @@
|
|
|
1861
1909
|
this._backdropHidden.next(true);
|
|
1862
1910
|
}
|
|
1863
1911
|
};
|
|
1912
|
+
Object.defineProperty(SideNavComponent.prototype, "expandOriginTransform", {
|
|
1913
|
+
get: function () {
|
|
1914
|
+
switch (this.expandOrigin) {
|
|
1915
|
+
case 'right':
|
|
1916
|
+
return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(100vw) translateX(-100%)' :
|
|
1917
|
+
this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(100vw)' : null;
|
|
1918
|
+
case 'top':
|
|
1919
|
+
return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(0)' :
|
|
1920
|
+
this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(-100%)' : null;
|
|
1921
|
+
case 'bottom':
|
|
1922
|
+
return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateY(100vh) translateY(-100%)' :
|
|
1923
|
+
this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateY(100vh)' : null;
|
|
1924
|
+
case 'left':
|
|
1925
|
+
default:
|
|
1926
|
+
return this._sideNavExpand === EXPANDED_OVERLAY_STATE ? 'translateX(0)' :
|
|
1927
|
+
this._sideNavExpand === COLLAPSED_OVERLAY_STATE ? 'translateX(-100%)' : null;
|
|
1928
|
+
}
|
|
1929
|
+
},
|
|
1930
|
+
enumerable: false,
|
|
1931
|
+
configurable: true
|
|
1932
|
+
});
|
|
1864
1933
|
return SideNavComponent;
|
|
1865
1934
|
}());
|
|
1866
1935
|
SideNavComponent.decorators = [
|
|
1867
1936
|
{ type: i0.Component, args: [{
|
|
1868
1937
|
selector: 'seam-side-nav',
|
|
1869
|
-
template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n [@sideNavBackdrop]=\"_sideNavExpand\"\n [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"></div>\n\n<div
|
|
1938
|
+
template: "<div class=\"side-nav-backdrop\" *ngIf=\"isMobile$ | async\"\n [@sideNavBackdrop]=\"_sideNavExpand\"\n [class.side-nav-backdrop-hidden]=\"_backdropHidden | async\"\n (click)=\"collapse()\"></div>\n\n<div\n class=\"side-nav-inner-wrapper\"\n [@sideNavExpand]=\"{\n value: _sideNavExpand,\n params: {\n origin: expandOriginTransform,\n height: expandHeight,\n width: expandWidth\n }\n }\"\n (@sideNavExpand.start)=\"animateStart()\"\n (@sideNavExpand.done)=\"animateEnd()\">\n <nav class=\"nav side-nav-content\">\n <seam-side-nav-toggle *ngIf=\"hasHeaderToggle\"\n [toggleIcon]=\"toggleIcon\"\n [toggleTpl]=\"toggleTpl\"\n [expanded]=\"expanded$ | async\"\n (toggleExpand)=\"toggle()\">\n <ng-template [cdkPortalOutlet]=\"_sideBarHeaderPortal\"></ng-template>\n </seam-side-nav-toggle>\n <div class=\"side-nav-items-container\" seamOverlayScrollbar>\n <div class=\"side-nav--group side-nav--group--level-0\">\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 [hideEmptyIcon]=\"hideEmptyIcon\"\n [indentSize]=\"indentSize\">\n </seam-side-nav-item>\n </div>\n </div>\n <ng-template [cdkPortalOutlet]=\"_sideBarFooterPortal\"></ng-template>\n </nav>\n</div>\n",
|
|
1870
1939
|
providers: [
|
|
1871
1940
|
TheSeamSideNavService
|
|
1872
1941
|
],
|
|
@@ -1893,32 +1962,42 @@
|
|
|
1893
1962
|
animations.transition(sideNavExpandStateChangeFn, animations.animate('0.2s ease-in-out')),
|
|
1894
1963
|
]),
|
|
1895
1964
|
animations.trigger('sideNavExpand', [
|
|
1896
|
-
// TODO: Make width configurable.
|
|
1965
|
+
// TODO: Make width configurable for non-overlay state.
|
|
1897
1966
|
animations.state(EXPANDED_STATE$1, animations.style({ width: '260px' })),
|
|
1898
1967
|
animations.state(COLLAPSED_STATE$1, animations.style({ width: '50px', 'overflow-x': 'hidden' })),
|
|
1899
1968
|
animations.state(EXPANDED_OVERLAY_STATE, animations.style({
|
|
1900
1969
|
position: 'absolute',
|
|
1901
1970
|
top: 0,
|
|
1902
|
-
height: '100%',
|
|
1903
1971
|
bottom: 0,
|
|
1904
1972
|
left: 0,
|
|
1905
|
-
|
|
1973
|
+
height: '{{ height }}',
|
|
1974
|
+
width: '{{ width }}',
|
|
1975
|
+
transform: '{{ origin }}',
|
|
1906
1976
|
zIndex: '9999',
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1977
|
+
}), {
|
|
1978
|
+
params: {
|
|
1979
|
+
origin: 'translateX(100%)',
|
|
1980
|
+
height: '100%',
|
|
1981
|
+
width: 'calc(100vw - 50px)',
|
|
1982
|
+
}
|
|
1983
|
+
}),
|
|
1910
1984
|
animations.state(COLLAPSED_OVERLAY_STATE, animations.style({
|
|
1911
1985
|
position: 'absolute',
|
|
1912
1986
|
top: 0,
|
|
1913
|
-
height: '100%',
|
|
1914
1987
|
bottom: 0,
|
|
1915
1988
|
left: 0,
|
|
1916
|
-
|
|
1989
|
+
height: '{{ height }}',
|
|
1990
|
+
width: '{{ width }}',
|
|
1991
|
+
transform: '{{ origin }}',
|
|
1992
|
+
'overflow-x': 'hidden',
|
|
1917
1993
|
zIndex: '9999',
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1994
|
+
}), {
|
|
1995
|
+
params: {
|
|
1996
|
+
origin: 'translateX(0)',
|
|
1997
|
+
height: '100%',
|
|
1998
|
+
width: 'calc(100vw - 50px)',
|
|
1999
|
+
}
|
|
2000
|
+
}),
|
|
1922
2001
|
// transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
|
|
1923
2002
|
animations.transition(sideNavExpandStateChangeFn, animations.animate('0.2s ease-in-out')),
|
|
1924
2003
|
// transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, [
|
|
@@ -1947,15 +2026,26 @@
|
|
|
1947
2026
|
SideNavComponent.propDecorators = {
|
|
1948
2027
|
_sideNavExpand: [{ type: i0.HostBinding, args: ['@sideNavAnim',] }],
|
|
1949
2028
|
hasHeaderToggle: [{ type: i0.Input }],
|
|
2029
|
+
toggleIcon: [{ type: i0.Input }],
|
|
2030
|
+
toggleTpl: [{ type: i0.Input }],
|
|
1950
2031
|
items: [{ type: i0.Input }],
|
|
2032
|
+
hideEmptyIcon: [{ type: i0.Input }],
|
|
2033
|
+
indentSize: [{ type: i0.Input }],
|
|
1951
2034
|
expanded: [{ type: i0.Input }],
|
|
2035
|
+
expandOrigin: [{ type: i0.Input }],
|
|
2036
|
+
expandHeight: [{ type: i0.Input }],
|
|
2037
|
+
expandWidth: [{ type: i0.Input }],
|
|
1952
2038
|
overlay: [{ type: i0.Input }],
|
|
1953
2039
|
toggleExpand: [{ type: i0.Output }],
|
|
2040
|
+
_sideBarHeaderTpl: [{ type: i0.ContentChild, args: [BaseLayoutSideBarHeaderDirective, { static: true, read: i0.TemplateRef },] }],
|
|
1954
2041
|
_sideBarFooterTpl: [{ type: i0.ContentChild, args: [BaseLayoutSideBarFooterDirective, { static: true, read: i0.TemplateRef },] }]
|
|
1955
2042
|
};
|
|
1956
2043
|
__decorate([
|
|
1957
2044
|
core.InputBoolean()
|
|
1958
|
-
], SideNavComponent.prototype, "hasHeaderToggle", void 0);
|
|
2045
|
+
], SideNavComponent.prototype, "hasHeaderToggle", void 0);
|
|
2046
|
+
__decorate([
|
|
2047
|
+
core.InputNumber(10)
|
|
2048
|
+
], SideNavComponent.prototype, "indentSize", void 0);
|
|
1959
2049
|
|
|
1960
2050
|
var EXPANDED_STATE = 'expanded';
|
|
1961
2051
|
var COLLAPSED_STATE = 'collapsed';
|
|
@@ -2008,13 +2098,14 @@
|
|
|
2008
2098
|
this._badgeTooltip = {
|
|
2009
2099
|
tooltip: value,
|
|
2010
2100
|
placement: 'auto',
|
|
2011
|
-
disabled: false
|
|
2101
|
+
disabled: false,
|
|
2102
|
+
container: 'body'
|
|
2012
2103
|
};
|
|
2013
2104
|
}
|
|
2014
2105
|
else {
|
|
2015
2106
|
this._badgeTooltip = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
|
|
2016
2107
|
? value.disabled
|
|
2017
|
-
: typeof value.tooltip === 'string' ? false : true });
|
|
2108
|
+
: typeof value.tooltip === 'string' ? false : true, container: value.container || 'body' });
|
|
2018
2109
|
}
|
|
2019
2110
|
}
|
|
2020
2111
|
else {
|
|
@@ -2054,12 +2145,19 @@
|
|
|
2054
2145
|
this._sideNav.collapse();
|
|
2055
2146
|
}
|
|
2056
2147
|
};
|
|
2148
|
+
Object.defineProperty(SideNavItemComponent.prototype, "showIconBlock", {
|
|
2149
|
+
get: function () {
|
|
2150
|
+
return utils.notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
|
|
2151
|
+
},
|
|
2152
|
+
enumerable: false,
|
|
2153
|
+
configurable: true
|
|
2154
|
+
});
|
|
2057
2155
|
return SideNavItemComponent;
|
|
2058
2156
|
}());
|
|
2059
2157
|
SideNavItemComponent.decorators = [
|
|
2060
2158
|
{ type: i0.Component, args: [{
|
|
2061
2159
|
selector: 'seam-side-nav-item',
|
|
2062
|
-
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
|
|
2160
|
+
template: "<div class=\"d-flex flex-row side-nav-item-wrapper\">\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 [hideEmptyIcon]=\"hideEmptyIcon\"\n [indentSize]=\"indentSize\">\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 align-items-stretch 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 align-items-center w-100\" [class.nav-link__compact]=\"compact\">\n <div [style.padding-left.px]=\"hierLevel * indentSize\"></div>\n <div class=\"side-nav-item--icon\" *ngIf=\"showIconBlock\">\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\" *ngIf=\"showIconBlock\">\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\" *ngIf=\"showIconBlock\">\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",
|
|
2063
2161
|
exportAs: 'seamSideNavItem',
|
|
2064
2162
|
animations: [
|
|
2065
2163
|
animations.trigger('childGroupAnim', [
|
|
@@ -2092,7 +2190,7 @@
|
|
|
2092
2190
|
],
|
|
2093
2191
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2094
2192
|
encapsulation: i0.ViewEncapsulation.None,
|
|
2095
|
-
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:0px;right:0px}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:#
|
|
2193
|
+
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.seam-side-nav-item--active .side-nav-btn{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:0px;right:0px}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:#fff;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 .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"]
|
|
2096
2194
|
},] }
|
|
2097
2195
|
];
|
|
2098
2196
|
SideNavItemComponent.ctorParameters = function () { return [
|
|
@@ -2102,6 +2200,7 @@
|
|
|
2102
2200
|
SideNavItemComponent.propDecorators = {
|
|
2103
2201
|
itemType: [{ type: i0.Input }],
|
|
2104
2202
|
icon: [{ type: i0.Input }],
|
|
2203
|
+
hideEmptyIcon: [{ type: i0.Input }],
|
|
2105
2204
|
label: [{ type: i0.Input }],
|
|
2106
2205
|
active: [{ type: i0.Input }],
|
|
2107
2206
|
link: [{ type: i0.Input }],
|
|
@@ -2130,7 +2229,6 @@
|
|
|
2130
2229
|
|
|
2131
2230
|
var SideNavToggleComponent = /** @class */ (function () {
|
|
2132
2231
|
function SideNavToggleComponent() {
|
|
2133
|
-
this.faBars = freeSolidSvgIcons.faBars;
|
|
2134
2232
|
this.expanded = false;
|
|
2135
2233
|
this.toggleExpand = new i0.EventEmitter();
|
|
2136
2234
|
}
|
|
@@ -2143,18 +2241,20 @@
|
|
|
2143
2241
|
SideNavToggleComponent.decorators = [
|
|
2144
2242
|
{ type: i0.Component, args: [{
|
|
2145
2243
|
selector: 'seam-side-nav-toggle',
|
|
2146
|
-
template: "<div class=\"side-nav-toggle--content\" *ngIf=\"expanded\">\n
|
|
2244
|
+
template: "<div class=\"side-nav-toggle--content\">\n <ng-container *ngIf=\"expanded\">\n <ng-content></ng-content>\n </ng-container>\n</div>\n\n<ng-container *ngIf=\"toggleTpl; else iconBtn\">\n <button\n class=\"side-nav-toggle--btn mx-1\"\n (click)=\"toggle()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <ng-container *ngTemplateOutlet=\"toggleTpl\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #iconBtn>\n <button seamIconBtn [icon]=\"toggleIcon\"\n iconType=\"borderless-styled-square\"\n btnSize=\"sm\"\n class=\"side-nav-toggle--btn mx-1\"\n (click)=\"toggle()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n </button>\n</ng-template>\n",
|
|
2147
2245
|
host: {
|
|
2148
2246
|
'[class.side-nav-toggle--compact]': '!expanded'
|
|
2149
2247
|
},
|
|
2150
2248
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2151
2249
|
encapsulation: i0.ViewEncapsulation.None,
|
|
2152
|
-
styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{
|
|
2250
|
+
styles: ["seam-side-nav-toggle{display:flex;flex-direction:row;flex-shrink:0;align-items:center;background:#357ebd;position:relative;height:45px;width:100%}seam-side-nav-toggle .side-nav-toggle--content{flex:1 1 0}seam-side-nav-toggle .side-nav-toggle--btn{color:#fff}seam-side-nav-toggle .side-nav-toggle--btn seam-icon{padding:5px}\n"]
|
|
2153
2251
|
},] }
|
|
2154
2252
|
];
|
|
2155
2253
|
SideNavToggleComponent.ctorParameters = function () { return []; };
|
|
2156
2254
|
SideNavToggleComponent.propDecorators = {
|
|
2157
2255
|
expanded: [{ type: i0.Input }],
|
|
2256
|
+
toggleIcon: [{ type: i0.Input }],
|
|
2257
|
+
toggleTpl: [{ type: i0.Input }],
|
|
2158
2258
|
toggleExpand: [{ type: i0.Output }]
|
|
2159
2259
|
};
|
|
2160
2260
|
__decorate([
|
|
@@ -2233,7 +2333,7 @@
|
|
|
2233
2333
|
{ type: i0.Component, args: [{
|
|
2234
2334
|
// tslint:disable-next-line:component-selector
|
|
2235
2335
|
selector: 'button[seamTopBarMenuButton]',
|
|
2236
|
-
template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n <div class=\"text-left flex-grow-1 text-truncate\">\n <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n </div>\n <!-- Arrow Button -->\n <div class=\"pl-2 d-flex flex-column\">\n <div class=\"flex-grow-1\"></div>\n <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n <div class=\"flex-grow-1\"></div>\n </div>\n</div>\n<ng-template #compactTpl>\n <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n",
|
|
2336
|
+
template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n <div class=\"text-left flex-grow-1 text-truncate\">\n <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n </div>\n <!-- Arrow Button -->\n <div class=\"pl-2 d-flex flex-column\">\n <div class=\"flex-grow-1\"></div>\n <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n <div class=\"flex-grow-1\"></div>\n </div>\n</div>\n<ng-template #compactTpl>\n <ng-container *ngIf=\"compactDetailTpl; else iconTpl\">\n <ng-template [ngTemplateOutlet]=\"$any(compactDetailTpl)\"></ng-template>\n </ng-container>\n <ng-template #iconTpl>\n <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n </ng-template>\n</ng-template>\n",
|
|
2237
2337
|
encapsulation: i0.ViewEncapsulation.None,
|
|
2238
2338
|
exportAs: 'seamButton',
|
|
2239
2339
|
// tslint:disable-next-line:use-input-property-decorator
|
|
@@ -2241,7 +2341,7 @@
|
|
|
2241
2341
|
// tslint:disable-next-line:use-host-property-decorator
|
|
2242
2342
|
host: {
|
|
2243
2343
|
'attr.type': 'button',
|
|
2244
|
-
'class': 'btn border text-decoration-none py-0',
|
|
2344
|
+
'class': 'btn border text-decoration-none py-0 top-bar-menu-button',
|
|
2245
2345
|
'[attr.aria-disabled]': 'disabled.toString()',
|
|
2246
2346
|
'[attr.disabled]': 'disabled || null',
|
|
2247
2347
|
},
|
|
@@ -2251,6 +2351,7 @@
|
|
|
2251
2351
|
];
|
|
2252
2352
|
TopBarMenuButtonComponent.propDecorators = {
|
|
2253
2353
|
detailTpl: [{ type: i0.Input }],
|
|
2354
|
+
compactDetailTpl: [{ type: i0.Input }],
|
|
2254
2355
|
compact: [{ type: i0.Input }],
|
|
2255
2356
|
profileIcon: [{ type: i0.Input }],
|
|
2256
2357
|
_hasCompactClass: [{ type: i0.HostBinding, args: ['class.top-bar-menu-button--compact',] }],
|
|
@@ -2286,7 +2387,15 @@
|
|
|
2286
2387
|
var TopBarItemDirective = /** @class */ (function () {
|
|
2287
2388
|
function TopBarItemDirective(template) {
|
|
2288
2389
|
this.template = template;
|
|
2390
|
+
this.position = 'right';
|
|
2289
2391
|
}
|
|
2392
|
+
Object.defineProperty(TopBarItemDirective.prototype, "seamTopBarItem", {
|
|
2393
|
+
set: function (value) {
|
|
2394
|
+
this.position = value;
|
|
2395
|
+
},
|
|
2396
|
+
enumerable: false,
|
|
2397
|
+
configurable: true
|
|
2398
|
+
});
|
|
2290
2399
|
return TopBarItemDirective;
|
|
2291
2400
|
}());
|
|
2292
2401
|
TopBarItemDirective.decorators = [
|
|
@@ -2296,7 +2405,10 @@
|
|
|
2296
2405
|
];
|
|
2297
2406
|
TopBarItemDirective.ctorParameters = function () { return [
|
|
2298
2407
|
{ type: i0.TemplateRef }
|
|
2299
|
-
]; };
|
|
2408
|
+
]; };
|
|
2409
|
+
TopBarItemDirective.propDecorators = {
|
|
2410
|
+
seamTopBarItem: [{ type: i0.Input }]
|
|
2411
|
+
};
|
|
2300
2412
|
|
|
2301
2413
|
var TopBarMenuBtnDetailDirective = /** @class */ (function () {
|
|
2302
2414
|
function TopBarMenuBtnDetailDirective(template) {
|
|
@@ -2328,6 +2440,36 @@
|
|
|
2328
2440
|
{ type: menu.MenuComponent, decorators: [{ type: i0.Self }] }
|
|
2329
2441
|
]; };
|
|
2330
2442
|
|
|
2443
|
+
var TopBarCompactMenuBtnDetailDirective = /** @class */ (function () {
|
|
2444
|
+
function TopBarCompactMenuBtnDetailDirective(template) {
|
|
2445
|
+
this.template = template;
|
|
2446
|
+
}
|
|
2447
|
+
return TopBarCompactMenuBtnDetailDirective;
|
|
2448
|
+
}());
|
|
2449
|
+
TopBarCompactMenuBtnDetailDirective.decorators = [
|
|
2450
|
+
{ type: i0.Directive, args: [{
|
|
2451
|
+
selector: '[seamTopBarCompactMenuBtnDetail]'
|
|
2452
|
+
},] }
|
|
2453
|
+
];
|
|
2454
|
+
TopBarCompactMenuBtnDetailDirective.ctorParameters = function () { return [
|
|
2455
|
+
{ type: i0.TemplateRef }
|
|
2456
|
+
]; };
|
|
2457
|
+
|
|
2458
|
+
var TopBarNavToggleBtnDetailDirective = /** @class */ (function () {
|
|
2459
|
+
function TopBarNavToggleBtnDetailDirective(template) {
|
|
2460
|
+
this.template = template;
|
|
2461
|
+
}
|
|
2462
|
+
return TopBarNavToggleBtnDetailDirective;
|
|
2463
|
+
}());
|
|
2464
|
+
TopBarNavToggleBtnDetailDirective.decorators = [
|
|
2465
|
+
{ type: i0.Directive, args: [{
|
|
2466
|
+
selector: '[seamTopBarNavToggleBtnDetail]'
|
|
2467
|
+
},] }
|
|
2468
|
+
];
|
|
2469
|
+
TopBarNavToggleBtnDetailDirective.ctorParameters = function () { return [
|
|
2470
|
+
{ type: i0.TemplateRef }
|
|
2471
|
+
]; };
|
|
2472
|
+
|
|
2331
2473
|
/**
|
|
2332
2474
|
* Top bar of an app.
|
|
2333
2475
|
*
|
|
@@ -2352,8 +2494,26 @@
|
|
|
2352
2494
|
this.logoRoute = '/';
|
|
2353
2495
|
/** Determines if the title should be displayed. */
|
|
2354
2496
|
this.hasTitle = false;
|
|
2497
|
+
/** Determines if the top bar button should be displayed. */
|
|
2498
|
+
this.hasTopBarMenuButton = true;
|
|
2355
2499
|
/** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
|
|
2356
2500
|
this.profileIcon = freeRegularSvgIcons.faUserCircle;
|
|
2501
|
+
/** Icon to display for mobile nav toggle. Defaults to faBars. */
|
|
2502
|
+
this.toggleIcon = freeSolidSvgIcons.faBars;
|
|
2503
|
+
/** Display nav toggle on either left or right side of top bar. Defaults to left. */
|
|
2504
|
+
this.navToggleAlign = 'left';
|
|
2505
|
+
/** @ignore */
|
|
2506
|
+
this._leftItems = new rxjs.BehaviorSubject([]);
|
|
2507
|
+
/** Additional templates to display on left side of top bar */
|
|
2508
|
+
this.leftItems$ = this._leftItems.asObservable();
|
|
2509
|
+
/** @ignore */
|
|
2510
|
+
this._centerItems = new rxjs.BehaviorSubject([]);
|
|
2511
|
+
/** Additional templates to display in center of top bar */
|
|
2512
|
+
this.centerItems$ = this._centerItems.asObservable();
|
|
2513
|
+
/** @ignore */
|
|
2514
|
+
this._rightItems = new rxjs.BehaviorSubject([]);
|
|
2515
|
+
/** Additional templates to display on right side of top bar */
|
|
2516
|
+
this.rightItems$ = this._rightItems.asObservable();
|
|
2357
2517
|
this.isMobile$ = this._layout.isMobile$;
|
|
2358
2518
|
}
|
|
2359
2519
|
/** @ignore */
|
|
@@ -2367,7 +2527,16 @@
|
|
|
2367
2527
|
TheSeamTopBarComponent.prototype.ngAfterContentInit = function () {
|
|
2368
2528
|
var _this = this;
|
|
2369
2529
|
if (this._topBarItems) {
|
|
2370
|
-
this.
|
|
2530
|
+
this._topBarItems.changes.pipe(operators.startWith(undefined), operators.takeUntil(this._ngUnsubscribe), operators.map(function () {
|
|
2531
|
+
var _a;
|
|
2532
|
+
var items = ((_a = _this._topBarItems) === null || _a === void 0 ? void 0 : _a.toArray()) || [];
|
|
2533
|
+
var left = items.filter(function (i) { return i.position === 'left'; });
|
|
2534
|
+
var right = items.filter(function (i) { return i.position === 'right'; });
|
|
2535
|
+
var center = items.filter(function (i) { return i.position === 'center'; });
|
|
2536
|
+
_this._leftItems.next(left);
|
|
2537
|
+
_this._rightItems.next(right);
|
|
2538
|
+
_this._centerItems.next(center);
|
|
2539
|
+
}), operators.shareReplay({ bufferSize: 1, refCount: true })).subscribe();
|
|
2371
2540
|
}
|
|
2372
2541
|
};
|
|
2373
2542
|
return TheSeamTopBarComponent;
|
|
@@ -2375,11 +2544,11 @@
|
|
|
2375
2544
|
TheSeamTopBarComponent.decorators = [
|
|
2376
2545
|
{ type: i0.Component, args: [{
|
|
2377
2546
|
selector: 'seam-top-bar',
|
|
2378
|
-
template: "
|
|
2547
|
+
template: "<div class=\"top-bar--left d-flex\">\n <!-- Nav Toggle -->\n <ng-container *ngIf=\"navToggleAlign === 'left'\">\n <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n </ng-container>\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 <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"logoTpl\"></ng-container>\n </div>\n </ng-template>\n\n <ng-template #logoTpl>\n <div>\n <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"logoSm ? logoSm : logo\" alt=\"Logo\">\n </div>\n </ng-template>\n\n <!-- Title -->\n <div class=\"d-flex flex-column\" *ngIf=\"hasTitle\">\n <seam-top-bar-title\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-items top-bar-items--left mr-2\">\n <ng-container *ngFor=\"let item of leftItems$ | async\">\n <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"top-bar--center\">\n <!-- Items -->\n <div class=\"top-bar-items top-bar-items--center mr-2\">\n <ng-container *ngFor=\"let item of centerItems$ | async\">\n <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"top-bar--right d-flex\">\n <!-- Items -->\n <div class=\"top-bar-items top-bar-items--right mr-2\">\n <ng-container *ngFor=\"let item of rightItems$ | async\">\n <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n </ng-container>\n </div>\n\n <!-- Menu -->\n <button\n *ngIf=\"hasTopBarMenuButton\"\n seamTopBarMenuButton\n [seamMenuToggle]=\"_topBarMenu?.menu\"\n [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n [compactDetailTpl]=\"_topBarCompactMenuBtnDetailTpl?.template\"\n [compact]=\"isMobile$ | async\"\n [profileIcon]=\"profileIcon\">\n </button>\n\n <ng-container *ngIf=\"navToggleAlign === 'right'\">\n <ng-container *ngTemplateOutlet=\"navToggle\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #navToggle>\n <div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n <ng-container *ngIf=\"_topBarNavToggleBtnDetailTpl; else iconBtn\">\n <button seamButton seamBaseLayoutNavToggle>\n <ng-template [ngTemplateOutlet]=\"_topBarNavToggleBtnDetailTpl?.template\"></ng-template>\n </button>\n </ng-container>\n <ng-template #iconBtn>\n <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"toggleIcon\" iconType=\"borderless-styled-square\"></button>\n </ng-template>\n </div>\n</ng-template>\n\n",
|
|
2379
2548
|
encapsulation: i0.ViewEncapsulation.None,
|
|
2380
2549
|
exportAs: 'seamTopBar',
|
|
2381
2550
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2382
|
-
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-
|
|
2551
|
+
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--left{flex-grow:1}.top-bar-items{display:flex;align-items:center}\n"]
|
|
2383
2552
|
},] }
|
|
2384
2553
|
];
|
|
2385
2554
|
TheSeamTopBarComponent.ctorParameters = function () { return [
|
|
@@ -2389,6 +2558,8 @@
|
|
|
2389
2558
|
_topBarMenu: [{ type: i0.ContentChild, args: [TopBarMenuDirective, { static: true },] }],
|
|
2390
2559
|
_topBarItems: [{ type: i0.ContentChildren, args: [TopBarItemDirective,] }],
|
|
2391
2560
|
_topBarMenuBtnDetailTpl: [{ type: i0.ContentChild, args: [TopBarMenuBtnDetailDirective,] }],
|
|
2561
|
+
_topBarCompactMenuBtnDetailTpl: [{ type: i0.ContentChild, args: [TopBarCompactMenuBtnDetailDirective,] }],
|
|
2562
|
+
_topBarNavToggleBtnDetailTpl: [{ type: i0.ContentChild, args: [TopBarNavToggleBtnDetailDirective,] }],
|
|
2392
2563
|
logo: [{ type: i0.Input }],
|
|
2393
2564
|
logoSm: [{ type: i0.Input }],
|
|
2394
2565
|
logoHref: [{ type: i0.Input }],
|
|
@@ -2397,11 +2568,17 @@
|
|
|
2397
2568
|
hasTitle: [{ type: i0.Input }],
|
|
2398
2569
|
titleText: [{ type: i0.Input }],
|
|
2399
2570
|
subTitleText: [{ type: i0.Input }],
|
|
2400
|
-
|
|
2571
|
+
hasTopBarMenuButton: [{ type: i0.Input }],
|
|
2572
|
+
profileIcon: [{ type: i0.Input }],
|
|
2573
|
+
toggleIcon: [{ type: i0.Input }],
|
|
2574
|
+
navToggleAlign: [{ type: i0.Input }]
|
|
2401
2575
|
};
|
|
2402
2576
|
__decorate([
|
|
2403
2577
|
core.InputBoolean()
|
|
2404
|
-
], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
|
|
2578
|
+
], TheSeamTopBarComponent.prototype, "hasTitle", void 0);
|
|
2579
|
+
__decorate([
|
|
2580
|
+
core.InputBoolean()
|
|
2581
|
+
], TheSeamTopBarComponent.prototype, "hasTopBarMenuButton", void 0);
|
|
2405
2582
|
|
|
2406
2583
|
var TheSeamTopBarModule = /** @class */ (function () {
|
|
2407
2584
|
function TheSeamTopBarModule() {
|
|
@@ -2416,7 +2593,9 @@
|
|
|
2416
2593
|
TopBarMenuButtonComponent,
|
|
2417
2594
|
TopBarMenuDirective,
|
|
2418
2595
|
TopBarItemDirective,
|
|
2419
|
-
TopBarMenuBtnDetailDirective
|
|
2596
|
+
TopBarMenuBtnDetailDirective,
|
|
2597
|
+
TopBarCompactMenuBtnDetailDirective,
|
|
2598
|
+
TopBarNavToggleBtnDetailDirective
|
|
2420
2599
|
],
|
|
2421
2600
|
imports: [
|
|
2422
2601
|
common.CommonModule,
|
|
@@ -2433,7 +2612,9 @@
|
|
|
2433
2612
|
TopBarMenuDirective,
|
|
2434
2613
|
menu.TheSeamMenuModule,
|
|
2435
2614
|
TopBarItemDirective,
|
|
2436
|
-
TopBarMenuBtnDetailDirective
|
|
2615
|
+
TopBarMenuBtnDetailDirective,
|
|
2616
|
+
TopBarCompactMenuBtnDetailDirective,
|
|
2617
|
+
TopBarNavToggleBtnDetailDirective
|
|
2437
2618
|
]
|
|
2438
2619
|
},] }
|
|
2439
2620
|
];
|
|
@@ -3303,6 +3484,656 @@
|
|
|
3303
3484
|
},] }
|
|
3304
3485
|
];
|
|
3305
3486
|
|
|
3487
|
+
function isHorizontalNavItemType(item, type) {
|
|
3488
|
+
return item.itemType === type;
|
|
3489
|
+
}
|
|
3490
|
+
function isHorizontalNavItemActive(item) {
|
|
3491
|
+
var _a, _b;
|
|
3492
|
+
return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : false;
|
|
3493
|
+
}
|
|
3494
|
+
function isHorizontalNavItemExpanded(item) {
|
|
3495
|
+
var _a, _b;
|
|
3496
|
+
return (_b = (_a = item.__state) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
|
|
3497
|
+
}
|
|
3498
|
+
function horizontalNavItemHasChildren(item) {
|
|
3499
|
+
return horizontalNavItemCanHaveChildren(item) && utils.hasProperty(item, 'children') && item.children.length > 0;
|
|
3500
|
+
}
|
|
3501
|
+
function horizontalNavItemCanHaveChildren(item) {
|
|
3502
|
+
return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
|
|
3503
|
+
}
|
|
3504
|
+
function horizontalNavItemHasActiveChild(item) {
|
|
3505
|
+
var e_1, _c;
|
|
3506
|
+
if (!horizontalNavItemHasChildren(item)) {
|
|
3507
|
+
return false;
|
|
3508
|
+
}
|
|
3509
|
+
try {
|
|
3510
|
+
for (var _d = __values(item.children), _e = _d.next(); !_e.done; _e = _d.next()) {
|
|
3511
|
+
var child = _e.value;
|
|
3512
|
+
if (getHorizontalNavItemStateProp(child, 'active') || horizontalNavItemHasActiveChild(child)) {
|
|
3513
|
+
return true;
|
|
3514
|
+
}
|
|
3515
|
+
}
|
|
3516
|
+
}
|
|
3517
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
3518
|
+
finally {
|
|
3519
|
+
try {
|
|
3520
|
+
if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
|
|
3521
|
+
}
|
|
3522
|
+
finally { if (e_1) throw e_1.error; }
|
|
3523
|
+
}
|
|
3524
|
+
return false;
|
|
3525
|
+
}
|
|
3526
|
+
function horizontalNavItemHasExpandedChild(item) {
|
|
3527
|
+
var e_2, _c;
|
|
3528
|
+
if (!horizontalNavItemHasChildren(item)) {
|
|
3529
|
+
return false;
|
|
3530
|
+
}
|
|
3531
|
+
try {
|
|
3532
|
+
for (var _d = __values(item.children), _e = _d.next(); !_e.done; _e = _d.next()) {
|
|
3533
|
+
var child = _e.value;
|
|
3534
|
+
if (getHorizontalNavItemStateProp(child, 'expanded')) {
|
|
3535
|
+
return true;
|
|
3536
|
+
}
|
|
3537
|
+
}
|
|
3538
|
+
}
|
|
3539
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
3540
|
+
finally {
|
|
3541
|
+
try {
|
|
3542
|
+
if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
|
|
3543
|
+
}
|
|
3544
|
+
finally { if (e_2) throw e_2.error; }
|
|
3545
|
+
}
|
|
3546
|
+
return false;
|
|
3547
|
+
}
|
|
3548
|
+
function horizontalNavItemCanBeActive(item) {
|
|
3549
|
+
return isHorizontalNavItemType(item, 'basic') || isHorizontalNavItemType(item, 'link');
|
|
3550
|
+
}
|
|
3551
|
+
function horizontalNavItemCanExpand(item) {
|
|
3552
|
+
return horizontalNavItemCanHaveChildren(item);
|
|
3553
|
+
}
|
|
3554
|
+
function findHorizontalNavLinkItems(items) {
|
|
3555
|
+
var linkItems = [];
|
|
3556
|
+
var _fn = function (_items) {
|
|
3557
|
+
var e_3, _c;
|
|
3558
|
+
try {
|
|
3559
|
+
for (var _items_1 = __values(_items), _items_1_1 = _items_1.next(); !_items_1_1.done; _items_1_1 = _items_1.next()) {
|
|
3560
|
+
var item = _items_1_1.value;
|
|
3561
|
+
if (isHorizontalNavItemType(item, 'link')) {
|
|
3562
|
+
linkItems.push(item);
|
|
3563
|
+
}
|
|
3564
|
+
if (horizontalNavItemCanHaveChildren(item) && utils.hasProperty(item, 'children')) {
|
|
3565
|
+
_fn(item.children);
|
|
3566
|
+
}
|
|
3567
|
+
}
|
|
3568
|
+
}
|
|
3569
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
3570
|
+
finally {
|
|
3571
|
+
try {
|
|
3572
|
+
if (_items_1_1 && !_items_1_1.done && (_c = _items_1.return)) _c.call(_items_1);
|
|
3573
|
+
}
|
|
3574
|
+
finally { if (e_3) throw e_3.error; }
|
|
3575
|
+
}
|
|
3576
|
+
};
|
|
3577
|
+
_fn(items);
|
|
3578
|
+
return linkItems;
|
|
3579
|
+
}
|
|
3580
|
+
function setHorizontalNavItemStateProp(item, prop, value) {
|
|
3581
|
+
if (utils.hasProperty(item, '__state')) {
|
|
3582
|
+
item.__state[prop] = value;
|
|
3583
|
+
}
|
|
3584
|
+
}
|
|
3585
|
+
function getHorizontalNavItemStateProp(item, prop) {
|
|
3586
|
+
return setDefaultHorizontalNavItemState(item).__state[prop];
|
|
3587
|
+
}
|
|
3588
|
+
function setDefaultHorizontalNavItemState(item) {
|
|
3589
|
+
if (utils.hasProperty(item, '__state')) {
|
|
3590
|
+
return item;
|
|
3591
|
+
}
|
|
3592
|
+
item.__state = {
|
|
3593
|
+
active: false,
|
|
3594
|
+
expanded: false
|
|
3595
|
+
};
|
|
3596
|
+
// TODO: See if there is a nice way to fix the typing for this.
|
|
3597
|
+
return item;
|
|
3598
|
+
}
|
|
3599
|
+
function areSameHorizontalNavItem(item1, item2) {
|
|
3600
|
+
if (utils.isNullOrUndefined(item1) || utils.isNullOrUndefined(item2)) {
|
|
3601
|
+
return false;
|
|
3602
|
+
}
|
|
3603
|
+
if (item1.itemType !== item2.itemType) {
|
|
3604
|
+
return false;
|
|
3605
|
+
}
|
|
3606
|
+
if (isHorizontalNavItemType(item1, 'title') && isHorizontalNavItemType(item2, 'title')) {
|
|
3607
|
+
return item1.label === item2.label;
|
|
3608
|
+
}
|
|
3609
|
+
else if (isHorizontalNavItemType(item1, 'divider') && isHorizontalNavItemType(item2, 'divider')) {
|
|
3610
|
+
return item1.label === item2.label;
|
|
3611
|
+
}
|
|
3612
|
+
else if (isHorizontalNavItemType(item1, 'basic') && isHorizontalNavItemType(item2, 'basic')) {
|
|
3613
|
+
return item1.label === item2.label;
|
|
3614
|
+
}
|
|
3615
|
+
else if (isHorizontalNavItemType(item1, 'link') && isHorizontalNavItemType(item2, 'link')) {
|
|
3616
|
+
return item1.label === item2.label && item1.link === item2.link;
|
|
3617
|
+
}
|
|
3618
|
+
else if (isHorizontalNavItemType(item1, 'button') && isHorizontalNavItemType(item2, 'button')) {
|
|
3619
|
+
return item1.onClick === item2.onClick;
|
|
3620
|
+
}
|
|
3621
|
+
return false;
|
|
3622
|
+
}
|
|
3623
|
+
|
|
3624
|
+
var NavItemComponent = /** @class */ (function () {
|
|
3625
|
+
function NavItemComponent() {
|
|
3626
|
+
this._ngUnsubscribe = new rxjs.Subject();
|
|
3627
|
+
this.faAngleLeft = freeSolidSvgIcons.faAngleLeft;
|
|
3628
|
+
this.active = false;
|
|
3629
|
+
this._link = new rxjs.BehaviorSubject(undefined);
|
|
3630
|
+
this.link$ = this._link.asObservable();
|
|
3631
|
+
this.hierLevel = 0;
|
|
3632
|
+
this.indentSize = 10;
|
|
3633
|
+
this._expanded = new rxjs.BehaviorSubject(false);
|
|
3634
|
+
this.expanded$ = this._expanded.asObservable();
|
|
3635
|
+
this._compact = new rxjs.BehaviorSubject(false);
|
|
3636
|
+
this.compact$ = this._compact.asObservable();
|
|
3637
|
+
this.badgeTheme = 'danger';
|
|
3638
|
+
this.childAction = 'menu';
|
|
3639
|
+
this.expandAction = 'toggle';
|
|
3640
|
+
this.navItemExpanded = new i0.EventEmitter();
|
|
3641
|
+
}
|
|
3642
|
+
Object.defineProperty(NavItemComponent.prototype, "link", {
|
|
3643
|
+
get: function () { return this._link.value; },
|
|
3644
|
+
set: function (value) { this._link.next(value); },
|
|
3645
|
+
enumerable: false,
|
|
3646
|
+
configurable: true
|
|
3647
|
+
});
|
|
3648
|
+
Object.defineProperty(NavItemComponent.prototype, "expanded", {
|
|
3649
|
+
get: function () { return this._expanded.value; },
|
|
3650
|
+
set: function (value) {
|
|
3651
|
+
this._expanded.next(coercion.coerceBooleanProperty(value));
|
|
3652
|
+
},
|
|
3653
|
+
enumerable: false,
|
|
3654
|
+
configurable: true
|
|
3655
|
+
});
|
|
3656
|
+
Object.defineProperty(NavItemComponent.prototype, "compact", {
|
|
3657
|
+
get: function () { return this._compact.value; },
|
|
3658
|
+
set: function (value) { this._compact.next(coercion.coerceBooleanProperty(value)); },
|
|
3659
|
+
enumerable: false,
|
|
3660
|
+
configurable: true
|
|
3661
|
+
});
|
|
3662
|
+
Object.defineProperty(NavItemComponent.prototype, "badgeTooltip", {
|
|
3663
|
+
get: function () { return this._badgeTooltip; },
|
|
3664
|
+
set: function (value) {
|
|
3665
|
+
if (value !== null && value !== undefined) {
|
|
3666
|
+
if (typeof value === 'string') {
|
|
3667
|
+
this._badgeTooltip = {
|
|
3668
|
+
tooltip: value,
|
|
3669
|
+
placement: 'auto',
|
|
3670
|
+
disabled: false
|
|
3671
|
+
};
|
|
3672
|
+
}
|
|
3673
|
+
else {
|
|
3674
|
+
this._badgeTooltip = Object.assign(Object.assign({}, value), { placement: value.placement || 'auto', disabled: typeof (value === null || value === void 0 ? void 0 : value.disabled) === 'boolean'
|
|
3675
|
+
? value.disabled
|
|
3676
|
+
: typeof value.tooltip === 'string' ? false : true });
|
|
3677
|
+
}
|
|
3678
|
+
}
|
|
3679
|
+
else {
|
|
3680
|
+
this._badgeTooltip = undefined;
|
|
3681
|
+
}
|
|
3682
|
+
},
|
|
3683
|
+
enumerable: false,
|
|
3684
|
+
configurable: true
|
|
3685
|
+
});
|
|
3686
|
+
Object.defineProperty(NavItemComponent.prototype, "_isActiveCssClass", {
|
|
3687
|
+
get: function () { return this.active; },
|
|
3688
|
+
enumerable: false,
|
|
3689
|
+
configurable: true
|
|
3690
|
+
});
|
|
3691
|
+
Object.defineProperty(NavItemComponent.prototype, "_isChildActiveCssClass", {
|
|
3692
|
+
get: function () { return this.hasActiveChild; },
|
|
3693
|
+
enumerable: false,
|
|
3694
|
+
configurable: true
|
|
3695
|
+
});
|
|
3696
|
+
Object.defineProperty(NavItemComponent.prototype, "_isExpandedCssClass", {
|
|
3697
|
+
get: function () { return this.expanded; },
|
|
3698
|
+
enumerable: false,
|
|
3699
|
+
configurable: true
|
|
3700
|
+
});
|
|
3701
|
+
Object.defineProperty(NavItemComponent.prototype, "_attrDataHierLevel", {
|
|
3702
|
+
get: function () { return this.hierLevel; },
|
|
3703
|
+
enumerable: false,
|
|
3704
|
+
configurable: true
|
|
3705
|
+
});
|
|
3706
|
+
NavItemComponent.prototype.ngOnDestroy = function () {
|
|
3707
|
+
this._ngUnsubscribe.next();
|
|
3708
|
+
this._ngUnsubscribe.complete();
|
|
3709
|
+
};
|
|
3710
|
+
Object.defineProperty(NavItemComponent.prototype, "hasChildren", {
|
|
3711
|
+
get: function () {
|
|
3712
|
+
return Array.isArray(this.children) && this.children.length > 0;
|
|
3713
|
+
},
|
|
3714
|
+
enumerable: false,
|
|
3715
|
+
configurable: true
|
|
3716
|
+
});
|
|
3717
|
+
Object.defineProperty(NavItemComponent.prototype, "hasActiveChild", {
|
|
3718
|
+
get: function () {
|
|
3719
|
+
if (utils.notNullOrUndefined(this.item)) {
|
|
3720
|
+
return horizontalNavItemHasActiveChild(this.item);
|
|
3721
|
+
}
|
|
3722
|
+
return false;
|
|
3723
|
+
},
|
|
3724
|
+
enumerable: false,
|
|
3725
|
+
configurable: true
|
|
3726
|
+
});
|
|
3727
|
+
Object.defineProperty(NavItemComponent.prototype, "hasMenuToggle", {
|
|
3728
|
+
get: function () {
|
|
3729
|
+
return this.hasChildren && this.childAction === 'menu';
|
|
3730
|
+
},
|
|
3731
|
+
enumerable: false,
|
|
3732
|
+
configurable: true
|
|
3733
|
+
});
|
|
3734
|
+
Object.defineProperty(NavItemComponent.prototype, "menuTpl", {
|
|
3735
|
+
get: function () {
|
|
3736
|
+
return this.hasMenuToggle ? this._menu : undefined;
|
|
3737
|
+
},
|
|
3738
|
+
enumerable: false,
|
|
3739
|
+
configurable: true
|
|
3740
|
+
});
|
|
3741
|
+
Object.defineProperty(NavItemComponent.prototype, "hasExpandingChildren", {
|
|
3742
|
+
get: function () {
|
|
3743
|
+
return this.hasChildren && this.childAction === 'expand';
|
|
3744
|
+
},
|
|
3745
|
+
enumerable: false,
|
|
3746
|
+
configurable: true
|
|
3747
|
+
});
|
|
3748
|
+
NavItemComponent.prototype._toggleChildren = function (event) {
|
|
3749
|
+
var ex = !this.expanded;
|
|
3750
|
+
if (this.expandAction === 'expandOnly') {
|
|
3751
|
+
ex = true;
|
|
3752
|
+
}
|
|
3753
|
+
this.expanded = ex;
|
|
3754
|
+
this.navItemExpanded.emit(this.expanded);
|
|
3755
|
+
// Prevents seam-menu from closing out when toggling child expand
|
|
3756
|
+
event.stopPropagation();
|
|
3757
|
+
};
|
|
3758
|
+
// Updates expanded state when user exits seam-menu
|
|
3759
|
+
NavItemComponent.prototype._menuEvent = function (menuExpanded) {
|
|
3760
|
+
if (menuExpanded === false) {
|
|
3761
|
+
this.expanded = false;
|
|
3762
|
+
// TODO: figure out why closing seam-menu with expanded submenu messes up animation
|
|
3763
|
+
if (this._navItems && this._navItems.length) {
|
|
3764
|
+
this._navItems.forEach(function (navItem) {
|
|
3765
|
+
navItem.expanded = false;
|
|
3766
|
+
});
|
|
3767
|
+
}
|
|
3768
|
+
}
|
|
3769
|
+
};
|
|
3770
|
+
Object.defineProperty(NavItemComponent.prototype, "showIconBlock", {
|
|
3771
|
+
get: function () {
|
|
3772
|
+
return utils.notNullOrUndefined(this.icon) || this.hideEmptyIcon !== true;
|
|
3773
|
+
},
|
|
3774
|
+
enumerable: false,
|
|
3775
|
+
configurable: true
|
|
3776
|
+
});
|
|
3777
|
+
return NavItemComponent;
|
|
3778
|
+
}());
|
|
3779
|
+
NavItemComponent.decorators = [
|
|
3780
|
+
{ type: i0.Component, args: [{
|
|
3781
|
+
selector: 'seam-nav-item',
|
|
3782
|
+
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",
|
|
3783
|
+
exportAs: 'seamNavItem',
|
|
3784
|
+
animations: [
|
|
3785
|
+
animations.trigger('childGroupAnim', [
|
|
3786
|
+
animations.transition(':enter', [
|
|
3787
|
+
animations.style({ height: 0 }),
|
|
3788
|
+
animations.animate('0.2s ease-in-out', animations.style({ height: '*' }))
|
|
3789
|
+
]),
|
|
3790
|
+
animations.transition(':leave', [
|
|
3791
|
+
animations.style({ height: '*' }),
|
|
3792
|
+
animations.animate('0.2s ease-in-out', animations.style({ height: 0 }))
|
|
3793
|
+
])
|
|
3794
|
+
])
|
|
3795
|
+
],
|
|
3796
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
3797
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
3798
|
+
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"]
|
|
3799
|
+
},] }
|
|
3800
|
+
];
|
|
3801
|
+
NavItemComponent.ctorParameters = function () { return []; };
|
|
3802
|
+
NavItemComponent.propDecorators = {
|
|
3803
|
+
item: [{ type: i0.Input }],
|
|
3804
|
+
itemType: [{ type: i0.Input }],
|
|
3805
|
+
icon: [{ type: i0.Input }],
|
|
3806
|
+
hideEmptyIcon: [{ type: i0.Input }],
|
|
3807
|
+
label: [{ type: i0.Input }],
|
|
3808
|
+
active: [{ type: i0.Input }],
|
|
3809
|
+
link: [{ type: i0.Input }],
|
|
3810
|
+
queryParams: [{ type: i0.Input }],
|
|
3811
|
+
children: [{ type: i0.Input }],
|
|
3812
|
+
hierLevel: [{ type: i0.Input }],
|
|
3813
|
+
indentSize: [{ type: i0.Input }],
|
|
3814
|
+
expanded: [{ type: i0.Input }],
|
|
3815
|
+
compact: [{ type: i0.Input }],
|
|
3816
|
+
badgeText: [{ type: i0.Input }],
|
|
3817
|
+
badgeTheme: [{ type: i0.Input }],
|
|
3818
|
+
badgeSrContent: [{ type: i0.Input }],
|
|
3819
|
+
badgeTooltip: [{ type: i0.Input }],
|
|
3820
|
+
childAction: [{ type: i0.Input }],
|
|
3821
|
+
expandAction: [{ type: i0.Input }],
|
|
3822
|
+
navItemExpanded: [{ type: i0.Output }],
|
|
3823
|
+
_isActiveCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--active',] }],
|
|
3824
|
+
_isChildActiveCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--child-active',] }],
|
|
3825
|
+
_isExpandedCssClass: [{ type: i0.HostBinding, args: ['class.seam-nav-item--expanded',] }],
|
|
3826
|
+
_attrDataHierLevel: [{ type: i0.HostBinding, args: ['attr.data-hier-level',] }],
|
|
3827
|
+
_menu: [{ type: i0.ViewChild, args: [menu.MenuComponent,] }],
|
|
3828
|
+
_navItems: [{ type: i0.ViewChildren, args: [NavItemComponent,] }]
|
|
3829
|
+
};
|
|
3830
|
+
__decorate([
|
|
3831
|
+
core.InputBoolean()
|
|
3832
|
+
], NavItemComponent.prototype, "active", void 0);
|
|
3833
|
+
__decorate([
|
|
3834
|
+
core.InputNumber(0)
|
|
3835
|
+
], NavItemComponent.prototype, "hierLevel", void 0);
|
|
3836
|
+
__decorate([
|
|
3837
|
+
core.InputNumber(10)
|
|
3838
|
+
], NavItemComponent.prototype, "indentSize", void 0);
|
|
3839
|
+
|
|
3840
|
+
var TheSeamNavService = /** @class */ (function () {
|
|
3841
|
+
function TheSeamNavService(_router) {
|
|
3842
|
+
this._router = _router;
|
|
3843
|
+
this._updatingCount = new rxjs.BehaviorSubject(0);
|
|
3844
|
+
this.itemChanged = new rxjs.Subject();
|
|
3845
|
+
this.loading$ = this._updatingCount.pipe(operators.map(function (count) { return count > 0; }), operators.distinctUntilChanged(), operators.shareReplay({ bufferSize: 1, refCount: true }));
|
|
3846
|
+
}
|
|
3847
|
+
TheSeamNavService.prototype.createItemsObservable = function (items) {
|
|
3848
|
+
var _this = this;
|
|
3849
|
+
return rxjs.defer(function () {
|
|
3850
|
+
_this.updateItemsStates(items);
|
|
3851
|
+
return new rxjs.Observable(function (subscriber) {
|
|
3852
|
+
var stateChangeSub = _this.itemChanged.pipe(operators.switchMap(function (change) {
|
|
3853
|
+
return _this.loading$.pipe(operators.filter(function (loading) { return !loading; }));
|
|
3854
|
+
})).subscribe(function () {
|
|
3855
|
+
subscriber.next(items);
|
|
3856
|
+
});
|
|
3857
|
+
try {
|
|
3858
|
+
_this.updateItemsStates(items);
|
|
3859
|
+
}
|
|
3860
|
+
catch (err) {
|
|
3861
|
+
subscriber.error(err);
|
|
3862
|
+
}
|
|
3863
|
+
var routeChangeSub = _this._router.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; })).subscribe(function () {
|
|
3864
|
+
try {
|
|
3865
|
+
_this.updateItemsStates(items);
|
|
3866
|
+
}
|
|
3867
|
+
catch (err) {
|
|
3868
|
+
subscriber.error(err);
|
|
3869
|
+
}
|
|
3870
|
+
});
|
|
3871
|
+
return function () {
|
|
3872
|
+
stateChangeSub.unsubscribe();
|
|
3873
|
+
routeChangeSub.unsubscribe();
|
|
3874
|
+
};
|
|
3875
|
+
}).pipe(operators.startWith(items));
|
|
3876
|
+
});
|
|
3877
|
+
};
|
|
3878
|
+
TheSeamNavService.prototype._incUpdatingCount = function () {
|
|
3879
|
+
this._updatingCount.next(this._updatingCount.value + 1);
|
|
3880
|
+
};
|
|
3881
|
+
TheSeamNavService.prototype._decrUpdatingCount = function () {
|
|
3882
|
+
this._updatingCount.next(this._updatingCount.value - 1);
|
|
3883
|
+
};
|
|
3884
|
+
TheSeamNavService.prototype.updateItemsStates = function (items) {
|
|
3885
|
+
var e_1, _a;
|
|
3886
|
+
this._incUpdatingCount();
|
|
3887
|
+
try {
|
|
3888
|
+
try {
|
|
3889
|
+
for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
|
|
3890
|
+
var item = items_1_1.value;
|
|
3891
|
+
if (horizontalNavItemHasChildren(item)) {
|
|
3892
|
+
this.updateItemsStates(item.children);
|
|
3893
|
+
}
|
|
3894
|
+
this.updateItemState(item);
|
|
3895
|
+
}
|
|
3896
|
+
}
|
|
3897
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
3898
|
+
finally {
|
|
3899
|
+
try {
|
|
3900
|
+
if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
|
|
3901
|
+
}
|
|
3902
|
+
finally { if (e_1) throw e_1.error; }
|
|
3903
|
+
}
|
|
3904
|
+
this._decrUpdatingCount();
|
|
3905
|
+
}
|
|
3906
|
+
catch (err) {
|
|
3907
|
+
this._decrUpdatingCount();
|
|
3908
|
+
throw err;
|
|
3909
|
+
}
|
|
3910
|
+
};
|
|
3911
|
+
TheSeamNavService.prototype.updateItemState = function (item) {
|
|
3912
|
+
this._incUpdatingCount();
|
|
3913
|
+
try {
|
|
3914
|
+
setDefaultHorizontalNavItemState(item);
|
|
3915
|
+
if (isHorizontalNavItemType(item, 'link')) {
|
|
3916
|
+
var url = this._getUrl(item);
|
|
3917
|
+
if (utils.notNullOrUndefined(url)) {
|
|
3918
|
+
var opts = this._getMatchOptions(item);
|
|
3919
|
+
this.setItemStateProp(item, 'active', this._router.isActive(url, opts));
|
|
3920
|
+
}
|
|
3921
|
+
}
|
|
3922
|
+
// TODO: Implement this in a more optimized way. Unless our apps start
|
|
3923
|
+
// having large navs constantly updating their state, this shouldn't
|
|
3924
|
+
// have much impact on performance.
|
|
3925
|
+
this._updateItemExpandedState(item);
|
|
3926
|
+
this._decrUpdatingCount();
|
|
3927
|
+
}
|
|
3928
|
+
catch (err) {
|
|
3929
|
+
this._decrUpdatingCount();
|
|
3930
|
+
throw err;
|
|
3931
|
+
}
|
|
3932
|
+
};
|
|
3933
|
+
TheSeamNavService.prototype._updateItemsExpandedState = function (items) {
|
|
3934
|
+
var e_2, _a;
|
|
3935
|
+
try {
|
|
3936
|
+
for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
|
|
3937
|
+
var item = items_2_1.value;
|
|
3938
|
+
if (horizontalNavItemHasChildren(item)) {
|
|
3939
|
+
this._updateItemsExpandedState(item.children);
|
|
3940
|
+
}
|
|
3941
|
+
this._updateItemExpandedState(item);
|
|
3942
|
+
}
|
|
3943
|
+
}
|
|
3944
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
3945
|
+
finally {
|
|
3946
|
+
try {
|
|
3947
|
+
if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
|
|
3948
|
+
}
|
|
3949
|
+
finally { if (e_2) throw e_2.error; }
|
|
3950
|
+
}
|
|
3951
|
+
};
|
|
3952
|
+
TheSeamNavService.prototype._updateItemExpandedState = function (item) {
|
|
3953
|
+
if (!horizontalNavItemCanExpand(item)) {
|
|
3954
|
+
if (getHorizontalNavItemStateProp(item, 'expanded')) {
|
|
3955
|
+
this.setItemStateProp(item, 'expanded', false);
|
|
3956
|
+
}
|
|
3957
|
+
return;
|
|
3958
|
+
}
|
|
3959
|
+
if (horizontalNavItemHasChildren(item)) {
|
|
3960
|
+
this._updateItemsExpandedState(item.children);
|
|
3961
|
+
}
|
|
3962
|
+
if (horizontalNavItemHasActiveChild(item) || horizontalNavItemHasExpandedChild(item)) {
|
|
3963
|
+
if (!getHorizontalNavItemStateProp(item, 'expanded')) {
|
|
3964
|
+
this.setItemStateProp(item, 'expanded', true);
|
|
3965
|
+
}
|
|
3966
|
+
}
|
|
3967
|
+
else {
|
|
3968
|
+
if (getHorizontalNavItemStateProp(item, 'expanded')) {
|
|
3969
|
+
this.setItemStateProp(item, 'expanded', false);
|
|
3970
|
+
}
|
|
3971
|
+
}
|
|
3972
|
+
};
|
|
3973
|
+
TheSeamNavService.prototype._getNavExtras = function (item) {
|
|
3974
|
+
var navigationExtras = {};
|
|
3975
|
+
if (utils.hasProperty(item, 'queryParams')) {
|
|
3976
|
+
navigationExtras.queryParams = item.queryParams;
|
|
3977
|
+
}
|
|
3978
|
+
if (utils.hasProperty(item, 'fragment')) {
|
|
3979
|
+
navigationExtras.fragment = item.fragment;
|
|
3980
|
+
}
|
|
3981
|
+
if (utils.hasProperty(item, 'queryParamsHandling')) {
|
|
3982
|
+
navigationExtras.queryParamsHandling = item.queryParamsHandling;
|
|
3983
|
+
}
|
|
3984
|
+
if (utils.hasProperty(item, 'preserveFragment')) {
|
|
3985
|
+
navigationExtras.preserveFragment = item.preserveFragment;
|
|
3986
|
+
}
|
|
3987
|
+
return navigationExtras;
|
|
3988
|
+
};
|
|
3989
|
+
TheSeamNavService.prototype._getUrl = function (item) {
|
|
3990
|
+
var link = item.link;
|
|
3991
|
+
if (typeof link === 'string') {
|
|
3992
|
+
return this._router.createUrlTree([link], this._getNavExtras(item)).toString();
|
|
3993
|
+
}
|
|
3994
|
+
else if (Array.isArray(link)) {
|
|
3995
|
+
return this._router.createUrlTree(link, this._getNavExtras(item)).toString();
|
|
3996
|
+
}
|
|
3997
|
+
return null;
|
|
3998
|
+
};
|
|
3999
|
+
TheSeamNavService.prototype._getMatchOptions = function (item) {
|
|
4000
|
+
var defaultMatchOpts = {
|
|
4001
|
+
paths: 'subset',
|
|
4002
|
+
queryParams: 'subset',
|
|
4003
|
+
fragment: 'ignored',
|
|
4004
|
+
matrixParams: 'ignored'
|
|
4005
|
+
};
|
|
4006
|
+
if (utils.hasProperty(item, 'matchOptions')) {
|
|
4007
|
+
return Object.assign(Object.assign({}, defaultMatchOpts), item.matchOptions);
|
|
4008
|
+
}
|
|
4009
|
+
return defaultMatchOpts;
|
|
4010
|
+
};
|
|
4011
|
+
TheSeamNavService.prototype.setItemStateProp = function (item, prop, value) {
|
|
4012
|
+
var currentValue = getHorizontalNavItemStateProp(item, prop);
|
|
4013
|
+
if (currentValue !== value) {
|
|
4014
|
+
setHorizontalNavItemStateProp(item, prop, value);
|
|
4015
|
+
var changed = {
|
|
4016
|
+
item: item,
|
|
4017
|
+
prop: prop,
|
|
4018
|
+
prevValue: currentValue,
|
|
4019
|
+
newValue: value
|
|
4020
|
+
};
|
|
4021
|
+
this.itemChanged.next(changed);
|
|
4022
|
+
}
|
|
4023
|
+
};
|
|
4024
|
+
return TheSeamNavService;
|
|
4025
|
+
}());
|
|
4026
|
+
TheSeamNavService.decorators = [
|
|
4027
|
+
{ type: i0.Injectable }
|
|
4028
|
+
];
|
|
4029
|
+
TheSeamNavService.ctorParameters = function () { return [
|
|
4030
|
+
{ type: router.Router }
|
|
4031
|
+
]; };
|
|
4032
|
+
|
|
4033
|
+
var HorizontalNavComponent = /** @class */ (function () {
|
|
4034
|
+
function HorizontalNavComponent() {
|
|
4035
|
+
this._ngUnsubscribe = new rxjs.Subject();
|
|
4036
|
+
this._items = new rxjs.BehaviorSubject([]);
|
|
4037
|
+
this.hideEmptyIcon = true;
|
|
4038
|
+
this.hierLevel = 0;
|
|
4039
|
+
this.childAction = 'menu';
|
|
4040
|
+
this.expandAction = 'toggle';
|
|
4041
|
+
this._focusedNavItem = new rxjs.BehaviorSubject(undefined);
|
|
4042
|
+
this.focusedNavItem$ = this._focusedNavItem.asObservable();
|
|
4043
|
+
this.navItemExpanded = new i0.EventEmitter();
|
|
4044
|
+
this.items$ = this._items.asObservable();
|
|
4045
|
+
}
|
|
4046
|
+
Object.defineProperty(HorizontalNavComponent.prototype, "items", {
|
|
4047
|
+
get: function () { return this._items.value; },
|
|
4048
|
+
set: function (value) {
|
|
4049
|
+
this._items.next(value);
|
|
4050
|
+
},
|
|
4051
|
+
enumerable: false,
|
|
4052
|
+
configurable: true
|
|
4053
|
+
});
|
|
4054
|
+
Object.defineProperty(HorizontalNavComponent.prototype, "focusedNavItem", {
|
|
4055
|
+
/**
|
|
4056
|
+
* The 'focused' nav item refers to the item in
|
|
4057
|
+
* the list that was most recently expanded or activated.
|
|
4058
|
+
* // TODO: make all this better
|
|
4059
|
+
*/
|
|
4060
|
+
get: function () {
|
|
4061
|
+
return this._focusedNavItem.value;
|
|
4062
|
+
},
|
|
4063
|
+
set: function (value) {
|
|
4064
|
+
this._focusedNavItem.next(value);
|
|
4065
|
+
},
|
|
4066
|
+
enumerable: false,
|
|
4067
|
+
configurable: true
|
|
4068
|
+
});
|
|
4069
|
+
HorizontalNavComponent.prototype.ngOnInit = function () { };
|
|
4070
|
+
HorizontalNavComponent.prototype.ngOnDestroy = function () {
|
|
4071
|
+
this._ngUnsubscribe.next();
|
|
4072
|
+
this._ngUnsubscribe.complete();
|
|
4073
|
+
};
|
|
4074
|
+
HorizontalNavComponent.prototype._navItemExpanded = function (item, expanded) {
|
|
4075
|
+
this.navItemExpanded.emit({ navItem: item, expanded: expanded });
|
|
4076
|
+
};
|
|
4077
|
+
HorizontalNavComponent.prototype._navItemIsFocused = function (item) {
|
|
4078
|
+
return this.focusedNavItem$.pipe(operators.map(function (focusedNavItem) { return areSameHorizontalNavItem(focusedNavItem, item); }));
|
|
4079
|
+
};
|
|
4080
|
+
return HorizontalNavComponent;
|
|
4081
|
+
}());
|
|
4082
|
+
HorizontalNavComponent.decorators = [
|
|
4083
|
+
{ type: i0.Component, args: [{
|
|
4084
|
+
selector: 'seam-horizontal-nav',
|
|
4085
|
+
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",
|
|
4086
|
+
providers: [
|
|
4087
|
+
TheSeamNavService
|
|
4088
|
+
],
|
|
4089
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
4090
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
4091
|
+
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"]
|
|
4092
|
+
},] }
|
|
4093
|
+
];
|
|
4094
|
+
HorizontalNavComponent.ctorParameters = function () { return []; };
|
|
4095
|
+
HorizontalNavComponent.propDecorators = {
|
|
4096
|
+
items: [{ type: i0.Input }],
|
|
4097
|
+
hideEmptyIcon: [{ type: i0.Input }],
|
|
4098
|
+
hierLevel: [{ type: i0.Input }],
|
|
4099
|
+
childAction: [{ type: i0.Input }],
|
|
4100
|
+
expandAction: [{ type: i0.Input }],
|
|
4101
|
+
focusedNavItem: [{ type: i0.Input }],
|
|
4102
|
+
navItemExpanded: [{ type: i0.Output }]
|
|
4103
|
+
};
|
|
4104
|
+
|
|
4105
|
+
var TheSeamNavModule = /** @class */ (function () {
|
|
4106
|
+
function TheSeamNavModule() {
|
|
4107
|
+
}
|
|
4108
|
+
return TheSeamNavModule;
|
|
4109
|
+
}());
|
|
4110
|
+
TheSeamNavModule.decorators = [
|
|
4111
|
+
{ type: i0.NgModule, args: [{
|
|
4112
|
+
declarations: [
|
|
4113
|
+
NavItemComponent,
|
|
4114
|
+
HorizontalNavComponent,
|
|
4115
|
+
],
|
|
4116
|
+
imports: [
|
|
4117
|
+
common.CommonModule,
|
|
4118
|
+
router.RouterModule,
|
|
4119
|
+
icon.TheSeamIconModule,
|
|
4120
|
+
a11y.A11yModule,
|
|
4121
|
+
scrollbar.TheSeamScrollbarModule,
|
|
4122
|
+
layout.TheSeamLayoutModule,
|
|
4123
|
+
ngBootstrap.NgbTooltipModule,
|
|
4124
|
+
portal.PortalModule,
|
|
4125
|
+
menu.TheSeamMenuModule
|
|
4126
|
+
],
|
|
4127
|
+
exports: [
|
|
4128
|
+
NavItemComponent,
|
|
4129
|
+
HorizontalNavComponent,
|
|
4130
|
+
],
|
|
4131
|
+
providers: [
|
|
4132
|
+
TheSeamNavService,
|
|
4133
|
+
]
|
|
4134
|
+
},] }
|
|
4135
|
+
];
|
|
4136
|
+
|
|
3306
4137
|
/**
|
|
3307
4138
|
* Generated bundle index. Do not edit.
|
|
3308
4139
|
*/
|
|
@@ -3322,6 +4153,8 @@
|
|
|
3322
4153
|
exports.DashboardWidgetsService = DashboardWidgetsService;
|
|
3323
4154
|
exports.HierarchyLevelResolver = HierarchyLevelResolver;
|
|
3324
4155
|
exports.HierarchyRouterOutletComponent = HierarchyRouterOutletComponent;
|
|
4156
|
+
exports.HorizontalNavComponent = HorizontalNavComponent;
|
|
4157
|
+
exports.NavItemComponent = NavItemComponent;
|
|
3325
4158
|
exports.SideNavComponent = SideNavComponent;
|
|
3326
4159
|
exports.SideNavItemComponent = SideNavItemComponent;
|
|
3327
4160
|
exports.SideNavToggleComponent = SideNavToggleComponent;
|
|
@@ -3333,6 +4166,7 @@
|
|
|
3333
4166
|
exports.TheSeamDashboardModule = TheSeamDashboardModule;
|
|
3334
4167
|
exports.TheSeamDynamicRouterModule = TheSeamDynamicRouterModule;
|
|
3335
4168
|
exports.TheSeamFramework = TheSeamFramework;
|
|
4169
|
+
exports.TheSeamNavModule = TheSeamNavModule;
|
|
3336
4170
|
exports.TheSeamSchemaFormFrameworkComponent = TheSeamSchemaFormFrameworkComponent;
|
|
3337
4171
|
exports.TheSeamSchemaFormModule = TheSeamSchemaFormModule;
|
|
3338
4172
|
exports.TheSeamSideNavModule = TheSeamSideNavModule;
|
|
@@ -3343,20 +4177,34 @@
|
|
|
3343
4177
|
exports.TopBarMenuButtonComponent = TopBarMenuButtonComponent;
|
|
3344
4178
|
exports.TopBarMenuDirective = TopBarMenuDirective;
|
|
3345
4179
|
exports.TopBarTitleComponent = TopBarTitleComponent;
|
|
4180
|
+
exports.areSameHorizontalNavItem = areSameHorizontalNavItem;
|
|
3346
4181
|
exports.canBeActive = canBeActive;
|
|
3347
4182
|
exports.canExpand = canExpand;
|
|
3348
4183
|
exports.canHaveChildren = canHaveChildren;
|
|
3349
4184
|
exports.fader = fader;
|
|
4185
|
+
exports.findHorizontalNavLinkItems = findHorizontalNavLinkItems;
|
|
3350
4186
|
exports.findLinkItems = findLinkItems;
|
|
4187
|
+
exports.getHorizontalNavItemStateProp = getHorizontalNavItemStateProp;
|
|
3351
4188
|
exports.getItemStateProp = getItemStateProp;
|
|
3352
4189
|
exports.hasActiveChild = hasActiveChild;
|
|
3353
4190
|
exports.hasChildren = hasChildren;
|
|
3354
4191
|
exports.hasExpandedChild = hasExpandedChild;
|
|
4192
|
+
exports.horizontalNavItemCanBeActive = horizontalNavItemCanBeActive;
|
|
4193
|
+
exports.horizontalNavItemCanExpand = horizontalNavItemCanExpand;
|
|
4194
|
+
exports.horizontalNavItemCanHaveChildren = horizontalNavItemCanHaveChildren;
|
|
4195
|
+
exports.horizontalNavItemHasActiveChild = horizontalNavItemHasActiveChild;
|
|
4196
|
+
exports.horizontalNavItemHasChildren = horizontalNavItemHasChildren;
|
|
4197
|
+
exports.horizontalNavItemHasExpandedChild = horizontalNavItemHasExpandedChild;
|
|
3355
4198
|
exports.isExpanded = isExpanded;
|
|
4199
|
+
exports.isHorizontalNavItemActive = isHorizontalNavItemActive;
|
|
4200
|
+
exports.isHorizontalNavItemExpanded = isHorizontalNavItemExpanded;
|
|
4201
|
+
exports.isHorizontalNavItemType = isHorizontalNavItemType;
|
|
3356
4202
|
exports.isNavItemActive = isNavItemActive;
|
|
3357
4203
|
exports.isNavItemType = isNavItemType;
|
|
3358
4204
|
exports.routeChanges = routeChanges;
|
|
4205
|
+
exports.setDefaultHorizontalNavItemState = setDefaultHorizontalNavItemState;
|
|
3359
4206
|
exports.setDefaultState = setDefaultState;
|
|
4207
|
+
exports.setHorizontalNavItemStateProp = setHorizontalNavItemStateProp;
|
|
3360
4208
|
exports.setItemStateProp = setItemStateProp;
|
|
3361
4209
|
exports.sideNavExpandStateChangeFn = sideNavExpandStateChangeFn;
|
|
3362
4210
|
exports.sideToSide = sideToSide;
|
|
@@ -3364,14 +4212,18 @@
|
|
|
3364
4212
|
exports.stepper = stepper;
|
|
3365
4213
|
exports.transformer = transformer;
|
|
3366
4214
|
exports["ɵa"] = BaseLayoutSideBarFooterDirective;
|
|
3367
|
-
exports["ɵb"] =
|
|
3368
|
-
exports["ɵc"] =
|
|
3369
|
-
exports["ɵd"] =
|
|
3370
|
-
exports["ɵe"] =
|
|
3371
|
-
exports["ɵf"] =
|
|
3372
|
-
exports["ɵg"] =
|
|
3373
|
-
exports["ɵh"] =
|
|
3374
|
-
exports["ɵi"] =
|
|
4215
|
+
exports["ɵb"] = BaseLayoutSideBarHeaderDirective;
|
|
4216
|
+
exports["ɵc"] = TheSeamSideNavService;
|
|
4217
|
+
exports["ɵd"] = TopBarCompactMenuBtnDetailDirective;
|
|
4218
|
+
exports["ɵe"] = TopBarNavToggleBtnDetailDirective;
|
|
4219
|
+
exports["ɵf"] = TheSeamSchemaFormControlsModule;
|
|
4220
|
+
exports["ɵg"] = TheSeamSchemaFormCheckboxComponent;
|
|
4221
|
+
exports["ɵh"] = TheSeamSchemaFormSubmitComponent;
|
|
4222
|
+
exports["ɵi"] = TheSeamSchemaFormSelectComponent;
|
|
4223
|
+
exports["ɵj"] = TheSeamSchemaFormInputComponent;
|
|
4224
|
+
exports["ɵk"] = TheSeamSchemaFormNumberComponent;
|
|
4225
|
+
exports["ɵl"] = TheSeamSchemaFormSubmitSplitComponent;
|
|
4226
|
+
exports["ɵm"] = TheSeamNavService;
|
|
3375
4227
|
|
|
3376
4228
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3377
4229
|
|