@fundamental-styles/mcp 0.41.9-rc.2 → 0.41.9-rc.21
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/data/CHANGELOG.md +91 -3
- package/data/component-guidance.json +2 -2
- package/data/components/avatar-product-switch.md +175 -60
- package/data/components/container.md +113 -0
- package/data/components/form-group.md +1 -0
- package/data/components/navigation-navigation.md +673 -957
- package/data/components/navigation.md +5869 -2148
- package/data/components/shellbar.md +16 -16
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +4 -234
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +196 -232
- package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html +353 -197
- package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html +451 -245
- package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
- package/data/examples/BTP/Navigation/vertical/navigation-snapped.example.html +361 -157
- package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
- package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +948 -0
- package/data/examples/BTP/Navigation/vertical/navigation.example.html +444 -242
- package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
- package/data/examples/Components/product-switch/large.example.html +65 -19
- package/data/examples/Components/product-switch/medium.example.html +5 -7
- package/data/examples/Components/product-switch/small.example.html +4 -6
- package/data/examples/Components/product-switch/two-column.example.html +20 -0
- package/data/examples/Components/shellbar/optional-items.example.html +2 -2
- package/data/examples/Components/shellbar/overflow-toolbar.example.html +2 -2
- package/data/examples/Components/shellbar/responsive-paddings.example.html +4 -4
- package/data/examples/Components/shellbar/responsiveness.example.html +8 -8
- package/package.json +1 -1
|
@@ -0,0 +1,935 @@
|
|
|
1
|
+
<div
|
|
2
|
+
class="fd-navigation fd-navigation--vertical"
|
|
3
|
+
role="navigation"
|
|
4
|
+
aria-roledescription="Side Navigation"
|
|
5
|
+
style="width: 18rem; height: 60rem"
|
|
6
|
+
>
|
|
7
|
+
<div class="fd-navigation__container fd-navigation__container--top fd-navigation__container--sticky">
|
|
8
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
9
|
+
<li class="fd-navigation__list-item" role="presentation">
|
|
10
|
+
<div class="fd-input-group">
|
|
11
|
+
<input
|
|
12
|
+
class="fd-input fd-input-group__input"
|
|
13
|
+
type="text"
|
|
14
|
+
id="side-nav-search-sticky"
|
|
15
|
+
name="two-icon-actions"
|
|
16
|
+
placeholder="Search"
|
|
17
|
+
autocomplete="off"
|
|
18
|
+
aria-label="Search"
|
|
19
|
+
/>
|
|
20
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
21
|
+
<button
|
|
22
|
+
class="fd-input-group__button fd-button fd-button--icon fd-button--transparent"
|
|
23
|
+
type="button"
|
|
24
|
+
aria-label="Search value"
|
|
25
|
+
>
|
|
26
|
+
<i class="sap-icon--search" aria-hidden="true" role="presentation"></i>
|
|
27
|
+
</button>
|
|
28
|
+
</span>
|
|
29
|
+
</div>
|
|
30
|
+
</li>
|
|
31
|
+
|
|
32
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
33
|
+
<div
|
|
34
|
+
class="fd-navigation__item"
|
|
35
|
+
aria-level="1"
|
|
36
|
+
role="treeitem"
|
|
37
|
+
title="Home"
|
|
38
|
+
aria-roledescription="Navigation List Tree Item"
|
|
39
|
+
aria-selected="false"
|
|
40
|
+
aria-expanded="false"
|
|
41
|
+
>
|
|
42
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
43
|
+
<span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
|
|
44
|
+
<span class="fd-navigation__text">Home</span>
|
|
45
|
+
<span
|
|
46
|
+
class="fd-navigation__selection-indicator"
|
|
47
|
+
role="presentation"
|
|
48
|
+
aria-hidden="true"
|
|
49
|
+
aria-label="selection indicator"
|
|
50
|
+
></span>
|
|
51
|
+
</a>
|
|
52
|
+
</div>
|
|
53
|
+
</li>
|
|
54
|
+
|
|
55
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
56
|
+
<div
|
|
57
|
+
class="fd-navigation__item"
|
|
58
|
+
aria-level="1"
|
|
59
|
+
role="treeitem"
|
|
60
|
+
title="Resource Planning and Business Management Solutions"
|
|
61
|
+
aria-roledescription="Navigation List Tree Item"
|
|
62
|
+
aria-selected="false"
|
|
63
|
+
aria-expanded="false"
|
|
64
|
+
>
|
|
65
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
66
|
+
<span
|
|
67
|
+
class="fd-navigation__icon sap-icon--bbyd-dashboard"
|
|
68
|
+
role="presentation"
|
|
69
|
+
aria-hidden="true"
|
|
70
|
+
></span>
|
|
71
|
+
<span class="fd-navigation__text"> Resource Planning and Business Management Solutions </span>
|
|
72
|
+
<span
|
|
73
|
+
class="fd-navigation__selection-indicator"
|
|
74
|
+
role="presentation"
|
|
75
|
+
aria-hidden="true"
|
|
76
|
+
aria-label="selection indicator"
|
|
77
|
+
></span>
|
|
78
|
+
</a>
|
|
79
|
+
</div>
|
|
80
|
+
</li>
|
|
81
|
+
</ul>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div class="fd-navigation__container fd-navigation__container--top">
|
|
85
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
86
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
87
|
+
<div
|
|
88
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
89
|
+
aria-level="1"
|
|
90
|
+
role="treeitem"
|
|
91
|
+
title="Main Items Group"
|
|
92
|
+
aria-roledescription="Navigation List Tree Item - Group"
|
|
93
|
+
aria-selected="false"
|
|
94
|
+
aria-expanded="true"
|
|
95
|
+
>
|
|
96
|
+
<a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
|
|
97
|
+
<span class="fd-navigation__text">Main Items</span>
|
|
98
|
+
<span
|
|
99
|
+
class="fd-navigation__has-children-indicator"
|
|
100
|
+
role="presentation"
|
|
101
|
+
aria-hidden="true"
|
|
102
|
+
aria-label="has children indicator, expanded"
|
|
103
|
+
></span>
|
|
104
|
+
</a>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<ul
|
|
108
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
109
|
+
role="tree"
|
|
110
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
111
|
+
tabindex="-1"
|
|
112
|
+
>
|
|
113
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
114
|
+
<div
|
|
115
|
+
class="fd-navigation__item"
|
|
116
|
+
aria-level="2"
|
|
117
|
+
role="treeitem"
|
|
118
|
+
title="Basket"
|
|
119
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
120
|
+
aria-expanded="true"
|
|
121
|
+
aria-selected="false"
|
|
122
|
+
>
|
|
123
|
+
<a
|
|
124
|
+
class="fd-navigation__link"
|
|
125
|
+
role="button"
|
|
126
|
+
tabindex="-1"
|
|
127
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
128
|
+
>
|
|
129
|
+
<span
|
|
130
|
+
class="fd-navigation__icon sap-icon--unfavorite"
|
|
131
|
+
role="presentation"
|
|
132
|
+
aria-hidden="true"
|
|
133
|
+
></span>
|
|
134
|
+
<span class="fd-navigation__text"
|
|
135
|
+
>Favorites<span
|
|
136
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-9"
|
|
137
|
+
>
|
|
138
|
+
<span class="fd-object-status__text">New</span>
|
|
139
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
140
|
+
<span class="fd-object-status__sr-only">Indication Color 9</span>
|
|
141
|
+
</span>
|
|
142
|
+
</span>
|
|
143
|
+
|
|
144
|
+
<span
|
|
145
|
+
class="fd-navigation__has-children-indicator"
|
|
146
|
+
role="presentation"
|
|
147
|
+
aria-hidden="true"
|
|
148
|
+
aria-label="has children indicator, expanded"
|
|
149
|
+
></span>
|
|
150
|
+
</a>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
153
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
154
|
+
<ul
|
|
155
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
156
|
+
role="tree"
|
|
157
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
158
|
+
tabindex="-1"
|
|
159
|
+
>
|
|
160
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
161
|
+
<div
|
|
162
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
163
|
+
aria-level="3"
|
|
164
|
+
role="treeitem"
|
|
165
|
+
title="My Accounts"
|
|
166
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
167
|
+
aria-expanded="false"
|
|
168
|
+
aria-selected="false"
|
|
169
|
+
>
|
|
170
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
171
|
+
<span class="fd-navigation__text">My Accounts</span>
|
|
172
|
+
<span
|
|
173
|
+
class="fd-navigation__selection-indicator"
|
|
174
|
+
role="presentation"
|
|
175
|
+
aria-hidden="true"
|
|
176
|
+
aria-label="selection indicator"
|
|
177
|
+
></span>
|
|
178
|
+
</a>
|
|
179
|
+
</div>
|
|
180
|
+
</li>
|
|
181
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
182
|
+
<div
|
|
183
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
184
|
+
aria-level="3"
|
|
185
|
+
role="treeitem"
|
|
186
|
+
title="My Orders"
|
|
187
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
188
|
+
aria-expanded="false"
|
|
189
|
+
aria-selected="false"
|
|
190
|
+
>
|
|
191
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
192
|
+
<span class="fd-navigation__text">My Orders</span>
|
|
193
|
+
<span
|
|
194
|
+
class="fd-navigation__selection-indicator"
|
|
195
|
+
role="presentation"
|
|
196
|
+
aria-hidden="true"
|
|
197
|
+
aria-label="selection indicator"
|
|
198
|
+
></span>
|
|
199
|
+
</a>
|
|
200
|
+
</div>
|
|
201
|
+
</li>
|
|
202
|
+
</ul>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</li>
|
|
206
|
+
|
|
207
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
208
|
+
<div
|
|
209
|
+
class="fd-navigation__item"
|
|
210
|
+
aria-level="2"
|
|
211
|
+
role="treeitem"
|
|
212
|
+
title="Reports"
|
|
213
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
214
|
+
aria-expanded="true"
|
|
215
|
+
aria-selected="false"
|
|
216
|
+
>
|
|
217
|
+
<a
|
|
218
|
+
class="fd-navigation__link"
|
|
219
|
+
role="button"
|
|
220
|
+
tabindex="-1"
|
|
221
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
222
|
+
>
|
|
223
|
+
<span
|
|
224
|
+
class="fd-navigation__icon sap-icon--document"
|
|
225
|
+
role="presentation"
|
|
226
|
+
aria-hidden="true"
|
|
227
|
+
></span>
|
|
228
|
+
<span class="fd-navigation__text">Reports</span>
|
|
229
|
+
<span
|
|
230
|
+
class="fd-navigation__selection-indicator"
|
|
231
|
+
role="presentation"
|
|
232
|
+
aria-hidden="true"
|
|
233
|
+
aria-label="selection indicator"
|
|
234
|
+
></span>
|
|
235
|
+
<span
|
|
236
|
+
class="fd-navigation__has-children-indicator"
|
|
237
|
+
role="presentation"
|
|
238
|
+
aria-hidden="true"
|
|
239
|
+
aria-label="has children indicator, expanded"
|
|
240
|
+
></span>
|
|
241
|
+
</a>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
244
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
245
|
+
<ul
|
|
246
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
247
|
+
role="tree"
|
|
248
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
249
|
+
tabindex="-1"
|
|
250
|
+
>
|
|
251
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
252
|
+
<div
|
|
253
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
254
|
+
aria-level="3"
|
|
255
|
+
role="treeitem"
|
|
256
|
+
title="Sales Reports"
|
|
257
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
258
|
+
aria-expanded="false"
|
|
259
|
+
aria-selected="false"
|
|
260
|
+
>
|
|
261
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
262
|
+
<span class="fd-navigation__text">Sales Reports</span>
|
|
263
|
+
<span
|
|
264
|
+
class="fd-navigation__selection-indicator"
|
|
265
|
+
role="presentation"
|
|
266
|
+
aria-hidden="true"
|
|
267
|
+
aria-label="selection indicator"
|
|
268
|
+
></span>
|
|
269
|
+
</a>
|
|
270
|
+
</div>
|
|
271
|
+
</li>
|
|
272
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
273
|
+
<div
|
|
274
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
275
|
+
aria-level="3"
|
|
276
|
+
role="treeitem"
|
|
277
|
+
title="Companies"
|
|
278
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
279
|
+
aria-expanded="false"
|
|
280
|
+
aria-selected="false"
|
|
281
|
+
>
|
|
282
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
283
|
+
<span class="fd-navigation__text">Companies</span>
|
|
284
|
+
<span
|
|
285
|
+
class="fd-navigation__selection-indicator"
|
|
286
|
+
role="presentation"
|
|
287
|
+
aria-hidden="true"
|
|
288
|
+
aria-label="selection indicator"
|
|
289
|
+
></span>
|
|
290
|
+
</a>
|
|
291
|
+
</div>
|
|
292
|
+
</li>
|
|
293
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
294
|
+
<div
|
|
295
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
296
|
+
aria-level="3"
|
|
297
|
+
role="treeitem"
|
|
298
|
+
title="Partners"
|
|
299
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
300
|
+
aria-expanded="false"
|
|
301
|
+
aria-selected="false"
|
|
302
|
+
>
|
|
303
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
304
|
+
<span class="fd-navigation__text">Partners (external link)</span>
|
|
305
|
+
|
|
306
|
+
<span
|
|
307
|
+
class="fd-navigation__selection-indicator"
|
|
308
|
+
role="presentation"
|
|
309
|
+
aria-hidden="true"
|
|
310
|
+
aria-label="selection indicator"
|
|
311
|
+
></span>
|
|
312
|
+
<span
|
|
313
|
+
class="fd-navigation__external-link-indicator"
|
|
314
|
+
role="presentation"
|
|
315
|
+
aria-hidden="true"
|
|
316
|
+
aria-label="external link indicator"
|
|
317
|
+
></span>
|
|
318
|
+
</a>
|
|
319
|
+
</div>
|
|
320
|
+
</li>
|
|
321
|
+
</ul>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</li>
|
|
325
|
+
|
|
326
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
327
|
+
<div
|
|
328
|
+
class="fd-navigation__item"
|
|
329
|
+
aria-level="2"
|
|
330
|
+
role="treeitem"
|
|
331
|
+
title="Sales"
|
|
332
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
333
|
+
aria-expanded="false"
|
|
334
|
+
aria-selected="false"
|
|
335
|
+
>
|
|
336
|
+
<a
|
|
337
|
+
class="fd-navigation__link"
|
|
338
|
+
role="button"
|
|
339
|
+
tabindex="-1"
|
|
340
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
341
|
+
>
|
|
342
|
+
<span
|
|
343
|
+
class="fd-navigation__icon sap-icon--crm-sales"
|
|
344
|
+
role="presentation"
|
|
345
|
+
aria-hidden="true"
|
|
346
|
+
></span>
|
|
347
|
+
<span class="fd-navigation__text">Sales</span>
|
|
348
|
+
<span
|
|
349
|
+
class="fd-navigation__selection-indicator"
|
|
350
|
+
role="presentation"
|
|
351
|
+
aria-hidden="true"
|
|
352
|
+
aria-label="selection indicator"
|
|
353
|
+
></span>
|
|
354
|
+
<span
|
|
355
|
+
class="fd-navigation__has-children-indicator"
|
|
356
|
+
role="presentation"
|
|
357
|
+
aria-hidden="true"
|
|
358
|
+
aria-label="has children indicator, collapsed"
|
|
359
|
+
></span>
|
|
360
|
+
</a>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
363
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
364
|
+
<ul
|
|
365
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
366
|
+
role="tree"
|
|
367
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
368
|
+
tabindex="-1"
|
|
369
|
+
>
|
|
370
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
371
|
+
<div
|
|
372
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
373
|
+
aria-level="3"
|
|
374
|
+
role="treeitem"
|
|
375
|
+
title="Leads"
|
|
376
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
377
|
+
aria-expanded="false"
|
|
378
|
+
aria-selected="false"
|
|
379
|
+
>
|
|
380
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
381
|
+
<span class="fd-navigation__text">Leads</span>
|
|
382
|
+
<span
|
|
383
|
+
class="fd-navigation__selection-indicator"
|
|
384
|
+
role="presentation"
|
|
385
|
+
aria-hidden="true"
|
|
386
|
+
aria-label="selection indicator"
|
|
387
|
+
></span>
|
|
388
|
+
</a>
|
|
389
|
+
</div>
|
|
390
|
+
</li>
|
|
391
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
392
|
+
<div
|
|
393
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
394
|
+
aria-level="3"
|
|
395
|
+
role="treeitem"
|
|
396
|
+
title="Opportunities"
|
|
397
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
398
|
+
aria-expanded="false"
|
|
399
|
+
aria-selected="false"
|
|
400
|
+
>
|
|
401
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
402
|
+
<span class="fd-navigation__text">Opportunities</span>
|
|
403
|
+
<span
|
|
404
|
+
class="fd-navigation__selection-indicator"
|
|
405
|
+
role="presentation"
|
|
406
|
+
aria-hidden="true"
|
|
407
|
+
aria-label="selection indicator"
|
|
408
|
+
></span>
|
|
409
|
+
</a>
|
|
410
|
+
</div>
|
|
411
|
+
</li>
|
|
412
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
413
|
+
<div
|
|
414
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
415
|
+
aria-level="3"
|
|
416
|
+
role="treeitem"
|
|
417
|
+
title="Quotes"
|
|
418
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
419
|
+
aria-expanded="false"
|
|
420
|
+
aria-selected="false"
|
|
421
|
+
>
|
|
422
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
423
|
+
<span class="fd-navigation__text">Quotes</span>
|
|
424
|
+
<span
|
|
425
|
+
class="fd-navigation__selection-indicator"
|
|
426
|
+
role="presentation"
|
|
427
|
+
aria-hidden="true"
|
|
428
|
+
aria-label="selection indicator"
|
|
429
|
+
></span>
|
|
430
|
+
</a>
|
|
431
|
+
</div>
|
|
432
|
+
</li>
|
|
433
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
434
|
+
<div
|
|
435
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
436
|
+
aria-level="3"
|
|
437
|
+
role="treeitem"
|
|
438
|
+
title="Orders"
|
|
439
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
440
|
+
aria-expanded="false"
|
|
441
|
+
aria-selected="false"
|
|
442
|
+
>
|
|
443
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
444
|
+
<span class="fd-navigation__text">Orders</span>
|
|
445
|
+
<span
|
|
446
|
+
class="fd-navigation__selection-indicator"
|
|
447
|
+
role="presentation"
|
|
448
|
+
aria-hidden="true"
|
|
449
|
+
aria-label="selection indicator"
|
|
450
|
+
></span>
|
|
451
|
+
</a>
|
|
452
|
+
</div>
|
|
453
|
+
</li>
|
|
454
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
455
|
+
<div
|
|
456
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
457
|
+
aria-level="3"
|
|
458
|
+
role="treeitem"
|
|
459
|
+
title="Invoices"
|
|
460
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
461
|
+
aria-expanded="false"
|
|
462
|
+
aria-selected="false"
|
|
463
|
+
>
|
|
464
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
465
|
+
<span class="fd-navigation__text">Invoices</span>
|
|
466
|
+
<span
|
|
467
|
+
class="fd-navigation__selection-indicator"
|
|
468
|
+
role="presentation"
|
|
469
|
+
aria-hidden="true"
|
|
470
|
+
aria-label="selection indicator"
|
|
471
|
+
></span>
|
|
472
|
+
</a>
|
|
473
|
+
</div>
|
|
474
|
+
</li>
|
|
475
|
+
</ul>
|
|
476
|
+
</div>
|
|
477
|
+
</div>
|
|
478
|
+
</li>
|
|
479
|
+
</ul>
|
|
480
|
+
</li>
|
|
481
|
+
|
|
482
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
483
|
+
<div
|
|
484
|
+
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
485
|
+
aria-level="2"
|
|
486
|
+
role="treeitem"
|
|
487
|
+
title="Customer Management"
|
|
488
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
489
|
+
aria-expanded="true"
|
|
490
|
+
aria-selected="false"
|
|
491
|
+
>
|
|
492
|
+
<a class="fd-navigation__link" href="#">
|
|
493
|
+
<span
|
|
494
|
+
class="fd-navigation__icon sap-icon--account"
|
|
495
|
+
role="presentation"
|
|
496
|
+
aria-hidden="true"
|
|
497
|
+
></span>
|
|
498
|
+
<span class="fd-navigation__text">Customer Management</span>
|
|
499
|
+
<span
|
|
500
|
+
class="fd-navigation__selection-indicator"
|
|
501
|
+
role="presentation"
|
|
502
|
+
aria-hidden="true"
|
|
503
|
+
aria-label="selection indicator"
|
|
504
|
+
></span>
|
|
505
|
+
</a>
|
|
506
|
+
<span
|
|
507
|
+
class="fd-navigation__has-children-indicator"
|
|
508
|
+
role="button"
|
|
509
|
+
aria-label="expand/collapse children"
|
|
510
|
+
></span>
|
|
511
|
+
</div>
|
|
512
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
513
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
514
|
+
<ul
|
|
515
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
516
|
+
role="tree"
|
|
517
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
518
|
+
tabindex="-1"
|
|
519
|
+
>
|
|
520
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
521
|
+
<div
|
|
522
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
523
|
+
aria-level="3"
|
|
524
|
+
role="treeitem"
|
|
525
|
+
title="Contacts"
|
|
526
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
527
|
+
aria-expanded="false"
|
|
528
|
+
aria-selected="false"
|
|
529
|
+
>
|
|
530
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
531
|
+
<span class="fd-navigation__text">Contacts</span>
|
|
532
|
+
<span
|
|
533
|
+
class="fd-navigation__selection-indicator"
|
|
534
|
+
role="presentation"
|
|
535
|
+
aria-hidden="true"
|
|
536
|
+
aria-label="selection indicator"
|
|
537
|
+
></span>
|
|
538
|
+
</a>
|
|
539
|
+
</div>
|
|
540
|
+
</li>
|
|
541
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
542
|
+
<div
|
|
543
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
544
|
+
aria-level="3"
|
|
545
|
+
role="treeitem"
|
|
546
|
+
title="Companies"
|
|
547
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
548
|
+
aria-expanded="false"
|
|
549
|
+
aria-selected="false"
|
|
550
|
+
>
|
|
551
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
552
|
+
<span class="fd-navigation__text">Companies</span>
|
|
553
|
+
<span
|
|
554
|
+
class="fd-navigation__selection-indicator"
|
|
555
|
+
role="presentation"
|
|
556
|
+
aria-hidden="true"
|
|
557
|
+
aria-label="selection indicator"
|
|
558
|
+
></span>
|
|
559
|
+
</a>
|
|
560
|
+
</div>
|
|
561
|
+
</li>
|
|
562
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
563
|
+
<div
|
|
564
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
565
|
+
aria-level="3"
|
|
566
|
+
role="treeitem"
|
|
567
|
+
title="Partners"
|
|
568
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
569
|
+
aria-expanded="false"
|
|
570
|
+
aria-selected="false"
|
|
571
|
+
>
|
|
572
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
573
|
+
<span class="fd-navigation__text">Partners (external link)</span>
|
|
574
|
+
<span
|
|
575
|
+
class="fd-navigation__selection-indicator"
|
|
576
|
+
role="presentation"
|
|
577
|
+
aria-hidden="true"
|
|
578
|
+
aria-label="selection indicator"
|
|
579
|
+
></span>
|
|
580
|
+
<span
|
|
581
|
+
class="fd-navigation__external-link-indicator"
|
|
582
|
+
role="presentation"
|
|
583
|
+
aria-hidden="true"
|
|
584
|
+
aria-label="external link indicator"
|
|
585
|
+
></span>
|
|
586
|
+
</a>
|
|
587
|
+
</div>
|
|
588
|
+
</li>
|
|
589
|
+
</ul>
|
|
590
|
+
</div>
|
|
591
|
+
</div>
|
|
592
|
+
</li>
|
|
593
|
+
|
|
594
|
+
<li
|
|
595
|
+
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
596
|
+
role="presentation"
|
|
597
|
+
aria-hidden="true"
|
|
598
|
+
></li>
|
|
599
|
+
|
|
600
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
601
|
+
<div
|
|
602
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
603
|
+
aria-level="1"
|
|
604
|
+
role="treeitem"
|
|
605
|
+
title="Additional Items"
|
|
606
|
+
aria-roledescription="Navigation List Tree Item - Group"
|
|
607
|
+
aria-selected="false"
|
|
608
|
+
aria-expanded="true"
|
|
609
|
+
>
|
|
610
|
+
<a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
|
|
611
|
+
<span class="fd-navigation__text">Additional Items</span>
|
|
612
|
+
<span
|
|
613
|
+
class="fd-navigation__has-children-indicator"
|
|
614
|
+
role="presentation"
|
|
615
|
+
aria-hidden="true"
|
|
616
|
+
aria-label="has children indicator, expanded"
|
|
617
|
+
></span>
|
|
618
|
+
</a>
|
|
619
|
+
</div>
|
|
620
|
+
|
|
621
|
+
<ul
|
|
622
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
623
|
+
role="tree"
|
|
624
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
625
|
+
tabindex="-1"
|
|
626
|
+
>
|
|
627
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
628
|
+
<div
|
|
629
|
+
class="fd-navigation__item"
|
|
630
|
+
aria-level="2"
|
|
631
|
+
role="treeitem"
|
|
632
|
+
title="Products"
|
|
633
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
634
|
+
aria-selected="false"
|
|
635
|
+
aria-expanded="false"
|
|
636
|
+
>
|
|
637
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
638
|
+
<span
|
|
639
|
+
class="fd-navigation__icon sap-icon--customer-view"
|
|
640
|
+
role="presentation"
|
|
641
|
+
aria-hidden="true"
|
|
642
|
+
></span>
|
|
643
|
+
<span class="fd-navigation__text">Products</span>
|
|
644
|
+
<span
|
|
645
|
+
class="fd-navigation__selection-indicator"
|
|
646
|
+
role="presentation"
|
|
647
|
+
aria-hidden="true"
|
|
648
|
+
aria-label="selection indicator"
|
|
649
|
+
></span>
|
|
650
|
+
</a>
|
|
651
|
+
</div>
|
|
652
|
+
</li>
|
|
653
|
+
|
|
654
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
655
|
+
<div
|
|
656
|
+
class="fd-navigation__item"
|
|
657
|
+
aria-level="2"
|
|
658
|
+
role="treeitem"
|
|
659
|
+
title="Marketing"
|
|
660
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
661
|
+
aria-expanded="true"
|
|
662
|
+
aria-selected="false"
|
|
663
|
+
>
|
|
664
|
+
<a
|
|
665
|
+
class="fd-navigation__link"
|
|
666
|
+
role="button"
|
|
667
|
+
tabindex="-1"
|
|
668
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
669
|
+
>
|
|
670
|
+
<span
|
|
671
|
+
class="fd-navigation__icon sap-icon--marketing-campaign"
|
|
672
|
+
role="presentation"
|
|
673
|
+
aria-hidden="true"
|
|
674
|
+
></span>
|
|
675
|
+
<span class="fd-navigation__text">Marketing</span>
|
|
676
|
+
<span
|
|
677
|
+
class="fd-navigation__selection-indicator"
|
|
678
|
+
role="presentation"
|
|
679
|
+
aria-hidden="true"
|
|
680
|
+
aria-label="selection indicator"
|
|
681
|
+
></span>
|
|
682
|
+
<span
|
|
683
|
+
class="fd-navigation__has-children-indicator"
|
|
684
|
+
role="presentation"
|
|
685
|
+
aria-hidden="true"
|
|
686
|
+
aria-label="has children indicator, expanded"
|
|
687
|
+
></span>
|
|
688
|
+
</a>
|
|
689
|
+
</div>
|
|
690
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
691
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
692
|
+
<ul
|
|
693
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
694
|
+
role="tree"
|
|
695
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
696
|
+
tabindex="-1"
|
|
697
|
+
>
|
|
698
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
699
|
+
<div
|
|
700
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
701
|
+
aria-level="3"
|
|
702
|
+
role="treeitem"
|
|
703
|
+
title="Campaigns"
|
|
704
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
705
|
+
aria-expanded="false"
|
|
706
|
+
aria-selected="false"
|
|
707
|
+
>
|
|
708
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
709
|
+
<span class="fd-navigation__text">Campaigns</span>
|
|
710
|
+
<span
|
|
711
|
+
class="fd-navigation__selection-indicator"
|
|
712
|
+
role="presentation"
|
|
713
|
+
aria-hidden="true"
|
|
714
|
+
aria-label="selection indicator"
|
|
715
|
+
></span>
|
|
716
|
+
</a>
|
|
717
|
+
</div>
|
|
718
|
+
</li>
|
|
719
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
720
|
+
<div
|
|
721
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
722
|
+
aria-level="3"
|
|
723
|
+
role="treeitem"
|
|
724
|
+
title="E-Mail Marketing"
|
|
725
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
726
|
+
aria-expanded="false"
|
|
727
|
+
aria-selected="false"
|
|
728
|
+
>
|
|
729
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
730
|
+
<span class="fd-navigation__text">E-Mail Marketing</span>
|
|
731
|
+
<span
|
|
732
|
+
class="fd-navigation__selection-indicator"
|
|
733
|
+
role="presentation"
|
|
734
|
+
aria-hidden="true"
|
|
735
|
+
aria-label="selection indicator"
|
|
736
|
+
></span>
|
|
737
|
+
</a>
|
|
738
|
+
</div>
|
|
739
|
+
</li>
|
|
740
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
741
|
+
<div
|
|
742
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
743
|
+
aria-level="3"
|
|
744
|
+
role="treeitem"
|
|
745
|
+
title="Marketing Automation"
|
|
746
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
747
|
+
aria-expanded="false"
|
|
748
|
+
aria-selected="false"
|
|
749
|
+
>
|
|
750
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
751
|
+
<span class="fd-navigation__text">Marketing Automation</span>
|
|
752
|
+
<span
|
|
753
|
+
class="fd-navigation__selection-indicator"
|
|
754
|
+
role="presentation"
|
|
755
|
+
aria-hidden="true"
|
|
756
|
+
aria-label="selection indicator"
|
|
757
|
+
></span>
|
|
758
|
+
</a>
|
|
759
|
+
</div>
|
|
760
|
+
</li>
|
|
761
|
+
</ul>
|
|
762
|
+
</div>
|
|
763
|
+
</div>
|
|
764
|
+
</li>
|
|
765
|
+
|
|
766
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
767
|
+
<div
|
|
768
|
+
class="fd-navigation__item"
|
|
769
|
+
aria-level="2"
|
|
770
|
+
role="treeitem"
|
|
771
|
+
title="Reports"
|
|
772
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
773
|
+
aria-expanded="true"
|
|
774
|
+
aria-selected="false"
|
|
775
|
+
>
|
|
776
|
+
<a
|
|
777
|
+
class="fd-navigation__link"
|
|
778
|
+
role="button"
|
|
779
|
+
tabindex="-1"
|
|
780
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
781
|
+
>
|
|
782
|
+
<span
|
|
783
|
+
class="fd-navigation__icon sap-icon--manager-insight"
|
|
784
|
+
role="presentation"
|
|
785
|
+
aria-hidden="true"
|
|
786
|
+
></span>
|
|
787
|
+
<span class="fd-navigation__text">Reports</span>
|
|
788
|
+
<span
|
|
789
|
+
class="fd-navigation__selection-indicator"
|
|
790
|
+
role="presentation"
|
|
791
|
+
aria-hidden="true"
|
|
792
|
+
aria-label="selection indicator"
|
|
793
|
+
></span>
|
|
794
|
+
<span
|
|
795
|
+
class="fd-navigation__has-children-indicator"
|
|
796
|
+
role="presentation"
|
|
797
|
+
aria-hidden="true"
|
|
798
|
+
aria-label="has children indicator, expanded"
|
|
799
|
+
></span>
|
|
800
|
+
</a>
|
|
801
|
+
</div>
|
|
802
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
803
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
804
|
+
<ul
|
|
805
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
806
|
+
role="tree"
|
|
807
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
808
|
+
tabindex="-1"
|
|
809
|
+
>
|
|
810
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
811
|
+
<div
|
|
812
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
813
|
+
aria-level="3"
|
|
814
|
+
role="treeitem"
|
|
815
|
+
title="Sales Report"
|
|
816
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
817
|
+
aria-expanded="false"
|
|
818
|
+
aria-selected="false"
|
|
819
|
+
>
|
|
820
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
821
|
+
<span class="fd-navigation__text">Sales Report</span>
|
|
822
|
+
<span
|
|
823
|
+
class="fd-navigation__selection-indicator"
|
|
824
|
+
role="presentation"
|
|
825
|
+
aria-hidden="true"
|
|
826
|
+
aria-label="selection indicator"
|
|
827
|
+
></span>
|
|
828
|
+
</a>
|
|
829
|
+
</div>
|
|
830
|
+
</li>
|
|
831
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
832
|
+
<div
|
|
833
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
834
|
+
aria-level="3"
|
|
835
|
+
role="treeitem"
|
|
836
|
+
title="Customer Reports"
|
|
837
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
838
|
+
aria-expanded="false"
|
|
839
|
+
aria-selected="false"
|
|
840
|
+
>
|
|
841
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
842
|
+
<span class="fd-navigation__text">Customer Reports</span>
|
|
843
|
+
<span
|
|
844
|
+
class="fd-navigation__selection-indicator"
|
|
845
|
+
role="presentation"
|
|
846
|
+
aria-hidden="true"
|
|
847
|
+
aria-label="selection indicator"
|
|
848
|
+
></span>
|
|
849
|
+
</a>
|
|
850
|
+
</div>
|
|
851
|
+
</li>
|
|
852
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
853
|
+
<div
|
|
854
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
855
|
+
aria-level="3"
|
|
856
|
+
role="treeitem"
|
|
857
|
+
title="Marketing Reports"
|
|
858
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
859
|
+
aria-expanded="false"
|
|
860
|
+
aria-selected="false"
|
|
861
|
+
>
|
|
862
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
863
|
+
<span class="fd-navigation__text">Marketing Reports</span>
|
|
864
|
+
<span
|
|
865
|
+
class="fd-navigation__selection-indicator"
|
|
866
|
+
role="presentation"
|
|
867
|
+
aria-hidden="true"
|
|
868
|
+
aria-label="selection indicator"
|
|
869
|
+
></span>
|
|
870
|
+
</a>
|
|
871
|
+
</div>
|
|
872
|
+
</li>
|
|
873
|
+
</ul>
|
|
874
|
+
</div>
|
|
875
|
+
</div>
|
|
876
|
+
</li>
|
|
877
|
+
</ul>
|
|
878
|
+
</li>
|
|
879
|
+
|
|
880
|
+
<li
|
|
881
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
882
|
+
role="presentation"
|
|
883
|
+
aria-hidden="true"
|
|
884
|
+
></li>
|
|
885
|
+
</ul>
|
|
886
|
+
</div>
|
|
887
|
+
|
|
888
|
+
<div class="fd-navigation__container fd-navigation__container--bottom">
|
|
889
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
890
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
891
|
+
<div
|
|
892
|
+
class="fd-navigation__item fd-navigation__item--create"
|
|
893
|
+
aria-level="1"
|
|
894
|
+
role="treeitem"
|
|
895
|
+
title="Create Ticket"
|
|
896
|
+
aria-roledescription="Navigation List Tree Item"
|
|
897
|
+
aria-selected="false"
|
|
898
|
+
aria-expanded="false"
|
|
899
|
+
>
|
|
900
|
+
<button class="fd-navigation__link">
|
|
901
|
+
<span
|
|
902
|
+
class="fd-navigation__icon sap-icon--write-new"
|
|
903
|
+
role="presentation"
|
|
904
|
+
aria-hidden="true"
|
|
905
|
+
></span>
|
|
906
|
+
<span class="fd-navigation__text">Create Ticket</span>
|
|
907
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
908
|
+
</button>
|
|
909
|
+
</div>
|
|
910
|
+
</li>
|
|
911
|
+
|
|
912
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
913
|
+
<div
|
|
914
|
+
class="fd-navigation__item"
|
|
915
|
+
aria-level="1"
|
|
916
|
+
role="treeitem"
|
|
917
|
+
title="Product Settings"
|
|
918
|
+
aria-roledescription="Navigation List Tree Item"
|
|
919
|
+
aria-selected="false"
|
|
920
|
+
aria-expanded="false"
|
|
921
|
+
>
|
|
922
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
923
|
+
<span
|
|
924
|
+
class="fd-navigation__icon sap-icon--settings"
|
|
925
|
+
role="presentation"
|
|
926
|
+
aria-hidden="true"
|
|
927
|
+
></span>
|
|
928
|
+
<span class="fd-navigation__text">Product Settings</span>
|
|
929
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
930
|
+
</a>
|
|
931
|
+
</div>
|
|
932
|
+
</li>
|
|
933
|
+
</ul>
|
|
934
|
+
</div>
|
|
935
|
+
</div>
|