@fundamental-styles/mcp 0.41.9-rc.9 → 0.41.9
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 +69 -3
- package/data/components/avatar-product-switch.md +167 -52
- package/data/components/container.md +113 -0
- package/data/components/dialog-docs-static-settings.md +1490 -130
- package/data/components/form-group.md +1 -0
- package/data/components/navigation-navigation.md +470 -1088
- package/data/components/navigation.md +2269 -489
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +3 -228
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +3 -209
- package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
- package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
- package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +0 -44
- 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/settings/md.example.html +124 -30
- package/data/examples/Components/settings/sm.example.html +64 -27
- package/data/examples/Components/settings/xl-appearance.example.html +370 -0
- package/data/examples/Components/settings/xl-language-region.example.html +284 -0
- package/data/examples/Components/settings/xl-notifications-details.example.html +240 -0
- package/data/examples/Components/settings/xl-notifications.example.html +370 -0
- package/data/examples/Components/settings/xl-user-account.example.html +114 -0
- package/data/examples/Components/settings/xl.example.html +113 -25
- package/package.json +1 -1
- package/data/examples/Components/settings/xl-default.example.html +0 -108
package/data/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,72 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.41.9](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.22...v0.41.9) (2026-09-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package fundamental-styles
|
|
9
|
+
|
|
10
|
+
## [0.41.9-rc.22](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.21...v0.41.9-rc.22) (2026-09-03)
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
- **styles:** updates for Settings Dialog ([#6380](https://github.com/SAP/fundamental-styles/issues/6380)) ([314b092](https://github.com/SAP/fundamental-styles/commit/314b092f3574d6d2c4ee88c20ad3145e550858a9))
|
|
15
|
+
|
|
16
|
+
## [0.41.9-rc.21](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.20...v0.41.9-rc.21) (2026-09-03)
|
|
17
|
+
|
|
18
|
+
**Note:** Version bump only for package fundamental-styles
|
|
19
|
+
|
|
20
|
+
## [0.41.9-rc.20](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.19...v0.41.9-rc.20) (2026-09-02)
|
|
21
|
+
|
|
22
|
+
**Note:** Version bump only for package fundamental-styles
|
|
23
|
+
|
|
24
|
+
## [0.41.9-rc.19](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.18...v0.41.9-rc.19) (2026-09-01)
|
|
25
|
+
|
|
26
|
+
**Note:** Version bump only for package fundamental-styles
|
|
27
|
+
|
|
28
|
+
## [0.41.9-rc.18](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.17...v0.41.9-rc.18) (2026-08-31)
|
|
29
|
+
|
|
30
|
+
### Bug Fixes
|
|
31
|
+
|
|
32
|
+
- **styles:** add sticky header area, sticky search to Vertical navigation [ci visual] ([#6382](https://github.com/SAP/fundamental-styles/issues/6382)) ([5dba40c](https://github.com/SAP/fundamental-styles/commit/5dba40c24c43cc1be7b052d9147a2eeef193aaf5))
|
|
33
|
+
|
|
34
|
+
## [0.41.9-rc.17](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.16...v0.41.9-rc.17) (2026-08-31)
|
|
35
|
+
|
|
36
|
+
**Note:** Version bump only for package fundamental-styles
|
|
37
|
+
|
|
38
|
+
## [0.41.9-rc.16](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.15...v0.41.9-rc.16) (2026-08-28)
|
|
39
|
+
|
|
40
|
+
### Bug Fixes
|
|
41
|
+
|
|
42
|
+
- **styles:** form layout fields spacing ([#6379](https://github.com/SAP/fundamental-styles/issues/6379)) ([86a2d7a](https://github.com/SAP/fundamental-styles/commit/86a2d7a629ec04ddd764a45af2317abcedb74fe9))
|
|
43
|
+
|
|
44
|
+
## [0.41.9-rc.15](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.14...v0.41.9-rc.15) (2026-08-26)
|
|
45
|
+
|
|
46
|
+
### Bug Fixes
|
|
47
|
+
|
|
48
|
+
- **styles:** product switch design updates feedback ([#6377](https://github.com/SAP/fundamental-styles/issues/6377)) ([d0065ca](https://github.com/SAP/fundamental-styles/commit/d0065ca52baabe5988847d0c742ae94ffc5ac6fd))
|
|
49
|
+
|
|
50
|
+
## [0.41.9-rc.14](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.13...v0.41.9-rc.14) (2026-08-14)
|
|
51
|
+
|
|
52
|
+
**Note:** Version bump only for package fundamental-styles
|
|
53
|
+
|
|
54
|
+
## [0.41.9-rc.13](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.12...v0.41.9-rc.13) (2026-08-13)
|
|
55
|
+
|
|
56
|
+
**Note:** Version bump only for package fundamental-styles
|
|
57
|
+
|
|
58
|
+
## [0.41.9-rc.12](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.11...v0.41.9-rc.12) (2026-08-12)
|
|
59
|
+
|
|
60
|
+
### Bug Fixes
|
|
61
|
+
|
|
62
|
+
- ignore nx folder to remediate "Maximum call stack size exceeded" error ([#6370](https://github.com/SAP/fundamental-styles/issues/6370)) ([2a911fc](https://github.com/SAP/fundamental-styles/commit/2a911fc03e63cff734a6004d1e4a55b999b8642d))
|
|
63
|
+
|
|
64
|
+
## [0.41.9-rc.11](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.10...v0.41.9-rc.11) (2026-08-07)
|
|
65
|
+
|
|
66
|
+
**Note:** Version bump only for package fundamental-styles
|
|
67
|
+
|
|
68
|
+
## [0.41.9-rc.10](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.9...v0.41.9-rc.10) (2026-08-05)
|
|
69
|
+
|
|
70
|
+
**Note:** Version bump only for package fundamental-styles
|
|
71
|
+
|
|
6
72
|
## [0.41.9-rc.9](https://github.com/SAP/fundamental-styles/compare/v0.41.9-rc.8...v0.41.9-rc.9) (2026-08-05)
|
|
7
73
|
|
|
8
74
|
### Bug Fixes
|
|
@@ -7059,9 +7125,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
|
|
|
7059
7125
|
|
|
7060
7126
|
- added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
|
|
7061
7127
|
Before:
|
|
7062
|
-
|
|
7063
|
-
|
|
7064
|
-
|
|
7128
|
+
<div class="fd-row">
|
|
7129
|
+
After:
|
|
7130
|
+
<div class="fd-row fd-row--top">
|
|
7065
7131
|
|
|
7066
7132
|
### Bug Fixes
|
|
7067
7133
|
|
|
@@ -73,16 +73,14 @@ npm install fundamental-styles
|
|
|
73
73
|
```html
|
|
74
74
|
<div class="fd-product-switch__body">
|
|
75
75
|
<ul class="fd-product-switch__list" role="menu">
|
|
76
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="
|
|
77
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--
|
|
78
|
-
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
79
|
-
</span>
|
|
76
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="SAP Start Central Home" aria-posinset="1" aria-setsize="20">
|
|
77
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start"></span>
|
|
80
78
|
<div class="fd-product-switch__text">
|
|
81
|
-
<div class="fd-product-switch__title">
|
|
82
|
-
<div class="fd-product-switch__subtitle">Central Home
|
|
79
|
+
<div class="fd-product-switch__title">SAP Start</div>
|
|
80
|
+
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
83
81
|
</div>
|
|
84
82
|
</li>
|
|
85
|
-
<li class="fd-product-switch__item
|
|
83
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="20">
|
|
86
84
|
<span
|
|
87
85
|
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
88
86
|
|
|
@@ -94,7 +92,7 @@ npm install fundamental-styles
|
|
|
94
92
|
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
95
93
|
</div>
|
|
96
94
|
</li>
|
|
97
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="
|
|
95
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="20">
|
|
98
96
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Catalog">
|
|
99
97
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
100
98
|
</span>
|
|
@@ -103,7 +101,7 @@ npm install fundamental-styles
|
|
|
103
101
|
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
104
102
|
</div>
|
|
105
103
|
</li>
|
|
106
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="
|
|
104
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="20">
|
|
107
105
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Guided Buying">
|
|
108
106
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
109
107
|
</span>
|
|
@@ -111,7 +109,7 @@ npm install fundamental-styles
|
|
|
111
109
|
<div class="fd-product-switch__title">Guided Buying</div>
|
|
112
110
|
</div>
|
|
113
111
|
</li>
|
|
114
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="
|
|
112
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="20">
|
|
115
113
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Strategic Procurement">
|
|
116
114
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
117
115
|
</span>
|
|
@@ -119,7 +117,7 @@ npm install fundamental-styles
|
|
|
119
117
|
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
120
118
|
</div>
|
|
121
119
|
</li>
|
|
122
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="
|
|
120
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="20">
|
|
123
121
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Travel & Expense">
|
|
124
122
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
125
123
|
</span>
|
|
@@ -128,7 +126,7 @@ npm install fundamental-styles
|
|
|
128
126
|
<div class="fd-product-switch__subtitle">Concur</div>
|
|
129
127
|
</div>
|
|
130
128
|
</li>
|
|
131
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="
|
|
129
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="20">
|
|
132
130
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Vendor Management">
|
|
133
131
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
134
132
|
</span>
|
|
@@ -137,7 +135,7 @@ npm install fundamental-styles
|
|
|
137
135
|
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
138
136
|
</div>
|
|
139
137
|
</li>
|
|
140
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Human Capital Management Human Capital Management" aria-posinset="8" aria-setsize="
|
|
138
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Human Capital Management Human Capital Management" aria-posinset="8" aria-setsize="20">
|
|
141
139
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Human Capital Management">
|
|
142
140
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
143
141
|
</span>
|
|
@@ -145,7 +143,7 @@ npm install fundamental-styles
|
|
|
145
143
|
<div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
|
|
146
144
|
</div>
|
|
147
145
|
</li>
|
|
148
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="
|
|
146
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="20">
|
|
149
147
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Sales Cloud">
|
|
150
148
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
151
149
|
</span>
|
|
@@ -154,7 +152,7 @@ npm install fundamental-styles
|
|
|
154
152
|
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
155
153
|
</div>
|
|
156
154
|
</li>
|
|
157
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="
|
|
155
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="20">
|
|
158
156
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Commerce Cloud">
|
|
159
157
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
160
158
|
</span>
|
|
@@ -163,7 +161,7 @@ npm install fundamental-styles
|
|
|
163
161
|
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
164
162
|
</div>
|
|
165
163
|
</li>
|
|
166
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="
|
|
164
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="20">
|
|
167
165
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Marketing Cloud">
|
|
168
166
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
169
167
|
</span>
|
|
@@ -172,7 +170,7 @@ npm install fundamental-styles
|
|
|
172
170
|
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
173
171
|
</div>
|
|
174
172
|
</li>
|
|
175
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="
|
|
173
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="20">
|
|
176
174
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Service Cloud">
|
|
177
175
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
178
176
|
</span>
|
|
@@ -180,7 +178,7 @@ npm install fundamental-styles
|
|
|
180
178
|
<div class="fd-product-switch__title">Service Cloud</div>
|
|
181
179
|
</div>
|
|
182
180
|
</li>
|
|
183
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="
|
|
181
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="20">
|
|
184
182
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Customer Data Cloud">
|
|
185
183
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
186
184
|
</span>
|
|
@@ -188,7 +186,7 @@ npm install fundamental-styles
|
|
|
188
186
|
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
189
187
|
</div>
|
|
190
188
|
</li>
|
|
191
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="
|
|
189
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="20">
|
|
192
190
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA">
|
|
193
191
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
194
192
|
</span>
|
|
@@ -196,6 +194,54 @@ npm install fundamental-styles
|
|
|
196
194
|
<div class="fd-product-switch__title">S/4HANA</div>
|
|
197
195
|
</div>
|
|
198
196
|
</li>
|
|
197
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Business Technology Platform" aria-posinset="15" aria-setsize="20">
|
|
198
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Business Technology Platform">
|
|
199
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--cloud"></i>
|
|
200
|
+
</span>
|
|
201
|
+
<div class="fd-product-switch__text">
|
|
202
|
+
<div class="fd-product-switch__title">Business Technology Platform</div>
|
|
203
|
+
</div>
|
|
204
|
+
</li>
|
|
205
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Intelligent Spend Management" aria-posinset="16" aria-setsize="20">
|
|
206
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Intelligent Spend Management">
|
|
207
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--expense-report"></i>
|
|
208
|
+
</span>
|
|
209
|
+
<div class="fd-product-switch__text">
|
|
210
|
+
<div class="fd-product-switch__title">Intelligent Spend Management</div>
|
|
211
|
+
</div>
|
|
212
|
+
</li>
|
|
213
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Supply Chain Management" aria-posinset="17" aria-setsize="20">
|
|
214
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Supply Chain Management">
|
|
215
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--supplier"></i>
|
|
216
|
+
</span>
|
|
217
|
+
<div class="fd-product-switch__text">
|
|
218
|
+
<div class="fd-product-switch__title">Supply Chain Management</div>
|
|
219
|
+
</div>
|
|
220
|
+
</li>
|
|
221
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Asset Management" aria-posinset="18" aria-setsize="20">
|
|
222
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Asset Management">
|
|
223
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--iphone"></i>
|
|
224
|
+
</span>
|
|
225
|
+
<div class="fd-product-switch__text">
|
|
226
|
+
<div class="fd-product-switch__title">Asset Management</div>
|
|
227
|
+
</div>
|
|
228
|
+
</li>
|
|
229
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Extended Planning & Analysis" aria-posinset="19" aria-setsize="20">
|
|
230
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Extended Planning & Analysis">
|
|
231
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--chart-axis"></i>
|
|
232
|
+
</span>
|
|
233
|
+
<div class="fd-product-switch__text">
|
|
234
|
+
<div class="fd-product-switch__title">Extended Planning & Analysis</div>
|
|
235
|
+
</div>
|
|
236
|
+
</li>
|
|
237
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Financial Management" aria-posinset="20" aria-setsize="20">
|
|
238
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Financial Management">
|
|
239
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--money-bills"></i>
|
|
240
|
+
</span>
|
|
241
|
+
<div class="fd-product-switch__text">
|
|
242
|
+
<div class="fd-product-switch__title">Financial Management</div>
|
|
243
|
+
</div>
|
|
244
|
+
</li>
|
|
199
245
|
</ul>
|
|
200
246
|
</div>
|
|
201
247
|
```
|
|
@@ -251,21 +297,19 @@ Key CSS variables used by this component:
|
|
|
251
297
|
|
|
252
298
|
### Large
|
|
253
299
|
|
|
254
|
-
Product switch is displayed with a maximum of 4 columns on large desktop screens.
|
|
300
|
+
Product switch is displayed with a maximum of 4 columns on large desktop screens. The body grows to accommodate up to 4 rows of items (max-height: 33rem / 528px). Once that limit is reached, additional items are accessible via vertical scroll.
|
|
255
301
|
|
|
256
302
|
```html
|
|
257
303
|
<div class="fd-product-switch__body">
|
|
258
304
|
<ul class="fd-product-switch__list" role="menu">
|
|
259
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="
|
|
260
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--
|
|
261
|
-
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
262
|
-
</span>
|
|
305
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="SAP Start Central Home" aria-posinset="1" aria-setsize="20">
|
|
306
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start"></span>
|
|
263
307
|
<div class="fd-product-switch__text">
|
|
264
|
-
<div class="fd-product-switch__title">
|
|
265
|
-
<div class="fd-product-switch__subtitle">Central Home
|
|
308
|
+
<div class="fd-product-switch__title">SAP Start</div>
|
|
309
|
+
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
266
310
|
</div>
|
|
267
311
|
</li>
|
|
268
|
-
<li class="fd-product-switch__item
|
|
312
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="20">
|
|
269
313
|
<span
|
|
270
314
|
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
271
315
|
|
|
@@ -277,7 +321,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
277
321
|
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
278
322
|
</div>
|
|
279
323
|
</li>
|
|
280
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="
|
|
324
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="20">
|
|
281
325
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Catalog">
|
|
282
326
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
283
327
|
</span>
|
|
@@ -286,7 +330,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
286
330
|
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
287
331
|
</div>
|
|
288
332
|
</li>
|
|
289
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="
|
|
333
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="20">
|
|
290
334
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Guided Buying">
|
|
291
335
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
292
336
|
</span>
|
|
@@ -294,7 +338,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
294
338
|
<div class="fd-product-switch__title">Guided Buying</div>
|
|
295
339
|
</div>
|
|
296
340
|
</li>
|
|
297
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="
|
|
341
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="20">
|
|
298
342
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Strategic Procurement">
|
|
299
343
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
300
344
|
</span>
|
|
@@ -302,7 +346,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
302
346
|
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
303
347
|
</div>
|
|
304
348
|
</li>
|
|
305
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="
|
|
349
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="20">
|
|
306
350
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Travel & Expense">
|
|
307
351
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
308
352
|
</span>
|
|
@@ -311,7 +355,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
311
355
|
<div class="fd-product-switch__subtitle">Concur</div>
|
|
312
356
|
</div>
|
|
313
357
|
</li>
|
|
314
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="
|
|
358
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="20">
|
|
315
359
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Vendor Management">
|
|
316
360
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
317
361
|
</span>
|
|
@@ -320,7 +364,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
320
364
|
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
321
365
|
</div>
|
|
322
366
|
</li>
|
|
323
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Human Capital Management Human Capital Management" aria-posinset="8" aria-setsize="
|
|
367
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Human Capital Management Human Capital Management" aria-posinset="8" aria-setsize="20">
|
|
324
368
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Human Capital Management">
|
|
325
369
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
326
370
|
</span>
|
|
@@ -328,7 +372,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
328
372
|
<div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
|
|
329
373
|
</div>
|
|
330
374
|
</li>
|
|
331
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="
|
|
375
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="20">
|
|
332
376
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Sales Cloud">
|
|
333
377
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
334
378
|
</span>
|
|
@@ -337,7 +381,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
337
381
|
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
338
382
|
</div>
|
|
339
383
|
</li>
|
|
340
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="
|
|
384
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="20">
|
|
341
385
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Commerce Cloud">
|
|
342
386
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
343
387
|
</span>
|
|
@@ -346,7 +390,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
346
390
|
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
347
391
|
</div>
|
|
348
392
|
</li>
|
|
349
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="
|
|
393
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="20">
|
|
350
394
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Marketing Cloud">
|
|
351
395
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
352
396
|
</span>
|
|
@@ -355,7 +399,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
355
399
|
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
356
400
|
</div>
|
|
357
401
|
</li>
|
|
358
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="
|
|
402
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="20">
|
|
359
403
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Service Cloud">
|
|
360
404
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
361
405
|
</span>
|
|
@@ -363,7 +407,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
363
407
|
<div class="fd-product-switch__title">Service Cloud</div>
|
|
364
408
|
</div>
|
|
365
409
|
</li>
|
|
366
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="
|
|
410
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="20">
|
|
367
411
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Customer Data Cloud">
|
|
368
412
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
369
413
|
</span>
|
|
@@ -371,7 +415,7 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
371
415
|
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
372
416
|
</div>
|
|
373
417
|
</li>
|
|
374
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="
|
|
418
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="20">
|
|
375
419
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA">
|
|
376
420
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
377
421
|
</span>
|
|
@@ -379,6 +423,54 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
379
423
|
<div class="fd-product-switch__title">S/4HANA</div>
|
|
380
424
|
</div>
|
|
381
425
|
</li>
|
|
426
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Business Technology Platform" aria-posinset="15" aria-setsize="20">
|
|
427
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Business Technology Platform">
|
|
428
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--cloud"></i>
|
|
429
|
+
</span>
|
|
430
|
+
<div class="fd-product-switch__text">
|
|
431
|
+
<div class="fd-product-switch__title">Business Technology Platform</div>
|
|
432
|
+
</div>
|
|
433
|
+
</li>
|
|
434
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Intelligent Spend Management" aria-posinset="16" aria-setsize="20">
|
|
435
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Intelligent Spend Management">
|
|
436
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--expense-report"></i>
|
|
437
|
+
</span>
|
|
438
|
+
<div class="fd-product-switch__text">
|
|
439
|
+
<div class="fd-product-switch__title">Intelligent Spend Management</div>
|
|
440
|
+
</div>
|
|
441
|
+
</li>
|
|
442
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Supply Chain Management" aria-posinset="17" aria-setsize="20">
|
|
443
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Supply Chain Management">
|
|
444
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--supplier"></i>
|
|
445
|
+
</span>
|
|
446
|
+
<div class="fd-product-switch__text">
|
|
447
|
+
<div class="fd-product-switch__title">Supply Chain Management</div>
|
|
448
|
+
</div>
|
|
449
|
+
</li>
|
|
450
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Asset Management" aria-posinset="18" aria-setsize="20">
|
|
451
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Asset Management">
|
|
452
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--iphone"></i>
|
|
453
|
+
</span>
|
|
454
|
+
<div class="fd-product-switch__text">
|
|
455
|
+
<div class="fd-product-switch__title">Asset Management</div>
|
|
456
|
+
</div>
|
|
457
|
+
</li>
|
|
458
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Extended Planning & Analysis" aria-posinset="19" aria-setsize="20">
|
|
459
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Extended Planning & Analysis">
|
|
460
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--chart-axis"></i>
|
|
461
|
+
</span>
|
|
462
|
+
<div class="fd-product-switch__text">
|
|
463
|
+
<div class="fd-product-switch__title">Extended Planning & Analysis</div>
|
|
464
|
+
</div>
|
|
465
|
+
</li>
|
|
466
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Financial Management" aria-posinset="20" aria-setsize="20">
|
|
467
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Financial Management">
|
|
468
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--money-bills"></i>
|
|
469
|
+
</span>
|
|
470
|
+
<div class="fd-product-switch__text">
|
|
471
|
+
<div class="fd-product-switch__title">Financial Management</div>
|
|
472
|
+
</div>
|
|
473
|
+
</li>
|
|
382
474
|
</ul>
|
|
383
475
|
</div>
|
|
384
476
|
```
|
|
@@ -390,16 +482,14 @@ If there are 6 (or less) items to display, it is recommended to use the 3-column
|
|
|
390
482
|
```html
|
|
391
483
|
<div class="fd-product-switch__body fd-product-switch__body--col-3">
|
|
392
484
|
<ul class="fd-product-switch__list" role="menu">
|
|
393
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="
|
|
394
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--
|
|
395
|
-
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
396
|
-
</span>
|
|
485
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="SAP Start Central Home" aria-posinset="1" aria-setsize="5">
|
|
486
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start"></span>
|
|
397
487
|
<div class="fd-product-switch__text">
|
|
398
|
-
<div class="fd-product-switch__title">
|
|
399
|
-
<div class="fd-product-switch__subtitle">Central Home
|
|
488
|
+
<div class="fd-product-switch__title">SAP Start</div>
|
|
489
|
+
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
400
490
|
</div>
|
|
401
491
|
</li>
|
|
402
|
-
<li class="fd-product-switch__item
|
|
492
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="5">
|
|
403
493
|
<span
|
|
404
494
|
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
405
495
|
|
|
@@ -440,6 +530,33 @@ If there are 6 (or less) items to display, it is recommended to use the 3-column
|
|
|
440
530
|
</div>
|
|
441
531
|
```
|
|
442
532
|
|
|
533
|
+
### Two Column
|
|
534
|
+
|
|
535
|
+
When fewer than 3 items are provided, use the 2-column layout to hug the content width. Add the \
|
|
536
|
+
|
|
537
|
+
```html
|
|
538
|
+
<div class="fd-product-switch__body fd-product-switch__body--col-2">
|
|
539
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
540
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="SAP Start Central Home" aria-posinset="1" aria-setsize="2">
|
|
541
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start"></span>
|
|
542
|
+
<div class="fd-product-switch__text">
|
|
543
|
+
<div class="fd-product-switch__title">SAP Start</div>
|
|
544
|
+
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
545
|
+
</div>
|
|
546
|
+
</li>
|
|
547
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="2">
|
|
548
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Analytics Cloud">
|
|
549
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--business-objects-experience"></i>
|
|
550
|
+
</span>
|
|
551
|
+
<div class="fd-product-switch__text">
|
|
552
|
+
<div class="fd-product-switch__title">Analytics Cloud</div>
|
|
553
|
+
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
554
|
+
</div>
|
|
555
|
+
</li>
|
|
556
|
+
</ul>
|
|
557
|
+
</div>
|
|
558
|
+
```
|
|
559
|
+
|
|
443
560
|
### Small
|
|
444
561
|
|
|
445
562
|
For smaller screens (mobile), the product switch is displayed in list format. To achieve this style, add the \
|
|
@@ -447,15 +564,13 @@ For smaller screens (mobile), the product switch is displayed in list format. To
|
|
|
447
564
|
```html
|
|
448
565
|
<div class="fd-product-switch__body fd-product-switch__body--mobile">
|
|
449
566
|
<ul class="fd-product-switch__list" role="menu">
|
|
450
|
-
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="
|
|
451
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="
|
|
452
|
-
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--home"></i>
|
|
453
|
-
</span>
|
|
567
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="SAP Start Central Home" aria-posinset="1" aria-setsize="14">
|
|
568
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start"></span>
|
|
454
569
|
<div class="fd-product-switch__text">
|
|
455
|
-
<div class="fd-product-switch__title">
|
|
570
|
+
<div class="fd-product-switch__title">SAP Start</div>
|
|
456
571
|
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
457
572
|
</li>
|
|
458
|
-
<li class="fd-product-switch__item
|
|
573
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="14">
|
|
459
574
|
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start">
|
|
460
575
|
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--business-objects-experience"></i>
|
|
461
576
|
</span>
|