@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

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.
Files changed (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/examples/Components/shellbar/responsiveness.example.html CHANGED
@@ -1,634 +1,846 @@
1
1
  <div class="fd-shellbar fd-shellbar--side-nav" role="banner" aria-label="Shell Bar">
2
- <div class="fd-shellbar__group fd-shellbar__group--product">
3
- <button aria-label="Main Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
4
- <i class="sap-icon--menu2"></i>
5
- </button>
6
- <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
7
- <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" height="32" alt="SAP"></span>
2
+ <div class="fd-shellbar__group fd-shellbar__group--product">
3
+ <button
4
+ aria-label="Main Navigation"
5
+ aria-expanded="false"
6
+ class="fd-button fd-button--transparent fd-shellbar__button"
7
+ >
8
+ <i class="sap-icon--menu2"></i>
9
+ </button>
10
+ <div
11
+ class="fd-shellbar__branding"
12
+ role="link"
13
+ tabindex="0"
14
+ aria-label="SAP Corporate Portal Solution Name Home"
15
+ >
16
+ <span class="fd-shellbar__logo"
17
+ ><img
18
+ src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
19
+ srcset="
20
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
21
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
22
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
23
+ "
24
+ height="32"
25
+ alt="SAP"
26
+ /></span>
8
27
 
9
- <span class="fd-shellbar__title">Corporate Portal</span>
10
- </div>
11
- </div>
12
- <div class="fd-shellbar__group fd-shellbar__group--actions">
13
- <div class="fd-shellbar__action">
14
- <div id="JKHhjk7234k22ierw" class="fd-input-group fd-shellbar__search-field">
15
- <input
16
- aria-label="search-input"
17
- type="text"
18
- onfocus="addClass('JKHhjk7234k22ierw', 'is-focus')"
19
- onblur="removeClass('JKHhjk7234k22ierw', 'is-focus')"
20
- class="fd-input fd-input-group__input fd-shellbar__search-field-input"
21
- id="F4GcX348b1"
22
- placeholder="Search everything"
23
- />
24
- <div
25
- class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
26
- >
27
- <button
28
- aria-label="button-search"
29
- class="fd-shellbar__button fd-button fd-button--transparent"
28
+ <span class="fd-shellbar__title">Corporate Portal</span>
29
+ </div>
30
+ </div>
31
+ <div class="fd-shellbar__group fd-shellbar__group--actions">
32
+ <div class="fd-shellbar__action">
33
+ <div id="JKHhjk7234k22ierw" class="fd-input-group fd-shellbar__search-field">
34
+ <input
35
+ aria-label="search-input"
36
+ type="text"
37
+ onfocus="addClass('JKHhjk7234k22ierw', 'is-focus')"
38
+ onblur="removeClass('JKHhjk7234k22ierw', 'is-focus')"
39
+ class="fd-input fd-input-group__input fd-shellbar__search-field-input"
40
+ id="F4GcX348b1"
41
+ placeholder="Search everything"
42
+ />
43
+ <div
44
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
30
45
  >
31
- <i class="sap-icon--decline"></i>
32
- </button>
33
- </div>
34
- <div
35
- class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
36
- >
37
- <button
38
- aria-label="button-search"
39
- class="fd-shellbar__button fd-button fd-button--transparent"
46
+ <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
47
+ <i class="sap-icon--decline"></i>
48
+ </button>
49
+ </div>
50
+ <div
51
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
40
52
  >
41
- <i class="sap-icon--search"></i>
42
- </button>
43
- </div>
44
- <div class="fd-shellbar__search-field-helper"></div>
45
- </div>
46
- </div>
47
- <div class="fd-shellbar__action">
48
- <button
49
- class="fd-button fd-button--transparent fd-shellbar__button"
50
- aria-label="Joule Digital Assitant" aria-haspopup="dialog" aria-expanded="false" title="Joule Digital Assitant">
51
- <i class="sap-icon--da"></i>
52
- </button>
53
- </div>
54
- <div class="fd-shellbar__action">
55
- <button
56
- class="fd-button fd-button--transparent fd-shellbar__button"
57
- aria-label="Notifications"
58
- title="Notifications"
59
- aria-haspopup="dialog" aria-expanded="false"
60
- >
61
- <i class="sap-icon--bell"></i>
62
- <span class="fd-button__badge">72</span>
63
- </button>
64
- </div>
65
- <div class="fd-shellbar__action">
66
- <button
67
- class="fd-button fd-button--transparent fd-shellbar__button"
68
- aria-label="Feedback" aria-haspopup="dialog" aria-expanded="false" title="Feedback">
69
- <i class="sap-icon--feedback"></i>
70
- </button>
71
- </div>
72
- <div class="fd-shellbar__action">
73
- <button
74
- class="fd-button fd-button--transparent fd-shellbar__button"
75
- aria-label="Help" aria-haspopup="dialog" aria-expanded="false" title="Help">
76
- <i class="sap-icon--sys-help"></i>
77
- </button>
78
- </div>
79
- <div class="fd-shellbar__action">
80
- <div class="fd-popover fd-popover--right">
81
- <div class="fd-popover__control">
82
- <div class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
83
- onclick="onPopoverClick('MKFAY276JAD')" aria-controls="MKFAY276JAD" aria-expanded="false"
84
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="User Menu" title="User Menu">
85
- <span
86
- class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
87
- style="background-image: url('assets/images/avatars/1.svg');"
88
- aria-label="William Wallingham">
89
- </span>
90
- </div>
91
- </div>
92
- <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
93
- id="MKFAY276JAD">
94
- <nav class="fd-menu">
95
- <ul class="fd-menu__list fd-menu__list--no-shadow">
96
- <li class="fd-menu__item">
97
- <a role="button" class="fd-menu__link">
98
- <span class="fd-menu__title">Settings</span>
99
- </a>
100
- </li>
101
- <li class="fd-menu__item">
102
- <a role="button" class="fd-menu__link">
103
- <span class="fd-menu__title">Sign Out</span>
104
- </a>
105
- </li>
106
- </ul>
107
- </nav>
108
- </div>
109
- </div>
110
- </div>
111
- <div class="fd-shellbar__action">
112
- <div class="fd-product-switch">
113
- <div class="fd-popover fd-popover--right">
114
- <button
115
- class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
116
- aria-label="Product Switcher"
117
- title="Product Switcher"
118
- aria-controls="POIYRQW"
119
- aria-expanded="false"
120
- aria-haspopup="dialog"
121
- onclick="onPopoverClick('POIYRQW')">
122
- <i class="sap-icon--grid"></i>
123
- </button>
124
- <div class="fd-popover__body fd-popover__body--right" aria-hidden="true"
125
- id="POIYRQW">
126
- <div class="fd-product-switch__body">
127
- <ul class="fd-product-switch__list">
128
- <li class="fd-product-switch__item">
129
- <div class="fd-product-switch__icon sap-icon--home"></div>
130
- <div class="fd-product-switch__text">
131
- <div class="fd-product-switch__title">Home</div>
132
- <div class="fd-product-switch__subtitle">Central Home</div>
133
- </div>
134
- </li>
135
- <li class="fd-product-switch__item selected">
136
- <div
137
- class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
138
- <div class="fd-product-switch__text">
139
- <div class="fd-product-switch__title">Analytics Cloud</div>
140
- <div class="fd-product-switch__subtitle">Analytics Cloud</div>
141
- </div>
142
- </li>
143
- <li class="fd-product-switch__item">
144
- <div class="fd-product-switch__icon sap-icon--contacts"></div>
145
- <div class="fd-product-switch__text">
146
- <div class="fd-product-switch__title">Catalog</div>
147
- <div class="fd-product-switch__subtitle">Ariba</div>
148
- </div>
149
- </li>
150
- <li class="fd-product-switch__item">
151
- <div class="fd-product-switch__icon sap-icon--credit-card"></div>
152
- <div class="fd-product-switch__text">
153
- <div class="fd-product-switch__title">Guided Buying</div>
154
- </div>
155
- </li>
156
- </ul>
157
- </div>
158
- </div>
159
- </div>
160
- </div>
161
- </div>
162
- </div>
53
+ <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
54
+ <i class="sap-icon--search"></i>
55
+ </button>
56
+ </div>
57
+ <div class="fd-shellbar__search-field-helper"></div>
58
+ </div>
59
+ </div>
60
+ <div class="fd-shellbar__action">
61
+ <button
62
+ class="fd-button fd-button--transparent fd-shellbar__button"
63
+ aria-label="Joule Digital Assitant"
64
+ aria-haspopup="dialog"
65
+ aria-expanded="false"
66
+ title="Joule Digital Assitant"
67
+ >
68
+ <i class="sap-icon--da"></i>
69
+ </button>
70
+ </div>
71
+ <div class="fd-shellbar__action">
72
+ <button
73
+ class="fd-button fd-button--transparent fd-shellbar__button"
74
+ aria-label="Notifications"
75
+ title="Notifications"
76
+ aria-haspopup="dialog"
77
+ aria-expanded="false"
78
+ >
79
+ <i class="sap-icon--bell"></i>
80
+ <span class="fd-button__badge">72</span>
81
+ </button>
82
+ </div>
83
+ <div class="fd-shellbar__action">
84
+ <button
85
+ class="fd-button fd-button--transparent fd-shellbar__button"
86
+ aria-label="Feedback"
87
+ aria-haspopup="dialog"
88
+ aria-expanded="false"
89
+ title="Feedback"
90
+ >
91
+ <i class="sap-icon--feedback"></i>
92
+ </button>
93
+ </div>
94
+ <div class="fd-shellbar__action">
95
+ <button
96
+ class="fd-button fd-button--transparent fd-shellbar__button"
97
+ aria-label="Help"
98
+ aria-haspopup="dialog"
99
+ aria-expanded="false"
100
+ title="Help"
101
+ >
102
+ <i class="sap-icon--sys-help"></i>
103
+ </button>
104
+ </div>
105
+ <div class="fd-shellbar__action">
106
+ <div class="fd-popover fd-popover--right">
107
+ <div class="fd-popover__control">
108
+ <div
109
+ class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
110
+ onclick="onPopoverClick('MKFAY276JAD')"
111
+ aria-controls="MKFAY276JAD"
112
+ aria-expanded="false"
113
+ aria-haspopup="dialog"
114
+ role="button"
115
+ tabindex="0"
116
+ aria-label="User Menu"
117
+ title="User Menu"
118
+ >
119
+ <span
120
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
121
+ style="background-image: url('assets/images/avatars/1.svg')"
122
+ aria-label="William Wallingham"
123
+ >
124
+ </span>
125
+ </div>
126
+ </div>
127
+ <div
128
+ class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
129
+ aria-hidden="true"
130
+ id="MKFAY276JAD"
131
+ >
132
+ <nav class="fd-menu">
133
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
134
+ <li class="fd-menu__item">
135
+ <a role="button" class="fd-menu__link">
136
+ <span class="fd-menu__title">Settings</span>
137
+ </a>
138
+ </li>
139
+ <li class="fd-menu__item">
140
+ <a role="button" class="fd-menu__link">
141
+ <span class="fd-menu__title">Sign Out</span>
142
+ </a>
143
+ </li>
144
+ </ul>
145
+ </nav>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ <div class="fd-shellbar__action">
150
+ <div class="fd-product-switch">
151
+ <div class="fd-popover fd-popover--right">
152
+ <button
153
+ class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
154
+ aria-label="Product Switcher"
155
+ title="Product Switcher"
156
+ aria-controls="POIYRQW"
157
+ aria-expanded="false"
158
+ aria-haspopup="dialog"
159
+ onclick="onPopoverClick('POIYRQW')"
160
+ >
161
+ <i class="sap-icon--grid"></i>
162
+ </button>
163
+ <div
164
+ class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
165
+ aria-hidden="true"
166
+ id="POIYRQW"
167
+ >
168
+ <div class="fd-product-switch__body">
169
+ <ul class="fd-product-switch__list">
170
+ <li class="fd-product-switch__item">
171
+ <div class="fd-product-switch__icon sap-icon--home"></div>
172
+ <div class="fd-product-switch__text">
173
+ <div class="fd-product-switch__title">Home</div>
174
+ <div class="fd-product-switch__subtitle">Central Home</div>
175
+ </div>
176
+ </li>
177
+ <li class="fd-product-switch__item selected">
178
+ <div class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
179
+ <div class="fd-product-switch__text">
180
+ <div class="fd-product-switch__title">Analytics Cloud</div>
181
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
182
+ </div>
183
+ </li>
184
+ <li class="fd-product-switch__item">
185
+ <div class="fd-product-switch__icon sap-icon--contacts"></div>
186
+ <div class="fd-product-switch__text">
187
+ <div class="fd-product-switch__title">Catalog</div>
188
+ <div class="fd-product-switch__subtitle">Ariba</div>
189
+ </div>
190
+ </li>
191
+ <li class="fd-product-switch__item">
192
+ <div class="fd-product-switch__icon sap-icon--credit-card"></div>
193
+ <div class="fd-product-switch__text">
194
+ <div class="fd-product-switch__title">Guided Buying</div>
195
+ </div>
196
+ </li>
197
+ </ul>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
163
204
  </div>
164
205
 
165
- <br><br>
206
+ <br /><br />
166
207
 
167
- <div class="fd-shellbar fd-shellbar--side-nav" role="banner" aria-label="Shell Bar" style="max-width: 1024px;">
168
- <div class="fd-shellbar__group fd-shellbar__group--product">
169
- <button aria-label="Main Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
170
- <i class="sap-icon--menu2"></i>
171
- </button>
172
- <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
173
- <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
174
-
175
- <span class="fd-shellbar__title">Corporate Portal</span>
176
- </div>
177
- </div>
178
- <div class="fd-shellbar__group fd-shellbar__group--actions">
179
- <div class="fd-shellbar__action">
208
+ <div class="fd-shellbar fd-shellbar--side-nav" role="banner" aria-label="Shell Bar" style="max-width: 1024px">
209
+ <div class="fd-shellbar__group fd-shellbar__group--product">
180
210
  <button
181
- class="fd-button fd-button--transparent fd-shellbar__button"
182
- aria-label="Search" aria-haspopup="dialog" aria-expanded="false" title="Search">
183
- <i class="sap-icon--search"></i>
184
- </button>
185
- </div>
186
- <div class="fd-shellbar__action">
187
- <button
188
- class="fd-button fd-button--transparent fd-shellbar__button"
189
- aria-label="Joule Digital Assitant" aria-haspopup="dialog" aria-expanded="false" title="Joule Digital Assitant">
190
- <i class="sap-icon--da"></i>
191
- </button>
192
- </div>
193
- <div class="fd-shellbar__action">
194
- <button
211
+ aria-label="Main Navigation"
212
+ aria-expanded="false"
195
213
  class="fd-button fd-button--transparent fd-shellbar__button"
196
- aria-label="Notifications"
197
- title="Notifications"
198
- aria-haspopup="dialog" aria-expanded="false"
199
- >
200
- <i class="sap-icon--bell"></i>
201
- <span class="fd-button__badge">72</span>
202
- </button>
203
- </div>
204
- <div class="fd-shellbar__action">
205
- <button
206
- class="fd-button fd-button--transparent fd-shellbar__button"
207
- aria-label="Feedback" aria-haspopup="dialog" aria-expanded="false" title="Feedback">
208
- <i class="sap-icon--feedback"></i>
209
- </button>
210
- </div>
211
- <div class="fd-shellbar__action">
212
- <button
213
- class="fd-button fd-button--transparent fd-shellbar__button"
214
- aria-label="Help" aria-haspopup="dialog" aria-expanded="false" title="Help">
215
- <i class="sap-icon--sys-help"></i>
216
- </button>
217
- </div>
218
- <div class="fd-shellbar__action">
219
- <div class="fd-popover fd-popover--right">
220
- <div class="fd-popover__control">
221
- <div class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
222
- onclick="onPopoverClick('MKFAY276sdfasdf')" aria-controls="MKFAY276sdfasdf" aria-expanded="false"
223
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="User Menu" title="User Menu">
224
- <span
225
- class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
226
- style="background-image: url('assets/images/avatars/1.svg');"
227
- aria-label="William Wallingham">
228
- </span>
229
- </div>
230
- </div>
231
- <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
232
- id="MKFAY276sdfasdf">
233
- <nav class="fd-menu">
234
- <ul class="fd-menu__list fd-menu__list--no-shadow">
235
- <li class="fd-menu__item">
236
- <a role="button" class="fd-menu__link">
237
- <span class="fd-menu__title">Settings</span>
238
- </a>
239
- </li>
240
- <li class="fd-menu__item">
241
- <a role="button" class="fd-menu__link">
242
- <span class="fd-menu__title">Sign Out</span>
243
- </a>
244
- </li>
245
- </ul>
246
- </nav>
247
- </div>
248
- </div>
249
- </div>
250
- <div class="fd-shellbar__action">
251
- <div class="fd-product-switch">
252
- <div class="fd-popover fd-popover--right">
253
- <button
254
- class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
255
- aria-label="Product Switcher"
256
- title="Product Switcher"
257
- aria-controls="QWERTYI"
258
- aria-expanded="false"
259
- aria-haspopup="dialog"
260
- onclick="onPopoverClick('QWERTYI')">
261
- <i class="sap-icon--grid"></i>
262
- </button>
263
- <div class="fd-popover__body fd-popover__body--right" aria-hidden="true"
264
- id="QWERTYI">
265
- <div class="fd-product-switch__body">
266
- <ul class="fd-product-switch__list">
267
- <li class="fd-product-switch__item">
268
- <div class="fd-product-switch__icon sap-icon--home"></div>
269
- <div class="fd-product-switch__text">
270
- <div class="fd-product-switch__title">Home</div>
271
- <div class="fd-product-switch__subtitle">Central Home</div>
272
- </div>
273
- </li>
274
- <li class="fd-product-switch__item selected">
275
- <div
276
- class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
277
- <div class="fd-product-switch__text">
278
- <div class="fd-product-switch__title">Analytics Cloud</div>
279
- <div class="fd-product-switch__subtitle">Analytics Cloud</div>
280
- </div>
281
- </li>
282
- <li class="fd-product-switch__item">
283
- <div class="fd-product-switch__icon sap-icon--contacts"></div>
284
- <div class="fd-product-switch__text">
285
- <div class="fd-product-switch__title">Catalog</div>
286
- <div class="fd-product-switch__subtitle">Ariba</div>
287
- </div>
288
- </li>
289
- <li class="fd-product-switch__item">
290
- <div class="fd-product-switch__icon sap-icon--credit-card"></div>
291
- <div class="fd-product-switch__text">
292
- <div class="fd-product-switch__title">Guided Buying</div>
293
- </div>
294
- </li>
295
- </ul>
296
- </div>
297
- </div>
298
- </div>
299
- </div>
300
- </div>
301
- </div>
302
- </div>
214
+ >
215
+ <i class="sap-icon--menu2"></i>
216
+ </button>
217
+ <div
218
+ class="fd-shellbar__branding"
219
+ role="link"
220
+ tabindex="0"
221
+ aria-label="SAP Corporate Portal Solution Name Home"
222
+ >
223
+ <span class="fd-shellbar__logo"
224
+ ><img
225
+ src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
226
+ srcset="
227
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
228
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
229
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
230
+ "
231
+ width="48"
232
+ height="24"
233
+ alt="SAP"
234
+ /></span>
303
235
 
304
- <br><br>
236
+ <span class="fd-shellbar__title">Corporate Portal</span>
237
+ </div>
238
+ </div>
239
+ <div class="fd-shellbar__group fd-shellbar__group--actions">
240
+ <div class="fd-shellbar__action">
241
+ <button
242
+ class="fd-button fd-button--transparent fd-shellbar__button"
243
+ aria-label="Search"
244
+ aria-haspopup="dialog"
245
+ aria-expanded="false"
246
+ title="Search"
247
+ >
248
+ <i class="sap-icon--search"></i>
249
+ </button>
250
+ </div>
251
+ <div class="fd-shellbar__action">
252
+ <button
253
+ class="fd-button fd-button--transparent fd-shellbar__button"
254
+ aria-label="Joule Digital Assitant"
255
+ aria-haspopup="dialog"
256
+ aria-expanded="false"
257
+ title="Joule Digital Assitant"
258
+ >
259
+ <i class="sap-icon--da"></i>
260
+ </button>
261
+ </div>
262
+ <div class="fd-shellbar__action">
263
+ <button
264
+ class="fd-button fd-button--transparent fd-shellbar__button"
265
+ aria-label="Notifications"
266
+ title="Notifications"
267
+ aria-haspopup="dialog"
268
+ aria-expanded="false"
269
+ >
270
+ <i class="sap-icon--bell"></i>
271
+ <span class="fd-button__badge">72</span>
272
+ </button>
273
+ </div>
274
+ <div class="fd-shellbar__action">
275
+ <button
276
+ class="fd-button fd-button--transparent fd-shellbar__button"
277
+ aria-label="Feedback"
278
+ aria-haspopup="dialog"
279
+ aria-expanded="false"
280
+ title="Feedback"
281
+ >
282
+ <i class="sap-icon--feedback"></i>
283
+ </button>
284
+ </div>
285
+ <div class="fd-shellbar__action">
286
+ <button
287
+ class="fd-button fd-button--transparent fd-shellbar__button"
288
+ aria-label="Help"
289
+ aria-haspopup="dialog"
290
+ aria-expanded="false"
291
+ title="Help"
292
+ >
293
+ <i class="sap-icon--sys-help"></i>
294
+ </button>
295
+ </div>
296
+ <div class="fd-shellbar__action">
297
+ <div class="fd-popover fd-popover--right">
298
+ <div class="fd-popover__control">
299
+ <div
300
+ class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
301
+ onclick="onPopoverClick('MKFAY276sdfasdf')"
302
+ aria-controls="MKFAY276sdfasdf"
303
+ aria-expanded="false"
304
+ aria-haspopup="dialog"
305
+ role="button"
306
+ tabindex="0"
307
+ aria-label="User Menu"
308
+ title="User Menu"
309
+ >
310
+ <span
311
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
312
+ style="background-image: url('assets/images/avatars/1.svg')"
313
+ aria-label="William Wallingham"
314
+ >
315
+ </span>
316
+ </div>
317
+ </div>
318
+ <div
319
+ class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
320
+ aria-hidden="true"
321
+ id="MKFAY276sdfasdf"
322
+ >
323
+ <nav class="fd-menu">
324
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
325
+ <li class="fd-menu__item">
326
+ <a role="button" class="fd-menu__link">
327
+ <span class="fd-menu__title">Settings</span>
328
+ </a>
329
+ </li>
330
+ <li class="fd-menu__item">
331
+ <a role="button" class="fd-menu__link">
332
+ <span class="fd-menu__title">Sign Out</span>
333
+ </a>
334
+ </li>
335
+ </ul>
336
+ </nav>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <div class="fd-shellbar__action">
341
+ <div class="fd-product-switch">
342
+ <div class="fd-popover fd-popover--right">
343
+ <button
344
+ class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
345
+ aria-label="Product Switcher"
346
+ title="Product Switcher"
347
+ aria-controls="QWERTYI"
348
+ aria-expanded="false"
349
+ aria-haspopup="dialog"
350
+ onclick="onPopoverClick('QWERTYI')"
351
+ >
352
+ <i class="sap-icon--grid"></i>
353
+ </button>
354
+ <div
355
+ class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
356
+ aria-hidden="true"
357
+ id="QWERTYI"
358
+ >
359
+ <div class="fd-product-switch__body">
360
+ <ul class="fd-product-switch__list">
361
+ <li class="fd-product-switch__item">
362
+ <div class="fd-product-switch__icon sap-icon--home"></div>
363
+ <div class="fd-product-switch__text">
364
+ <div class="fd-product-switch__title">Home</div>
365
+ <div class="fd-product-switch__subtitle">Central Home</div>
366
+ </div>
367
+ </li>
368
+ <li class="fd-product-switch__item selected">
369
+ <div class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
370
+ <div class="fd-product-switch__text">
371
+ <div class="fd-product-switch__title">Analytics Cloud</div>
372
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
373
+ </div>
374
+ </li>
375
+ <li class="fd-product-switch__item">
376
+ <div class="fd-product-switch__icon sap-icon--contacts"></div>
377
+ <div class="fd-product-switch__text">
378
+ <div class="fd-product-switch__title">Catalog</div>
379
+ <div class="fd-product-switch__subtitle">Ariba</div>
380
+ </div>
381
+ </li>
382
+ <li class="fd-product-switch__item">
383
+ <div class="fd-product-switch__icon sap-icon--credit-card"></div>
384
+ <div class="fd-product-switch__text">
385
+ <div class="fd-product-switch__title">Guided Buying</div>
386
+ </div>
387
+ </li>
388
+ </ul>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
305
396
 
306
- <div class="fd-shellbar fd-shellbar--md fd-shellbar--side-nav" role="banner" aria-label="Shell Bar" style="max-width: 650px;">
307
- <div class="fd-shellbar__group fd-shellbar__group--product">
308
- <button aria-label="Main Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
309
- <i class="sap-icon--menu2"></i>
310
- </button>
311
- <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
312
- <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
397
+ <br /><br />
313
398
 
314
- <span class="fd-shellbar__title">Corporate Portal</span>
315
- </div>
316
- </div>
317
- <div class="fd-shellbar__group fd-shellbar__group--actions">
318
- <div class="fd-shellbar__action">
399
+ <div
400
+ class="fd-shellbar fd-shellbar--md fd-shellbar--side-nav"
401
+ role="banner"
402
+ aria-label="Shell Bar"
403
+ style="max-width: 650px"
404
+ >
405
+ <div class="fd-shellbar__group fd-shellbar__group--product">
319
406
  <button
320
- class="fd-button fd-button--transparent fd-shellbar__button"
321
- aria-label="Search" aria-haspopup="dialog" aria-expanded="false" title="Search">
322
- <i class="sap-icon--search"></i>
323
- </button>
324
- </div>
325
- <div class="fd-shellbar__action">
326
- <div class="fd-popover fd-popover--right">
327
- <div class="fd-popover__control">
328
- <div class="fd-button fd-button--transparent fd-shellbar__button is-toggled"
329
- onclick="onPopoverClick('QWTEFREQR')" aria-controls="QWTEFREQR" aria-expanded="true"
330
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="Overflow" title="Overflow">
331
- <i class="sap-icon--overflow"></i>
332
- <span class="fd-button__badge">72</span>
333
- </div>
334
- </div>
335
- <div class="fd-popover__body fd-popover__body--right" aria-hidden="false"
336
- id="QWTEFREQR">
337
- <nav class="fd-menu fd-menu--icons">
338
- <ul class="fd-menu__list fd-menu__list--no-shadow">
339
- <li class="fd-menu__item">
340
- <a role="button" class="fd-menu__link">
341
- <span class="fd-menu__addon-before"><i class="sap-icon--bell" role="presentation"></i></span>
342
- <span class="fd-menu__title">Notifications</span>
343
- </a>
344
- </li>
345
- <li class="fd-menu__item">
346
- <a role="button" class="fd-menu__link">
347
- <span class="fd-menu__addon-before"><i class="sap-icon--feedback" role="presentation"></i></span>
348
- <span class="fd-menu__title">Feedback</span>
349
- </a>
350
- </li>
351
- <li class="fd-menu__item">
352
- <a role="button" class="fd-menu__link">
353
- <span class="fd-menu__addon-before"><i class="sap-icon--sys-help" role="presentation"></i></span>
354
- <span class="fd-menu__title">Help</span>
355
- </a>
356
- </li>
357
- </ul>
358
- </nav>
359
- </div>
360
- </div>
361
- </div>
362
- <div class="fd-shellbar__action">
363
- <div class="fd-popover fd-popover--right">
364
- <div class="fd-popover__control">
365
- <div class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
366
- onclick="onPopoverClick('YUTTYAY276')" aria-controls="YUTTYAY276" aria-expanded="false"
367
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="User Menu" title="User Menu">
368
- <span
369
- class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
370
- style="background-image: url('assets/images/avatars/1.svg');"
371
- aria-label="William Wallingham">
372
- </span>
373
- </div>
374
- </div>
375
- <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
376
- id="YUTTYAY276">
377
- <nav class="fd-menu">
378
- <ul class="fd-menu__list fd-menu__list--no-shadow">
379
- <li class="fd-menu__item">
380
- <a role="button" class="fd-menu__link">
381
- <span class="fd-menu__title">Settings</span>
382
- </a>
383
- </li>
384
- <li class="fd-menu__item">
385
- <a role="button" class="fd-menu__link">
386
- <span class="fd-menu__title">Sign Out</span>
387
- </a>
388
- </li>
389
- </ul>
390
- </nav>
391
- </div>
392
- </div>
393
- </div>
394
- <div class="fd-shellbar__action">
395
- <div class="fd-product-switch">
396
- <div class="fd-popover fd-popover--right">
397
- <button
398
- class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
399
- aria-label="Product Switcher"
400
- title="Product Switcher"
401
- aria-controls="NHYUJM,KI"
402
- aria-expanded="false"
403
- aria-haspopup="dialog"
404
- onclick="onPopoverClick('NHYUJM,KI')">
405
- <i class="sap-icon--grid"></i>
406
- </button>
407
- <div class="fd-popover__body fd-popover__body--right" aria-hidden="true"
408
- id="NHYUJM,KI">
409
- <div class="fd-product-switch__body">
410
- <ul class="fd-product-switch__list">
411
- <li class="fd-product-switch__item">
412
- <div class="fd-product-switch__icon sap-icon--home"></div>
413
- <div class="fd-product-switch__text">
414
- <div class="fd-product-switch__title">Home</div>
415
- <div class="fd-product-switch__subtitle">Central Home</div>
416
- </div>
417
- </li>
418
- <li class="fd-product-switch__item selected">
419
- <div
420
- class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
421
- <div class="fd-product-switch__text">
422
- <div class="fd-product-switch__title">Analytics Cloud</div>
423
- <div class="fd-product-switch__subtitle">Analytics Cloud</div>
424
- </div>
425
- </li>
426
- <li class="fd-product-switch__item">
427
- <div class="fd-product-switch__icon sap-icon--contacts"></div>
428
- <div class="fd-product-switch__text">
429
- <div class="fd-product-switch__title">Catalog</div>
430
- <div class="fd-product-switch__subtitle">Ariba</div>
431
- </div>
432
- </li>
433
- <li class="fd-product-switch__item">
434
- <div class="fd-product-switch__icon sap-icon--credit-card"></div>
435
- <div class="fd-product-switch__text">
436
- <div class="fd-product-switch__title">Guided Buying</div>
437
- </div>
438
- </li>
439
- </ul>
440
- </div>
441
- </div>
442
- </div>
443
- </div>
444
- </div>
445
- </div>
407
+ aria-label="Main Navigation"
408
+ aria-expanded="false"
409
+ class="fd-button fd-button--transparent fd-shellbar__button"
410
+ >
411
+ <i class="sap-icon--menu2"></i>
412
+ </button>
413
+ <div
414
+ class="fd-shellbar__branding"
415
+ role="link"
416
+ tabindex="0"
417
+ aria-label="SAP Corporate Portal Solution Name Home"
418
+ >
419
+ <span class="fd-shellbar__logo"
420
+ ><img
421
+ src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
422
+ srcset="
423
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
424
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
425
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
426
+ "
427
+ width="48"
428
+ height="24"
429
+ alt="SAP"
430
+ /></span>
431
+
432
+ <span class="fd-shellbar__title">Corporate Portal</span>
433
+ </div>
434
+ </div>
435
+ <div class="fd-shellbar__group fd-shellbar__group--actions">
436
+ <div class="fd-shellbar__action">
437
+ <button
438
+ class="fd-button fd-button--transparent fd-shellbar__button"
439
+ aria-label="Search"
440
+ aria-haspopup="dialog"
441
+ aria-expanded="false"
442
+ title="Search"
443
+ >
444
+ <i class="sap-icon--search"></i>
445
+ </button>
446
+ </div>
447
+ <div class="fd-shellbar__action">
448
+ <div class="fd-popover fd-popover--right">
449
+ <div class="fd-popover__control">
450
+ <div
451
+ class="fd-button fd-button--transparent fd-shellbar__button is-toggled"
452
+ onclick="onPopoverClick('QWTEFREQR')"
453
+ aria-controls="QWTEFREQR"
454
+ aria-expanded="true"
455
+ aria-haspopup="dialog"
456
+ role="button"
457
+ tabindex="0"
458
+ aria-label="Overflow"
459
+ title="Overflow"
460
+ >
461
+ <i class="sap-icon--overflow"></i>
462
+ <span class="fd-button__badge">72</span>
463
+ </div>
464
+ </div>
465
+ <div
466
+ class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
467
+ aria-hidden="false"
468
+ id="QWTEFREQR"
469
+ >
470
+ <nav class="fd-menu fd-menu--icons">
471
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
472
+ <li class="fd-menu__item">
473
+ <a role="button" class="fd-menu__link">
474
+ <span class="fd-menu__addon-before"
475
+ ><i class="sap-icon--bell" role="presentation"></i
476
+ ></span>
477
+ <span class="fd-menu__title">Notifications</span>
478
+ </a>
479
+ </li>
480
+ <li class="fd-menu__item">
481
+ <a role="button" class="fd-menu__link">
482
+ <span class="fd-menu__addon-before"
483
+ ><i class="sap-icon--feedback" role="presentation"></i
484
+ ></span>
485
+ <span class="fd-menu__title">Feedback</span>
486
+ </a>
487
+ </li>
488
+ <li class="fd-menu__item">
489
+ <a role="button" class="fd-menu__link">
490
+ <span class="fd-menu__addon-before"
491
+ ><i class="sap-icon--sys-help" role="presentation"></i
492
+ ></span>
493
+ <span class="fd-menu__title">Help</span>
494
+ </a>
495
+ </li>
496
+ </ul>
497
+ </nav>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ <div class="fd-shellbar__action">
502
+ <div class="fd-popover fd-popover--right">
503
+ <div class="fd-popover__control">
504
+ <div
505
+ class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
506
+ onclick="onPopoverClick('YUTTYAY276')"
507
+ aria-controls="YUTTYAY276"
508
+ aria-expanded="false"
509
+ aria-haspopup="dialog"
510
+ role="button"
511
+ tabindex="0"
512
+ aria-label="User Menu"
513
+ title="User Menu"
514
+ >
515
+ <span
516
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
517
+ style="background-image: url('assets/images/avatars/1.svg')"
518
+ aria-label="William Wallingham"
519
+ >
520
+ </span>
521
+ </div>
522
+ </div>
523
+ <div
524
+ class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
525
+ aria-hidden="true"
526
+ id="YUTTYAY276"
527
+ >
528
+ <nav class="fd-menu">
529
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
530
+ <li class="fd-menu__item">
531
+ <a role="button" class="fd-menu__link">
532
+ <span class="fd-menu__title">Settings</span>
533
+ </a>
534
+ </li>
535
+ <li class="fd-menu__item">
536
+ <a role="button" class="fd-menu__link">
537
+ <span class="fd-menu__title">Sign Out</span>
538
+ </a>
539
+ </li>
540
+ </ul>
541
+ </nav>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ <div class="fd-shellbar__action">
546
+ <div class="fd-product-switch">
547
+ <div class="fd-popover fd-popover--right">
548
+ <button
549
+ class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
550
+ aria-label="Product Switcher"
551
+ title="Product Switcher"
552
+ aria-controls="NHYUJM,KI"
553
+ aria-expanded="false"
554
+ aria-haspopup="dialog"
555
+ onclick="onPopoverClick('NHYUJM,KI')"
556
+ >
557
+ <i class="sap-icon--grid"></i>
558
+ </button>
559
+ <div
560
+ class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
561
+ aria-hidden="true"
562
+ id="NHYUJM,KI"
563
+ >
564
+ <div class="fd-product-switch__body">
565
+ <ul class="fd-product-switch__list">
566
+ <li class="fd-product-switch__item">
567
+ <div class="fd-product-switch__icon sap-icon--home"></div>
568
+ <div class="fd-product-switch__text">
569
+ <div class="fd-product-switch__title">Home</div>
570
+ <div class="fd-product-switch__subtitle">Central Home</div>
571
+ </div>
572
+ </li>
573
+ <li class="fd-product-switch__item selected">
574
+ <div class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
575
+ <div class="fd-product-switch__text">
576
+ <div class="fd-product-switch__title">Analytics Cloud</div>
577
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
578
+ </div>
579
+ </li>
580
+ <li class="fd-product-switch__item">
581
+ <div class="fd-product-switch__icon sap-icon--contacts"></div>
582
+ <div class="fd-product-switch__text">
583
+ <div class="fd-product-switch__title">Catalog</div>
584
+ <div class="fd-product-switch__subtitle">Ariba</div>
585
+ </div>
586
+ </li>
587
+ <li class="fd-product-switch__item">
588
+ <div class="fd-product-switch__icon sap-icon--credit-card"></div>
589
+ <div class="fd-product-switch__text">
590
+ <div class="fd-product-switch__title">Guided Buying</div>
591
+ </div>
592
+ </li>
593
+ </ul>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
446
600
  </div>
447
601
 
448
- <div style="height: 250px;"></div>
602
+ <div style="height: 250px"></div>
449
603
 
450
- <div class="fd-shellbar fd-shellbar--sm fd-shellbar--side-nav" role="banner" aria-label="Shell Bar" style="max-width: 550px;">
451
- <div class="fd-shellbar__group fd-shellbar__group--product">
452
- <button aria-label="Main Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
453
- <i class="sap-icon--menu2"></i>
454
- </button>
455
- <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
456
- <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
604
+ <div
605
+ class="fd-shellbar fd-shellbar--sm fd-shellbar--side-nav"
606
+ role="banner"
607
+ aria-label="Shell Bar"
608
+ style="max-width: 550px"
609
+ >
610
+ <div class="fd-shellbar__group fd-shellbar__group--product">
611
+ <button
612
+ aria-label="Main Navigation"
613
+ aria-expanded="false"
614
+ class="fd-button fd-button--transparent fd-shellbar__button"
615
+ >
616
+ <i class="sap-icon--menu2"></i>
617
+ </button>
618
+ <div
619
+ class="fd-shellbar__branding"
620
+ role="link"
621
+ tabindex="0"
622
+ aria-label="SAP Corporate Portal Solution Name Home"
623
+ >
624
+ <span class="fd-shellbar__logo"
625
+ ><img
626
+ src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
627
+ srcset="
628
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
629
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
630
+ //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
631
+ "
632
+ width="48"
633
+ height="24"
634
+ alt="SAP"
635
+ /></span>
457
636
 
458
- <span class="fd-shellbar__title">Corporate Portal</span>
459
- </div>
460
- </div>
461
- <div class="fd-shellbar__group fd-shellbar__group--actions">
462
- <div class="fd-shellbar__action">
463
- <div class="fd-popover fd-popover--right">
464
- <div class="fd-popover__control">
465
- <div class="fd-button fd-button--transparent fd-shellbar__button is-toggled"
466
- onclick="onPopoverClick('POWERRT')" aria-controls="POWERRT" aria-expanded="true"
467
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="Overflow" title="Overflow">
468
- <i class="sap-icon--overflow"></i>
469
- <span class="fd-button__badge">72</span>
470
- </div>
471
- </div>
472
- <div class="fd-popover__body fd-popover__body--right" aria-hidden="false"
473
- id="POWERRT">
474
- <nav class="fd-menu fd-menu--icons">
475
- <ul class="fd-menu__list fd-menu__list--no-shadow">
476
- <li class="fd-menu__item">
477
- <a role="button" class="fd-menu__link">
478
- <span class="fd-menu__addon-before"><i class="sap-icon--search" role="presentation"></i></span>
479
- <span class="fd-menu__title">Search</span>
480
- </a>
481
- </li>
482
- <li class="fd-menu__item">
483
- <a role="button" class="fd-menu__link">
484
- <span class="fd-menu__addon-before"><i class="sap-icon--bell" role="presentation"></i></span>
485
- <span class="fd-menu__title">Notifications</span>
486
- </a>
487
- </li>
488
- <li class="fd-menu__item">
489
- <a role="button" class="fd-menu__link">
490
- <span class="fd-menu__addon-before"><i class="sap-icon--feedback" role="presentation"></i></span>
491
- <span class="fd-menu__title">Feedback</span>
492
- </a>
493
- </li>
494
- <li class="fd-menu__item">
495
- <a role="button" class="fd-menu__link">
496
- <span class="fd-menu__addon-before"><i class="sap-icon--sys-help" role="presentation"></i></span>
497
- <span class="fd-menu__title">Help</span>
498
- </a>
499
- </li>
500
- </ul>
501
- </nav>
502
- </div>
503
- </div>
504
- </div>
505
- <div class="fd-shellbar__action">
506
- <div class="fd-popover fd-popover--right">
507
- <div class="fd-popover__control">
508
- <div class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
509
- onclick="onPopoverClick('YWURFYWER')" aria-controls="YWURFYWER" aria-expanded="false"
510
- aria-haspopup="dialog" role="button" tabindex="0" aria-label="User Menu" title="User Menu">
511
- <span
512
- class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
513
- style="background-image: url('assets/images/avatars/1.svg');"
514
- aria-label="William Wallingham">
515
- </span>
516
- </div>
517
- </div>
518
- <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
519
- id="YWURFYWER">
520
- <nav class="fd-menu">
521
- <ul class="fd-menu__list fd-menu__list--no-shadow">
522
- <li class="fd-menu__item">
523
- <a role="button" class="fd-menu__link">
524
- <span class="fd-menu__title">Settings</span>
525
- </a>
526
- </li>
527
- <li class="fd-menu__item">
528
- <a role="button" class="fd-menu__link">
529
- <span class="fd-menu__title">Sign Out</span>
530
- </a>
531
- </li>
532
- </ul>
533
- </nav>
534
- </div>
535
- </div>
536
- </div>
537
- <div class="fd-shellbar__action">
538
- <div class="fd-product-switch">
539
- <div class="fd-popover fd-popover--right">
540
- <button
541
- class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
542
- aria-label="Product Switcher"
543
- title="Product Switcher"
544
- aria-controls="CVSNZCVSDCUY"
545
- aria-expanded="false"
546
- aria-haspopup="dialog"
547
- onclick="onPopoverClick('CVSNZCVSDCUY')">
548
- <i class="sap-icon--grid"></i>
549
- </button>
550
- <div class="fd-popover__body fd-popover__body--right" aria-hidden="true"
551
- id="CVSNZCVSDCUY">
552
- <div class="fd-product-switch__body">
553
- <ul class="fd-product-switch__list">
554
- <li class="fd-product-switch__item">
555
- <div class="fd-product-switch__icon sap-icon--home"></div>
556
- <div class="fd-product-switch__text">
557
- <div class="fd-product-switch__title">Home</div>
558
- <div class="fd-product-switch__subtitle">Central Home</div>
559
- </div>
560
- </li>
561
- <li class="fd-product-switch__item selected">
562
- <div
563
- class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
564
- <div class="fd-product-switch__text">
565
- <div class="fd-product-switch__title">Analytics Cloud</div>
566
- <div class="fd-product-switch__subtitle">Analytics Cloud</div>
567
- </div>
568
- </li>
569
- <li class="fd-product-switch__item">
570
- <div class="fd-product-switch__icon sap-icon--contacts"></div>
571
- <div class="fd-product-switch__text">
572
- <div class="fd-product-switch__title">Catalog</div>
573
- <div class="fd-product-switch__subtitle">Ariba</div>
574
- </div>
575
- </li>
576
- <li class="fd-product-switch__item">
577
- <div class="fd-product-switch__icon sap-icon--credit-card"></div>
578
- <div class="fd-product-switch__text">
579
- <div class="fd-product-switch__title">Guided Buying</div>
580
- </div>
581
- </li>
582
- </ul>
583
- </div>
584
- </div>
585
- </div>
586
- </div>
587
- </div>
588
- </div>
637
+ <span class="fd-shellbar__title">Corporate Portal</span>
638
+ </div>
639
+ </div>
640
+ <div class="fd-shellbar__group fd-shellbar__group--actions">
641
+ <div class="fd-shellbar__action">
642
+ <div class="fd-popover fd-popover--right">
643
+ <div class="fd-popover__control">
644
+ <div
645
+ class="fd-button fd-button--transparent fd-shellbar__button is-toggled"
646
+ onclick="onPopoverClick('POWERRT')"
647
+ aria-controls="POWERRT"
648
+ aria-expanded="true"
649
+ aria-haspopup="dialog"
650
+ role="button"
651
+ tabindex="0"
652
+ aria-label="Overflow"
653
+ title="Overflow"
654
+ >
655
+ <i class="sap-icon--overflow"></i>
656
+ <span class="fd-button__badge">72</span>
657
+ </div>
658
+ </div>
659
+ <div
660
+ class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
661
+ aria-hidden="false"
662
+ id="POWERRT"
663
+ >
664
+ <nav class="fd-menu fd-menu--icons">
665
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
666
+ <li class="fd-menu__item">
667
+ <a role="button" class="fd-menu__link">
668
+ <span class="fd-menu__addon-before"
669
+ ><i class="sap-icon--search" role="presentation"></i
670
+ ></span>
671
+ <span class="fd-menu__title">Search</span>
672
+ </a>
673
+ </li>
674
+ <li class="fd-menu__item">
675
+ <a role="button" class="fd-menu__link">
676
+ <span class="fd-menu__addon-before"
677
+ ><i class="sap-icon--bell" role="presentation"></i
678
+ ></span>
679
+ <span class="fd-menu__title">Notifications</span>
680
+ </a>
681
+ </li>
682
+ <li class="fd-menu__item">
683
+ <a role="button" class="fd-menu__link">
684
+ <span class="fd-menu__addon-before"
685
+ ><i class="sap-icon--feedback" role="presentation"></i
686
+ ></span>
687
+ <span class="fd-menu__title">Feedback</span>
688
+ </a>
689
+ </li>
690
+ <li class="fd-menu__item">
691
+ <a role="button" class="fd-menu__link">
692
+ <span class="fd-menu__addon-before"
693
+ ><i class="sap-icon--sys-help" role="presentation"></i
694
+ ></span>
695
+ <span class="fd-menu__title">Help</span>
696
+ </a>
697
+ </li>
698
+ </ul>
699
+ </nav>
700
+ </div>
701
+ </div>
702
+ </div>
703
+ <div class="fd-shellbar__action">
704
+ <div class="fd-popover fd-popover--right">
705
+ <div class="fd-popover__control">
706
+ <div
707
+ class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
708
+ onclick="onPopoverClick('YWURFYWER')"
709
+ aria-controls="YWURFYWER"
710
+ aria-expanded="false"
711
+ aria-haspopup="dialog"
712
+ role="button"
713
+ tabindex="0"
714
+ aria-label="User Menu"
715
+ title="User Menu"
716
+ >
717
+ <span
718
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
719
+ style="background-image: url('assets/images/avatars/1.svg')"
720
+ aria-label="William Wallingham"
721
+ >
722
+ </span>
723
+ </div>
724
+ </div>
725
+ <div
726
+ class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
727
+ aria-hidden="true"
728
+ id="YWURFYWER"
729
+ >
730
+ <nav class="fd-menu">
731
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
732
+ <li class="fd-menu__item">
733
+ <a role="button" class="fd-menu__link">
734
+ <span class="fd-menu__title">Settings</span>
735
+ </a>
736
+ </li>
737
+ <li class="fd-menu__item">
738
+ <a role="button" class="fd-menu__link">
739
+ <span class="fd-menu__title">Sign Out</span>
740
+ </a>
741
+ </li>
742
+ </ul>
743
+ </nav>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ <div class="fd-shellbar__action">
748
+ <div class="fd-product-switch">
749
+ <div class="fd-popover fd-popover--right">
750
+ <button
751
+ class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
752
+ aria-label="Product Switcher"
753
+ title="Product Switcher"
754
+ aria-controls="CVSNZCVSDCUY"
755
+ aria-expanded="false"
756
+ aria-haspopup="dialog"
757
+ onclick="onPopoverClick('CVSNZCVSDCUY')"
758
+ >
759
+ <i class="sap-icon--grid"></i>
760
+ </button>
761
+ <div
762
+ class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
763
+ aria-hidden="true"
764
+ id="CVSNZCVSDCUY"
765
+ >
766
+ <div class="fd-product-switch__body">
767
+ <ul class="fd-product-switch__list">
768
+ <li class="fd-product-switch__item">
769
+ <div class="fd-product-switch__icon sap-icon--home"></div>
770
+ <div class="fd-product-switch__text">
771
+ <div class="fd-product-switch__title">Home</div>
772
+ <div class="fd-product-switch__subtitle">Central Home</div>
773
+ </div>
774
+ </li>
775
+ <li class="fd-product-switch__item selected">
776
+ <div class="fd-product-switch__icon sap-icon--business-objects-experience"></div>
777
+ <div class="fd-product-switch__text">
778
+ <div class="fd-product-switch__title">Analytics Cloud</div>
779
+ <div class="fd-product-switch__subtitle">Analytics Cloud</div>
780
+ </div>
781
+ </li>
782
+ <li class="fd-product-switch__item">
783
+ <div class="fd-product-switch__icon sap-icon--contacts"></div>
784
+ <div class="fd-product-switch__text">
785
+ <div class="fd-product-switch__title">Catalog</div>
786
+ <div class="fd-product-switch__subtitle">Ariba</div>
787
+ </div>
788
+ </li>
789
+ <li class="fd-product-switch__item">
790
+ <div class="fd-product-switch__icon sap-icon--credit-card"></div>
791
+ <div class="fd-product-switch__text">
792
+ <div class="fd-product-switch__title">Guided Buying</div>
793
+ </div>
794
+ </li>
795
+ </ul>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </div>
589
802
  </div>
590
803
 
591
- <div style="height: 250px;"></div>
592
- <div class="fd-shellbar fd-shellbar--sm fd-shellbar--side-nav" role="banner" aria-label="Shell Bar" style="max-width: 550px;">
593
- <div class="fd-shellbar__group fd-shellbar__group--actions fd-shellbar__group--full-width">
594
- <div class="fd-shellbar__action">
595
- <div id="JKHhjk7234k22" class="fd-input-group fd-shellbar__search-field">
596
- <input
597
- aria-label="search-input"
598
- type="text"
599
- onfocus="addClass('JKHhjk7234k22', 'is-focus')"
600
- onblur="removeClass('JKHhjk7234k22', 'is-focus')"
601
- class="fd-input fd-input-group__input fd-shellbar__search-field-input"
602
- id="F4GcX348b1hbd"
603
- placeholder="Search everything"
604
- />
605
- <div
606
- class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
607
- >
608
- <button
609
- aria-label="button-search"
610
- class="fd-shellbar__button fd-button fd-button--transparent"
611
- >
612
- <i class="sap-icon--decline"></i>
613
- </button>
614
- </div>
615
- <div
616
- class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
617
- >
618
- <button
619
- aria-label="button-search"
620
- class="fd-shellbar__button fd-button fd-button--transparent"
621
- >
622
- <i class="sap-icon--search"></i>
804
+ <div style="height: 250px"></div>
805
+ <div
806
+ class="fd-shellbar fd-shellbar--sm fd-shellbar--side-nav"
807
+ role="banner"
808
+ aria-label="Shell Bar"
809
+ style="max-width: 550px"
810
+ >
811
+ <div class="fd-shellbar__group fd-shellbar__group--actions fd-shellbar__group--full-width">
812
+ <div class="fd-shellbar__action">
813
+ <div id="JKHhjk7234k22" class="fd-input-group fd-shellbar__search-field">
814
+ <input
815
+ aria-label="search-input"
816
+ type="text"
817
+ onfocus="addClass('JKHhjk7234k22', 'is-focus')"
818
+ onblur="removeClass('JKHhjk7234k22', 'is-focus')"
819
+ class="fd-input fd-input-group__input fd-shellbar__search-field-input"
820
+ id="F4GcX348b1hbd"
821
+ placeholder="Search everything"
822
+ />
823
+ <div
824
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
825
+ >
826
+ <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
827
+ <i class="sap-icon--decline"></i>
828
+ </button>
829
+ </div>
830
+ <div
831
+ class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
832
+ >
833
+ <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
834
+ <i class="sap-icon--search"></i>
835
+ </button>
836
+ </div>
837
+ <div class="fd-shellbar__search-field-helper"></div>
838
+ </div>
839
+ </div>
840
+ <div class="fd-shellbar__action">
841
+ <button class="fd-button fd-button--transparent fd-shellbar__button">
842
+ <span class="fd-button__text">Cancel</span>
623
843
  </button>
624
- </div>
625
- <div class="fd-shellbar__search-field-helper"></div>
626
- </div>
627
- </div>
628
- <div class="fd-shellbar__action">
629
- <button class="fd-button fd-button--transparent fd-shellbar__button">
630
- <span class="fd-button__text">Cancel</span>
631
- </button>
632
- </div>
633
- </div>
844
+ </div>
845
+ </div>
634
846
  </div>