@quandis/qbo4.ui-bridge 4.0.1-CI-20241107-011213 → 4.0.1-CI-20241108-204654
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/package.json +1 -1
- package/src/qbo-mainmenu.d.ts +7 -39
- package/src/qbo-mainmenu.js +309 -290
- package/src/qbo-mainmenu.ts +311 -260
- package/wwwroot/css/ui-bridge.css +438 -90
- package/wwwroot/css/ui-bridge.css.map +1 -1
- package/wwwroot/css/ui-bridge.min.css +1 -1
- package/wwwroot/js/esm/ui-bridge.js +2910 -8160
- package/wwwroot/js/esm/ui-bridge.min.js +384 -137
- package/wwwroot/js/esm/ui-bridge.min.js.LICENSE.txt +0 -6
- package/wwwroot/js/esm/ui-bridge.min.js.map +1 -1
- package/wwwroot/js/qbo4.ui-bridge.js +2915 -8220
- package/wwwroot/js/qbo4.ui-bridge.min.js +384 -137
- package/wwwroot/js/qbo4.ui-bridge.min.js.LICENSE.txt +0 -6
- package/wwwroot/js/qbo4.ui-bridge.min.js.map +1 -1
package/src/qbo-mainmenu.ts
CHANGED
|
@@ -1,270 +1,321 @@
|
|
|
1
|
-
import { html, LitElement,
|
|
1
|
+
import { html, LitElement, TemplateResult } from 'lit';
|
|
2
2
|
import { customElement, property } from 'lit/decorators.js';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { qbocss } from '@quandis/qbo4.ui';
|
|
4
|
+
|
|
5
|
+
type TemplateFunction = (component: any) => TemplateResult;
|
|
6
|
+
export const mainmenuMap: Map<string, TemplateFunction> = new Map();
|
|
7
|
+
mainmenuMap.set('defaultLayout', (component: QboMainMenu) => {
|
|
8
|
+
return html`
|
|
9
|
+
<nav>
|
|
10
|
+
<img src="/ui/images/qbo-logo-new.svg"></img>
|
|
11
|
+
<span>Quandis Business Objects</span>
|
|
12
|
+
<menu>
|
|
13
|
+
<li>
|
|
14
|
+
<qbo-menu type="mega">
|
|
15
|
+
<span><svg class="label"><use href="/ui/images/qbo-icons.svg#house"></svg> <svg class="icon toggle"><use href="/ui/images/qbo-icons.svg#caret-down"></svg></span>
|
|
16
|
+
<aside>
|
|
17
|
+
<h1>Home Pages</h1>
|
|
18
|
+
<p>Select one of the following home pages to view the corresponding dashboard.</p>
|
|
19
|
+
<div class="qbo-row">
|
|
20
|
+
<div class="qbo-col qbo-col-left">
|
|
21
|
+
<h3 class="title">Financial Services</h3>
|
|
22
|
+
<p class="detail">Manage and analyze all mortgage and credit related data.</p>
|
|
23
|
+
<div class="qbo-row">
|
|
24
|
+
<div class="qbo-col qbo-col-noborder">
|
|
25
|
+
<a href="#">Credit Reports</a>
|
|
26
|
+
<br/>
|
|
27
|
+
<a href="#">Listings</a>
|
|
28
|
+
<br/>
|
|
29
|
+
<a href="#">Loans</a>
|
|
30
|
+
<br/>
|
|
31
|
+
<a href="#">Offers</a>
|
|
32
|
+
<br/>
|
|
33
|
+
<a href="#">Properties</a>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="qbo-col qbo-col-noborder">
|
|
36
|
+
<details>
|
|
37
|
+
<summary><svg class="label"><use href="/ui/images/qbo-icons.svg#folder2-open"></svg> Processes</summary>
|
|
38
|
+
<a href="#">Processes</a>
|
|
39
|
+
<br/>
|
|
40
|
+
<a href="#">Auctions</a>
|
|
41
|
+
<br/>
|
|
42
|
+
<a href="#">Bankruptcies</a>
|
|
43
|
+
<br/>
|
|
44
|
+
<a href="#">Bid At Sales</a>
|
|
45
|
+
<br/>
|
|
46
|
+
<a href="#">Cash For Keys</a>
|
|
47
|
+
<br/>
|
|
48
|
+
<a href="#">Closings</a>
|
|
49
|
+
<br/>
|
|
50
|
+
<a href="#">Deals</a>
|
|
51
|
+
<br/>
|
|
52
|
+
<a href="#">Deeds In Lieu</a>
|
|
53
|
+
<br/>
|
|
54
|
+
<a href="#">Deficiencies</a>
|
|
55
|
+
<br/>
|
|
56
|
+
<a href="#">Evictions</a>
|
|
57
|
+
<br/>
|
|
58
|
+
<a href="#">Foreclosures</a>
|
|
59
|
+
<br/>
|
|
60
|
+
<a href="#">Insurance Policies</a>
|
|
61
|
+
<br/>
|
|
62
|
+
<a href="#">Litigations</a>
|
|
63
|
+
<br/>
|
|
64
|
+
<a href="#">Loan Modifications</a>
|
|
65
|
+
<br/>
|
|
66
|
+
<a href="#">Note Sales</a>
|
|
67
|
+
<br/>
|
|
68
|
+
<a href="#">Property Inspections</a>
|
|
69
|
+
<br/>
|
|
70
|
+
<a href="#">REOs</a>
|
|
71
|
+
<br/>
|
|
72
|
+
<a href="#">Short Sales</a>
|
|
73
|
+
<br/>
|
|
74
|
+
<a href="#">Suit On Notes</a>
|
|
75
|
+
<br/>
|
|
76
|
+
<a href="#">Titles</a>
|
|
77
|
+
<br/>
|
|
78
|
+
<a href="#">Valuations</a>
|
|
79
|
+
</details>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="qbo-col">
|
|
84
|
+
<h3 class="title">Workforce Management</h3>
|
|
85
|
+
<p class="detail">Import data, complete exception tasks and run reports.</p>
|
|
86
|
+
<div class="qbo-row">
|
|
87
|
+
<div class="qbo-col qbo-col-noborder">
|
|
88
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#database-up"></svg>
|
|
89
|
+
<a href="#">Import Files</a>
|
|
90
|
+
<br/>
|
|
91
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#database-down"></svg>
|
|
92
|
+
<a href="#">Reports</a>
|
|
93
|
+
<br/>
|
|
94
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#list-task"></svg>
|
|
95
|
+
<a href="#">Tasks</a>
|
|
96
|
+
<br/>
|
|
97
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#diagram-2"></svg>
|
|
98
|
+
<a href="#">Workflows</a>
|
|
99
|
+
<br/>
|
|
100
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#list-check"></svg>
|
|
101
|
+
<a href="#">Worklists</a>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="qbo-col qbo-col-right">
|
|
106
|
+
<h3 class="title">Miscellaneous</h3>
|
|
107
|
+
<p class="detail">Additional modules to support workflow processing and data analysis.</p>
|
|
108
|
+
<div class="qbo-row">
|
|
109
|
+
<div class="qbo-col qbo-col-noborder">
|
|
110
|
+
<details>
|
|
111
|
+
<summary><svg class="label"><use href="/ui/images/qbo-icons.svg#person-rolodex"></use></svg> Contacts</summary>
|
|
112
|
+
<a href="#">Borrowers</a>
|
|
113
|
+
<br/>
|
|
114
|
+
<a href="#">Brokers</a>
|
|
115
|
+
<br/>
|
|
116
|
+
<a href="#">Contacts</a>
|
|
117
|
+
<br/>
|
|
118
|
+
<a href="#">Courts</a>
|
|
119
|
+
<br/>
|
|
120
|
+
<a href="#">Organizations</a>
|
|
121
|
+
</details>
|
|
122
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#file-earmark"></svg>
|
|
123
|
+
<a href="#">Documents</a>
|
|
124
|
+
<br/>
|
|
125
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#currency-dollar"></svg>
|
|
126
|
+
<a href="#">Ledgers</a>
|
|
127
|
+
<br/>
|
|
128
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#envelope"></svg>
|
|
129
|
+
<a href="#">Messages</a>
|
|
130
|
+
<br/>
|
|
131
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#file-spreadsheet"></svg>
|
|
132
|
+
<a href="#">Scores</a>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="qbo-col qbo-col-noborder">
|
|
135
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#bucket"></svg>
|
|
136
|
+
<a href="#">Buckets</a>
|
|
137
|
+
<br/>
|
|
138
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#tag"></svg>
|
|
139
|
+
<a href="#">Labels</a>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</aside>
|
|
145
|
+
</qbo-menu>
|
|
146
|
+
</li>
|
|
147
|
+
<li>
|
|
148
|
+
<qbo-menu type="mega">
|
|
149
|
+
<span><svg class="label"><use href="/ui/images/qbo-icons.svg#gear"></svg> <svg class="icon toggle"><use href="/ui/images/qbo-icons.svg#caret-down"></svg></span>
|
|
150
|
+
<aside>
|
|
151
|
+
<h1>System Configuration</h1>
|
|
152
|
+
<p>Manage security, rules, templates and system settings.</p>
|
|
153
|
+
<div class="qbo-row">
|
|
154
|
+
<div class="qbo-col qbo-col-left">
|
|
155
|
+
<h3 class="title">Security</h3>
|
|
156
|
+
<p class="detail">Manage users, system roles, security access and IP address restrictions.</p>
|
|
157
|
+
<div class="qbo-row">
|
|
158
|
+
<div class="qbo-col qbo-col-noborder">
|
|
159
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#person"></svg>
|
|
160
|
+
<a href="#">User Accounts</a>
|
|
161
|
+
<br/>
|
|
162
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#person-lock"></svg>
|
|
163
|
+
<a href="#">Roles</a>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="qbo-col qbo-col-noborder">
|
|
166
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#lock"></svg>
|
|
167
|
+
<a href="#">Group Access</a>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="qbo-col qbo-col-noborder">
|
|
170
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#arrow-left-right"></svg>
|
|
171
|
+
<a href="#">IP Addresses</a>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="qbo-col qbo-col-right">
|
|
176
|
+
<h3 class="title">Rules</h3>
|
|
177
|
+
<p class="detail">Manage rules matrices, linked objects and business rule plugins.</p>
|
|
178
|
+
<div class="qbo-row">
|
|
179
|
+
<div class="qbo-col qbo-col-noborder">
|
|
180
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#grid-3x3-gap"></svg>
|
|
181
|
+
<a href="#">Matrices</a>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="qbo-col qbo-col-noborder">
|
|
184
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#flag"></svg>
|
|
185
|
+
<a href="#">Business Rules</a>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="qbo-col qbo-col-noborder">
|
|
188
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#link-45deg"></svg>
|
|
189
|
+
<a href="#">Linked Objects</a>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="qbo-row qbo-row-subsequent">
|
|
195
|
+
<div class="qbo-col qbo-col-left">
|
|
196
|
+
<h3 class="title">Templates</h3>
|
|
197
|
+
<p class="detail">Manage templates used for workflow and data processing.</p>
|
|
198
|
+
<div class="qbo-row">
|
|
199
|
+
<div class="qbo-col qbo-col-noborder">
|
|
200
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#bucket"></svg>
|
|
201
|
+
<a href="#">Buckets</a>
|
|
202
|
+
<br/>
|
|
203
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#person-rolodex"></svg>
|
|
204
|
+
<a href="#">Contacts</a>
|
|
205
|
+
<br/>
|
|
206
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#file-earmark"></svg>
|
|
207
|
+
<a href="#">Documents</a>
|
|
208
|
+
<br/>
|
|
209
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#database-up"></svg>
|
|
210
|
+
<a href="#">Import Files</a>
|
|
211
|
+
<br/>
|
|
212
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#tag"></svg>
|
|
213
|
+
<a href="#">Labels</a>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="qbo-col qbo-col-noborder">
|
|
216
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#currency-dollar"></svg>
|
|
217
|
+
<a href="#">Ledgers</a>
|
|
218
|
+
<br/>
|
|
219
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#envelope"></svg>
|
|
220
|
+
<a href="#">Messages</a>
|
|
221
|
+
<br/>
|
|
222
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#folder2-open"></svg>
|
|
223
|
+
<a href="#">Processes</a>
|
|
224
|
+
<br/>
|
|
225
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#database-down"></svg>
|
|
226
|
+
<a href="#">Reports</a>
|
|
227
|
+
<br/>
|
|
228
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#file-spreadsheet"></svg>
|
|
229
|
+
<a href="#">Scores</a>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="qbo-col qbo-col-noborder">
|
|
232
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#shield-lock"></svg>
|
|
233
|
+
<a href="#">Security Access</a>
|
|
234
|
+
<br/>
|
|
235
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#list-task"></svg>
|
|
236
|
+
<a href="#">Tasks</a>
|
|
237
|
+
<br/>
|
|
238
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#diagram-2"></svg>
|
|
239
|
+
<a href="#">Workflows</a>
|
|
240
|
+
<br/>
|
|
241
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#pause"></svg>
|
|
242
|
+
<a href="#">Workflow Holds</a>
|
|
243
|
+
<br/>
|
|
244
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#list-check"></svg>
|
|
245
|
+
<a href="#">Worklists</a>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="qbo-col qbo-col-right">
|
|
250
|
+
<h3 class="title">System</h3>
|
|
251
|
+
<p class="detail">Advanced system configuration and settings.</p>
|
|
252
|
+
<div class="qbo-row">
|
|
253
|
+
<div class="qbo-col qbo-col-noborder">
|
|
254
|
+
<a href="#">Calendars</a>
|
|
255
|
+
<br/>
|
|
256
|
+
<a href="#">Configuration Entries</a>
|
|
257
|
+
<br/>
|
|
258
|
+
<a href="#">Data Tuning</a>
|
|
259
|
+
<br/>
|
|
260
|
+
<a href="#">Health Checks</a>
|
|
261
|
+
<br/>
|
|
262
|
+
<a href="#">Logging</a>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="qbo-col qbo-col-noborder">
|
|
265
|
+
<a href="#">Modules</a>
|
|
266
|
+
<br/>
|
|
267
|
+
<a href="#">Packages</a>
|
|
268
|
+
<br/>
|
|
269
|
+
<a href="#">Queuing</a>
|
|
270
|
+
<br/>
|
|
271
|
+
<a href="#">Routes</a>
|
|
272
|
+
<br/>
|
|
273
|
+
<a href="#">Schedules</a>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="qbo-col qbo-col-noborder">
|
|
276
|
+
<a href="#">States</a>
|
|
277
|
+
<br/>
|
|
278
|
+
<a href="#">ZIP Codes</a>
|
|
279
|
+
<br/>
|
|
280
|
+
<br/>
|
|
281
|
+
<br/>
|
|
282
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#lightning"></svg>
|
|
283
|
+
<a href="#">Recycle Application</a>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</aside>
|
|
289
|
+
</qbo-menu>
|
|
290
|
+
</li>
|
|
291
|
+
<li>
|
|
292
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#play"></svg>
|
|
293
|
+
<qbo-popover>
|
|
294
|
+
<h3>Get next item</h3>
|
|
295
|
+
<p>Start your next available worklist item.</p>
|
|
296
|
+
</qbo-popover>
|
|
297
|
+
</li>
|
|
298
|
+
<li>
|
|
299
|
+
<svg class="label"><use href="/ui/images/qbo-icons.svg#box-arrow-right"></svg>
|
|
300
|
+
<qbo-popover>
|
|
301
|
+
<h3>Sign out</h3>
|
|
302
|
+
<p>Sign out of the system.</p>
|
|
303
|
+
</qbo-popover>
|
|
304
|
+
</li>
|
|
305
|
+
</menu>
|
|
306
|
+
</nav>
|
|
307
|
+
`;
|
|
308
|
+
});
|
|
6
309
|
|
|
7
310
|
@customElement('qbo-mainmenu')
|
|
8
311
|
export class QboMainMenu extends LitElement {
|
|
9
312
|
|
|
10
|
-
@property(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
@property({ type: String })
|
|
14
|
-
ariaLabel = 'Toggle menu';
|
|
15
|
-
|
|
16
|
-
@property({ type: String })
|
|
17
|
-
buttonType = 'button';
|
|
18
|
-
|
|
19
|
-
@property({ type: String })
|
|
20
|
-
collapseToggle = 'collapse';
|
|
21
|
-
|
|
22
|
-
@property({ type: String })
|
|
23
|
-
dblClickClass = 'qbo-doubleclick';
|
|
24
|
-
|
|
25
|
-
@property({ type: String })
|
|
26
|
-
dropdownId = 'qboMainMenu';
|
|
27
|
-
|
|
28
|
-
@property({ type: String })
|
|
29
|
-
dropdownToggle = 'dropdown';
|
|
30
|
-
|
|
31
|
-
@property({ type: String })
|
|
32
|
-
iconClass = 'qbo-icon';
|
|
33
|
-
|
|
34
|
-
@property({ type: String })
|
|
35
|
-
liLinkToggleClass = 'qbo-dropdown';
|
|
36
|
-
|
|
37
|
-
@property({ type: String })
|
|
38
|
-
liLinkClass = 'qbo-nav-item';
|
|
39
|
-
|
|
40
|
-
@property({ type: String })
|
|
41
|
-
liAMenuClass = 'qbo-dropdown-item';
|
|
42
|
-
|
|
43
|
-
@property({ type: String })
|
|
44
|
-
navClass = 'qbo-mainmenu';
|
|
45
|
-
|
|
46
|
-
@property({ type: String })
|
|
47
|
-
popoverContainer = 'body';
|
|
48
|
-
|
|
49
|
-
@property({ type: String })
|
|
50
|
-
popoverHtml = 'false';
|
|
51
|
-
|
|
52
|
-
@property({ type: String })
|
|
53
|
-
popoverPlacement = 'bottom';
|
|
54
|
-
|
|
55
|
-
@property({ type: String })
|
|
56
|
-
popoverToggle = 'popover';
|
|
57
|
-
|
|
58
|
-
@property({ type: String })
|
|
59
|
-
popoverTrigger = 'hover';
|
|
60
|
-
|
|
61
|
-
@property({ type: String })
|
|
62
|
-
spanMenuClass = 'qbo-submenuexpand';
|
|
63
|
-
|
|
64
|
-
@property({ type: String })
|
|
65
|
-
spanMenuValue = '>';
|
|
66
|
-
|
|
67
|
-
@property({ type: String })
|
|
68
|
-
ulMainMenuToggleClass = 'qbo-dropdown-mainmenu';
|
|
69
|
-
|
|
70
|
-
@property({ type: String })
|
|
71
|
-
ulSubMenuClass = 'submenu';
|
|
72
|
-
|
|
73
|
-
@property({ type: String })
|
|
74
|
-
ulSubMenuToggleClass = 'dropdown-menu';
|
|
75
|
-
|
|
76
|
-
@property({ type: String })
|
|
77
|
-
apiEndpoint = 'qbo';
|
|
78
|
-
|
|
79
|
-
@property({ type: Boolean })
|
|
80
|
-
renderInHost = true;
|
|
81
|
-
|
|
82
|
-
@property({ type: Object })
|
|
83
|
-
jsonData: any | null = {};
|
|
313
|
+
@property()
|
|
314
|
+
type: string | null = 'defaultLayout';
|
|
84
315
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
createRenderRoot() {
|
|
88
|
-
return this.renderInHost ? this : super.createRenderRoot();
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
async connectedCallback() {
|
|
92
|
-
super.connectedCallback();
|
|
93
|
-
window.addEventListener('resize', this.handleResize);
|
|
94
|
-
const service: IApiService = services.container.isRegistered(this.apiEndpoint) ? services.container.resolve<IApiService>(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
|
|
95
|
-
this.jsonData = await service.fetch(`theme/mainmenu`);
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
disconnectedCallback() {
|
|
100
|
-
window.removeEventListener('resize', this.handleResize);
|
|
101
|
-
super.disconnectedCallback();
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
handleResize = () => {
|
|
105
|
-
if (window.innerWidth < 992) {
|
|
106
|
-
/* Collapse menu on small screens */
|
|
107
|
-
this.renderRoot.querySelectorAll(`button`).forEach(function (btn) {
|
|
108
|
-
if (btn != null && btn instanceof HTMLElement && btn.hasAttribute('aria-expanded') && btn.getAttribute('aria-expanded') == 'true')
|
|
109
|
-
btn.click();
|
|
110
|
-
});
|
|
111
|
-
} else {
|
|
112
|
-
/* Remove collapsed styling on large screens*/
|
|
113
|
-
this.renderRoot.querySelectorAll(`.${this.ulSubMenuToggleClass} .${this.ulSubMenuClass}`).forEach(function (ul) {
|
|
114
|
-
if (ul != null && ul instanceof HTMLElement && ul.hasAttribute('style'))
|
|
115
|
-
ul.removeAttribute('style');
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
updated(changedProperties: PropertyValues) {
|
|
121
|
-
super.updated(changedProperties);
|
|
122
|
-
|
|
123
|
-
if (changedProperties.get('jsonData') != undefined) {
|
|
124
|
-
/* Disable click */
|
|
125
|
-
this.renderRoot.querySelectorAll(`.${this.ulSubMenuToggleClass}`).forEach(ul => {
|
|
126
|
-
ul.addEventListener('click', function (e) {
|
|
127
|
-
e.stopPropagation();
|
|
128
|
-
});
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
/* Click for menu expansion on small screens */
|
|
132
|
-
const className = this.ulSubMenuClass;
|
|
133
|
-
this.renderRoot.querySelectorAll(`.${this.ulSubMenuToggleClass} a`).forEach(function (a) {
|
|
134
|
-
a.addEventListener('click', (e) => {
|
|
135
|
-
if (e.currentTarget != null && e.currentTarget instanceof HTMLElement && window.innerWidth < 992) {
|
|
136
|
-
const nextEl = e.currentTarget.nextElementSibling;
|
|
137
|
-
if (nextEl != null && nextEl instanceof HTMLElement && nextEl.classList.contains(className)) {
|
|
138
|
-
e.preventDefault();
|
|
139
|
-
nextEl.style.display = nextEl.style.display == 'block' ? 'none' : 'block';
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
});
|
|
143
|
-
});
|
|
144
|
-
|
|
145
|
-
/* Enable popovers */
|
|
146
|
-
this.renderRoot.querySelectorAll(`[data-bs-toggle="${this.popoverToggle}"]`).forEach(function (t) {
|
|
147
|
-
new Popover(t);
|
|
148
|
-
});
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
renderImage(image) {
|
|
153
|
-
if (image != null) return html`<img src="${image}"/><span/>`;
|
|
154
|
-
else return html``;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
renderMenu(json, isDropdown, isSubmenu) {
|
|
158
|
-
let result = html``;
|
|
159
|
-
const jsonMenu = json != null && json.Menu != null ? json.Menu : json;
|
|
160
|
-
|
|
161
|
-
if (jsonMenu != null) {
|
|
162
|
-
|
|
163
|
-
if (jsonMenu.forEach) {
|
|
164
|
-
jsonMenu.forEach(mm => {
|
|
165
|
-
if (mm.Menu != null)
|
|
166
|
-
result = html`${result}${this.renderMenuDropdown(mm, isSubmenu)}`;
|
|
167
|
-
else if (mm.Type == "Divider")
|
|
168
|
-
result = html`${result}${this.renderMenuDivider()}`;
|
|
169
|
-
else if (isDropdown)
|
|
170
|
-
result = html`${result}${this.renderMenuDropdownLink(mm.URL, mm.Text, mm.Icon)}`;
|
|
171
|
-
else
|
|
172
|
-
result = html`${result}${this.renderMenuLink(mm)}`;
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
else {
|
|
176
|
-
if (jsonMenu.Menu != null)
|
|
177
|
-
result = html`${result}${this.renderMenuDropdown(jsonMenu, isSubmenu)}`;
|
|
178
|
-
else if (jsonMenu.Type == "Divider")
|
|
179
|
-
result = html`${result}${this.renderMenuDivider()}`;
|
|
180
|
-
else if (isDropdown)
|
|
181
|
-
result = html`${result}${this.renderMenuDropdownLink(jsonMenu.URL, jsonMenu.Text, jsonMenu.Icon)}`;
|
|
182
|
-
else
|
|
183
|
-
result = html`${result}${this.renderMenuLink(jsonMenu)}`;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
return html`${result}`;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
renderMenuDivider() {
|
|
192
|
-
return html`<li><hr/></li>`;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
renderMenuDropdown(json, isSubmenu) {
|
|
196
|
-
const i = (json.Icon != null && json.Icon != '') ? html`<i class="${json.Icon} ${this.iconClass}" />` : ``;
|
|
197
|
-
if (isSubmenu)
|
|
198
|
-
return html`<li>
|
|
199
|
-
<a class="${this.liAMenuClass}" href="${json.URL}">
|
|
200
|
-
${i}<span>${json.Text}</span>
|
|
201
|
-
<span class="${this.spanMenuClass}">${this.spanMenuValue}</span>
|
|
202
|
-
</a>
|
|
203
|
-
<ul class="${this.ulSubMenuClass} ${this.ulSubMenuToggleClass}">
|
|
204
|
-
${this.renderMenu(json.Menu, true, true)}
|
|
205
|
-
</ul>
|
|
206
|
-
</li>`;
|
|
207
|
-
else
|
|
208
|
-
return html`<li class="${this.liLinkClass} ${this.liLinkToggleClass}">
|
|
209
|
-
<a href="${json.URL}" data-bs-toggle="${this.dropdownToggle}">
|
|
210
|
-
${i}<span>${json.Text}</span>
|
|
211
|
-
</a>
|
|
212
|
-
<ul class="${this.ulSubMenuToggleClass} ${this.ulMainMenuToggleClass}">
|
|
213
|
-
${this.renderMenu(json.Menu, true, true)}
|
|
214
|
-
</ul>
|
|
215
|
-
</li>`;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
renderMenuDropdownLink(url, text, icon) {
|
|
219
|
-
const i = (icon != null && icon != '') ? html`<i class="${icon} ${this.iconClass}" />` : ``;
|
|
220
|
-
return html`<li><a class="${this.liAMenuClass}" href="${url}">${i}${text}</a></li>`;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
renderMenuLink(menu) {
|
|
224
|
-
const i = (menu.Icon != null && menu.Icon != '') ? html`<i class="${menu.Icon} ${this.iconClass}" />` : ``;
|
|
225
|
-
const title = menu.Title;
|
|
226
|
-
const content = menu.DataContent;
|
|
227
|
-
const toggle = menu.DataToggle != null ? menu.DataToggle : this.popoverToggle;
|
|
228
|
-
const container = menu.DataContainer != null ? menu.DataContainer : this.popoverContainer;
|
|
229
|
-
const placement = menu.DataPlacement != null ? menu.DataPlacement : this.popoverPlacement;
|
|
230
|
-
const trigger = menu.DataTrigger != null ? menu.DataTrigger : this.popoverTrigger;
|
|
231
|
-
const isHtml = menu.DataHtml != null ? menu.DataHtml : this.popoverHtml;
|
|
232
|
-
|
|
233
|
-
if (menu.DoubleClick != null)
|
|
234
|
-
return html`<li class="${this.liLinkClass}">
|
|
235
|
-
<a class="${this.dblClickClass}" title="${title}" data-bs-trigger="${trigger}" data-bs-placement="${placement}" data-bs-container="${container}" data-bs-content="${content}" data-bs-toggle="${toggle}" data-bs-html="${isHtml}" ondblclick="${menu.DoubleClick}">
|
|
236
|
-
${i}${menu.Text}
|
|
237
|
-
</a>
|
|
238
|
-
</li>`;
|
|
239
|
-
else
|
|
240
|
-
return html`<li class="${this.liLinkClass}">
|
|
241
|
-
<a title="${title}" data-bs-trigger="${trigger}" data-bs-placement="${placement}" data-bs-container="${container}" data-bs-content="${content}" data-bs-toggle="${toggle}" data-bs-html="${isHtml}" href="${menu.URL}">
|
|
242
|
-
${i}${menu.Text}
|
|
243
|
-
</a>
|
|
244
|
-
</li>`;
|
|
245
|
-
}
|
|
316
|
+
static styles = qbocss;
|
|
246
317
|
|
|
247
318
|
render() {
|
|
248
|
-
|
|
249
|
-
return html`
|
|
250
|
-
<nav class="${this.navClass}">
|
|
251
|
-
<div>
|
|
252
|
-
<a href="#">
|
|
253
|
-
${this.renderImage(this.jsonData.Root.MainMenu.Image)}
|
|
254
|
-
${this.jsonData.Root.MainMenu.Label}
|
|
255
|
-
</a>
|
|
256
|
-
<button type="${this.buttonType}" data-bs-toggle="${this.collapseToggle}" data-bs-target="#${this.dropdownId}" aria-expanded="${this.ariaExpanded}" aria-label="${this.ariaLabel}">
|
|
257
|
-
<span/>
|
|
258
|
-
</button>
|
|
259
|
-
<div id="${this.dropdownId}">
|
|
260
|
-
<ul>
|
|
261
|
-
${this.renderMenu(this.jsonData.Root.MainMenu, false, false)}
|
|
262
|
-
</ul>
|
|
263
|
-
</div>
|
|
264
|
-
</div>
|
|
265
|
-
</nav>`;
|
|
266
|
-
}
|
|
267
|
-
else
|
|
268
|
-
return html``;
|
|
319
|
+
return html`<slot>${mainmenuMap.has(this.type!) ? mainmenuMap.get(this.type!)!(this) : null}</slot>`;
|
|
269
320
|
}
|
|
270
321
|
}
|