@visma-swno/vsn-navigation 1.0.0-beta.4 → 1.1.0-beta.10
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.
|
@@ -1,43 +1,84 @@
|
|
|
1
|
-
import { AppModules } from '../shared/types/index.ts';
|
|
2
1
|
import { CSSResult } from 'lit';
|
|
3
|
-
import { FeedbackConfig } from '../shared/types/index.ts';
|
|
4
|
-
import { isTreeLeaf } from '../shared/types/index.ts';
|
|
5
|
-
import { isTreeParent } from '../shared/types/index.ts';
|
|
6
|
-
import { LanguageCode } from '../shared/types/index.ts';
|
|
7
2
|
import { LitElement } from 'lit';
|
|
8
|
-
import { ModuleItem } from '../shared/types/index.ts';
|
|
9
|
-
import { NavigationMenu } from '../shared/types/index.ts';
|
|
10
|
-
import { SearchConfig } from '../shared/types/index.ts';
|
|
11
3
|
import { TemplateResult } from 'lit-html';
|
|
12
|
-
import { TreeItem } from '../shared/types/index.ts';
|
|
13
|
-
import { TreeLeaf } from '../shared/types/index.ts';
|
|
14
|
-
import { TreeParent } from '../shared/types/index.ts';
|
|
15
|
-
import { VsnAuth } from '../shared/types/index.ts';
|
|
16
|
-
import { VsnNavigation } from '../shared/types/index.ts';
|
|
17
4
|
|
|
18
|
-
export
|
|
5
|
+
export declare type AppModules = {
|
|
6
|
+
/** Current module id (to be ignored from the list of modules) */
|
|
7
|
+
activeModuleId: string;
|
|
8
|
+
/** Current module label — shown before the modules list is asynchronously loaded */
|
|
9
|
+
activeModuleLabel: string;
|
|
10
|
+
/** Modules, or a loader for the modules */
|
|
11
|
+
modules: ModuleItem[] | (() => Promise<ModuleItem[]>);
|
|
12
|
+
};
|
|
19
13
|
|
|
20
|
-
|
|
14
|
+
declare type BaseTreeItem = {
|
|
15
|
+
/** id of the item, unique */
|
|
16
|
+
id: string;
|
|
17
|
+
/** The label to show for that item, in the relevant language */
|
|
18
|
+
label: string;
|
|
19
|
+
};
|
|
21
20
|
|
|
22
|
-
export
|
|
21
|
+
export declare type FeedbackConfig = {
|
|
22
|
+
workspaceId: string;
|
|
23
|
+
surveyId: string;
|
|
24
|
+
};
|
|
23
25
|
|
|
24
|
-
export
|
|
26
|
+
export declare function isTreeLeaf(item: TreeItem): item is TreeLeaf;
|
|
25
27
|
|
|
26
|
-
export
|
|
28
|
+
export declare function isTreeParent(item: TreeItem): item is TreeParent;
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
/** Supported languages. Note: 'nb' and 'nn' are automatically mapped to 'no'. Non-supported languages will default to 'en' */
|
|
31
|
+
export declare type LanguageCode = 'en' | 'no' | 'nb' | 'nn' | 'sv' | 'nl' | 'fi' | 'da';
|
|
29
32
|
|
|
30
|
-
export
|
|
33
|
+
export declare type ModuleItem = {
|
|
34
|
+
id: string;
|
|
35
|
+
label: string;
|
|
36
|
+
url: string;
|
|
37
|
+
};
|
|
31
38
|
|
|
32
|
-
|
|
39
|
+
/** Configuration for the navigation menu (pages in current module) */
|
|
40
|
+
export declare type NavigationMenu = {
|
|
41
|
+
/** The list of items to show in the side menu and the breadcrumbs. Applications can
|
|
42
|
+
update it at any time, e.g. when the context changes, when the language changes */
|
|
43
|
+
items: TreeItem[];
|
|
44
|
+
/** the item id corresponding to the current page. When it's found in items,
|
|
45
|
+
the breadcrumbs will update to reflect the path to the item and side menu will
|
|
46
|
+
expand and select that item. When it's not found in items, breadcrumbs will show
|
|
47
|
+
nothing and the side menu will have no element selected */
|
|
48
|
+
currentItem: string;
|
|
49
|
+
/** Sidebar search config; default disabled when undefined */
|
|
50
|
+
search?: SearchConfig;
|
|
51
|
+
};
|
|
33
52
|
|
|
34
|
-
|
|
53
|
+
declare type NonEmptyArray<T> = [T, ...T[]];
|
|
35
54
|
|
|
36
|
-
export
|
|
55
|
+
export declare type SearchConfig = {
|
|
56
|
+
enabled: boolean;
|
|
57
|
+
shortcut?: string;
|
|
58
|
+
};
|
|
37
59
|
|
|
38
|
-
export
|
|
60
|
+
export declare type TreeItem = TreeParent | TreeLeaf;
|
|
39
61
|
|
|
40
|
-
export
|
|
62
|
+
export declare type TreeLeaf = BaseTreeItem & {
|
|
63
|
+
url: string;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export declare type TreeParent = BaseTreeItem & {
|
|
67
|
+
items: NonEmptyArray<TreeItem>;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
declare type User = {
|
|
71
|
+
userId: string;
|
|
72
|
+
clientId?: string;
|
|
73
|
+
userName: string;
|
|
74
|
+
userEmail: string;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export declare type VsnAuth = {
|
|
78
|
+
user: User;
|
|
79
|
+
profilePictureBaseUrl: string;
|
|
80
|
+
myProfileUrl: string;
|
|
81
|
+
};
|
|
41
82
|
|
|
42
83
|
export declare class VSNNavigation extends LitElement {
|
|
43
84
|
/** Language to use for the component's labels (Search, Log out, etc) */
|
|
@@ -62,8 +103,13 @@ export declare class VSNNavigation extends LitElement {
|
|
|
62
103
|
notificationActive: boolean;
|
|
63
104
|
private _currentItem;
|
|
64
105
|
private _sideBarOpen;
|
|
106
|
+
private _resolvedModules;
|
|
107
|
+
private _modulesLoading;
|
|
108
|
+
private _modulesLoadToken;
|
|
109
|
+
private _resolveModules;
|
|
65
110
|
static styles: CSSResult[];
|
|
66
111
|
willUpdate(changed: Map<string, unknown>): void;
|
|
112
|
+
private get _resolvedLang();
|
|
67
113
|
private _getFirstLeafId;
|
|
68
114
|
/** Project tree into the shape the side-bar expects: top-level items lifted from the active module. */
|
|
69
115
|
private get _sideBarMenu();
|
|
@@ -73,6 +119,27 @@ export declare class VSNNavigation extends LitElement {
|
|
|
73
119
|
render(): TemplateResult<1>;
|
|
74
120
|
}
|
|
75
121
|
|
|
76
|
-
export
|
|
122
|
+
export declare type VsnNavigation = {
|
|
123
|
+
/** Language to use for the component's labels (Search, Log out, etc) */
|
|
124
|
+
lang?: LanguageCode;
|
|
125
|
+
/** Link to landing page */
|
|
126
|
+
landingPageUrl?: string;
|
|
127
|
+
/** Configuration for the navigation menu (pages in current module) */
|
|
128
|
+
tree?: NavigationMenu;
|
|
129
|
+
/** Configuration for the module switcher */
|
|
130
|
+
modules?: AppModules;
|
|
131
|
+
/** Show help icon */
|
|
132
|
+
showHelp?: boolean;
|
|
133
|
+
/** Use a fixed url for link to help */
|
|
134
|
+
helpUrl?: string;
|
|
135
|
+
/** Show notification icon */
|
|
136
|
+
showNotification?: boolean;
|
|
137
|
+
/** Notification icon shows active state */
|
|
138
|
+
notificationActive?: boolean;
|
|
139
|
+
/** Configuration related to authenticated user */
|
|
140
|
+
auth?: VsnAuth;
|
|
141
|
+
/** Configuration for the feedback component */
|
|
142
|
+
feedback?: FeedbackConfig | null;
|
|
143
|
+
};
|
|
77
144
|
|
|
78
145
|
export { }
|
|
@@ -25,7 +25,24 @@ function u(e, t, n, r) {
|
|
|
25
25
|
//#region src/components/vsn-navigation.ts
|
|
26
26
|
var d = class extends e {
|
|
27
27
|
constructor(...e) {
|
|
28
|
-
super(...e), this.lang = "en", this.showHelp = !1, this.feedback = null, this.showNotification = !1, this.notificationActive = !1, this._currentItem = "", this._sideBarOpen = !1;
|
|
28
|
+
super(...e), this.lang = "en", this.showHelp = !1, this.feedback = null, this.showNotification = !1, this.notificationActive = !1, this._currentItem = "", this._sideBarOpen = !1, this._resolvedModules = [], this._modulesLoading = !1, this._modulesLoadToken = 0;
|
|
29
|
+
}
|
|
30
|
+
_resolveModules() {
|
|
31
|
+
let e = this.modules?.modules;
|
|
32
|
+
if (!e) {
|
|
33
|
+
this._resolvedModules = [], this._modulesLoading = !1;
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if (Array.isArray(e)) {
|
|
37
|
+
this._resolvedModules = e, this._modulesLoading = !1;
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
let t = ++this._modulesLoadToken;
|
|
41
|
+
this._resolvedModules = [], this._modulesLoading = !0, e().then((e) => {
|
|
42
|
+
t === this._modulesLoadToken && (this._resolvedModules = e, this._modulesLoading = !1);
|
|
43
|
+
}).catch(() => {
|
|
44
|
+
t === this._modulesLoadToken && (this._resolvedModules = [], this._modulesLoading = !1);
|
|
45
|
+
});
|
|
29
46
|
}
|
|
30
47
|
static {
|
|
31
48
|
this.styles = [s, t`
|
|
@@ -50,7 +67,10 @@ var d = class extends e {
|
|
|
50
67
|
`];
|
|
51
68
|
}
|
|
52
69
|
willUpdate(e) {
|
|
53
|
-
e.has("tree") && this.tree && (this.tree.currentItem ? this._currentItem = this.tree.currentItem : this.tree.items.length > 0 && (this._currentItem = this._getFirstLeafId(this.tree.items[0])));
|
|
70
|
+
e.has("tree") && this.tree && (this.tree.currentItem ? this._currentItem = this.tree.currentItem : this.tree.items.length > 0 && (this._currentItem = this._getFirstLeafId(this.tree.items[0]))), e.has("modules") && this._resolveModules();
|
|
71
|
+
}
|
|
72
|
+
get _resolvedLang() {
|
|
73
|
+
return this.lang === "nb" || this.lang === "nn" ? "no" : this.lang;
|
|
54
74
|
}
|
|
55
75
|
_getFirstLeafId(e) {
|
|
56
76
|
if (c(e)) return e.id;
|
|
@@ -78,7 +98,8 @@ var d = class extends e {
|
|
|
78
98
|
return n`
|
|
79
99
|
<vsn-top-bar
|
|
80
100
|
.tree=${this.tree}
|
|
81
|
-
.modules=${this.
|
|
101
|
+
.modules=${this._resolvedModules}
|
|
102
|
+
lang=${this._resolvedLang}
|
|
82
103
|
landing-page-url=${this.landingPageUrl ?? ""}
|
|
83
104
|
?show-help=${this.showHelp}
|
|
84
105
|
help-url=${this.helpUrl ?? ""}
|
|
@@ -88,15 +109,19 @@ var d = class extends e {
|
|
|
88
109
|
@toggle-side-bar=${this._onToggleSideBar}
|
|
89
110
|
@click=${this._onTopBarClick}
|
|
90
111
|
@vsn-breadcrumb-dropdown-open=${this._onSideBarClose}
|
|
91
|
-
|
|
112
|
+
>
|
|
113
|
+
<slot name="context-selector" slot="context-selector"></slot>
|
|
114
|
+
</vsn-top-bar>
|
|
92
115
|
<div class="vsn-navigation__content">
|
|
93
116
|
<vsn-side-bar
|
|
94
117
|
.menu=${this._sideBarMenu}
|
|
95
|
-
.modules=${this.
|
|
118
|
+
.modules=${this._resolvedModules}
|
|
119
|
+
lang=${this._resolvedLang}
|
|
96
120
|
.activeModuleId=${this.modules?.activeModuleId}
|
|
121
|
+
.activeModuleLabel=${this.modules?.activeModuleLabel}
|
|
122
|
+
.modulesLoading=${this._modulesLoading}
|
|
97
123
|
.auth=${this.auth}
|
|
98
124
|
?open=${this._sideBarOpen}
|
|
99
|
-
@vsn-close=${this._onSideBarClose}
|
|
100
125
|
@vsn-side-bar-close=${this._onSideBarClose}
|
|
101
126
|
></vsn-side-bar>
|
|
102
127
|
<slot></slot>
|
|
@@ -113,6 +138,6 @@ u([a()], d.prototype, "lang", void 0), u([a({ attribute: !1 })], d.prototype, "t
|
|
|
113
138
|
})], d.prototype, "showNotification", void 0), u([a({
|
|
114
139
|
type: Boolean,
|
|
115
140
|
attribute: "notification-active"
|
|
116
|
-
})], d.prototype, "notificationActive", void 0), u([o()], d.prototype, "_currentItem", void 0), u([o()], d.prototype, "_sideBarOpen", void 0), d = u([i("vsn-navigation")], d);
|
|
141
|
+
})], d.prototype, "notificationActive", void 0), u([o()], d.prototype, "_currentItem", void 0), u([o()], d.prototype, "_sideBarOpen", void 0), u([o()], d.prototype, "_resolvedModules", void 0), u([o()], d.prototype, "_modulesLoading", void 0), d = u([i("vsn-navigation")], d);
|
|
117
142
|
//#endregion
|
|
118
143
|
export { d as VSNNavigation, c as isTreeLeaf, l as isTreeParent };
|