@ui5/webcomponents 1.9.3 → 1.9.4

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 (207) hide show
  1. package/.dev-server-port +1 -0
  2. package/CHANGELOG.md +11 -0
  3. package/LICENSE.txt +201 -0
  4. package/dist/AvatarGroup.js +2 -19
  5. package/dist/assets/test/pages/72override.html.dda35518.css +1 -0
  6. package/dist/assets/test/pages/AnimanitionOff.html.b7566ecc.css +1 -0
  7. package/dist/assets/test/pages/Avatar.html.62cc0573.css +1 -0
  8. package/dist/assets/test/pages/AvatarGroup.html.20647fe1.css +1 -0
  9. package/dist/assets/test/pages/Badge.html.bcc1c9a3.css +1 -0
  10. package/dist/assets/test/pages/Breadcrumbs.html.5753069f.css +1 -0
  11. package/dist/assets/test/pages/BusyIndicator.html.ce95c23c.css +1 -0
  12. package/dist/assets/test/pages/Button.html.957848f0.css +1 -0
  13. package/dist/assets/test/pages/Calendar.html.9ff42e30.css +1 -0
  14. package/dist/assets/test/pages/Card.html.8c5e4756.css +1 -0
  15. package/dist/assets/test/pages/Carousel.html.fcdd32a7.css +1 -0
  16. package/dist/assets/test/pages/CheckBox.html.08ae630d.css +1 -0
  17. package/dist/assets/test/pages/ColorPalette.html.8c4c4ca3.css +1 -0
  18. package/dist/assets/test/pages/ColorPalettePopover.html.727f90e2.css +1 -0
  19. package/dist/assets/test/pages/ColorPicker.html.cc0c0d29.css +1 -0
  20. package/dist/assets/test/pages/ComboBox.html.14fbc3aa.css +1 -0
  21. package/dist/assets/test/pages/ComboBox.html.2c2a9927.js +1 -0
  22. package/dist/assets/test/pages/Components.html.b41617c5.css +1 -0
  23. package/dist/assets/test/pages/CoreControls.html.dabd050c.css +1 -0
  24. package/dist/assets/test/pages/CoreControls_exp.html.46ab2dc9.css +1 -0
  25. package/dist/assets/test/pages/CustomCSS.html.4d6e9b1f.css +1 -0
  26. package/dist/assets/test/pages/DatePicker.html.e667d0b8.css +1 -0
  27. package/dist/assets/test/pages/DatePicker_test_page.html.882ab55e.css +1 -0
  28. package/dist/assets/test/pages/DateRangePicker.html.1b5072fd.css +1 -0
  29. package/dist/assets/test/pages/DateTimePicker.html.eff0e2e0.css +1 -0
  30. package/dist/assets/test/pages/DayPicker.html.5700622a.css +1 -0
  31. package/dist/assets/test/pages/Dialog.html.329cb1dc.css +1 -0
  32. package/dist/assets/test/pages/DialogLifecycle.html.e4ac6ba2.css +1 -0
  33. package/dist/assets/test/pages/DialogSemantic.html.f61ec13d.css +1 -0
  34. package/dist/assets/test/pages/DurationPicker.html.92ecf486.css +1 -0
  35. package/dist/assets/test/pages/Eventing.html.cd934528.css +1 -0
  36. package/dist/assets/test/pages/FileUploader.html.30b8cbbd.css +1 -0
  37. package/dist/assets/test/pages/FormSupport.html.4e02207b.css +1 -0
  38. package/dist/assets/test/pages/HCB.html.d458990b.css +1 -0
  39. package/dist/assets/test/pages/Icon.html.87536fdd.js +1 -0
  40. package/dist/assets/test/pages/Icon.html.be3b1acc.css +1 -0
  41. package/dist/assets/test/pages/Input.html.85ce57b4.css +1 -0
  42. package/dist/assets/test/pages/Input_quickview.html.86df3de3.css +1 -0
  43. package/dist/assets/test/pages/InputsAlignment.html.5c5593c2.css +1 -0
  44. package/dist/assets/test/pages/ItemNavigation.html.f5758aae.css +1 -0
  45. package/dist/assets/test/pages/Kitchen.html.d0d90fc6.css +1 -0
  46. package/dist/assets/test/pages/Kitchen.openui5.html.910e3d52.css +1 -0
  47. package/dist/assets/test/pages/Label.html.7c2bcd8f.js +4 -0
  48. package/dist/assets/test/pages/Label.html.e994dc8e.css +1 -0
  49. package/dist/assets/test/pages/Link.html.d4c480d9.css +1 -0
  50. package/dist/assets/test/pages/List.html.65a3c4b3.css +1 -0
  51. package/dist/assets/test/pages/ListGrowing_Button.html.49bbaf80.css +1 -0
  52. package/dist/assets/test/pages/ListGrowing_Scroll.html.841dd1ed.css +1 -0
  53. package/dist/assets/test/pages/List_keyboard_support.html.a7297baf.css +1 -0
  54. package/dist/assets/test/pages/List_test_page.html.356d4e16.css +1 -0
  55. package/dist/assets/test/pages/LitKeyFunction.html.f3f9d649.css +1 -0
  56. package/dist/assets/test/pages/MemoryLeak.html.35d77e5e.css +1 -0
  57. package/dist/assets/test/pages/Menu.html.a758a26d.css +1 -0
  58. package/dist/assets/test/pages/MessagePage.html.30ffc162.css +1 -0
  59. package/dist/assets/test/pages/MessageStrip.html.8c2c85d5.css +1 -0
  60. package/dist/assets/test/pages/MultiComboBox.html.f06e18eb.css +1 -0
  61. package/dist/assets/test/pages/MultiInput.html.1c75cdc2.css +1 -0
  62. package/dist/assets/test/pages/MultiInput_Suggestions.html.79cd0348.css +1 -0
  63. package/dist/assets/test/pages/OpenUI5.html.cf1daa05.css +1 -0
  64. package/dist/assets/test/pages/Panel.html.399730d1.css +1 -0
  65. package/dist/assets/test/pages/Popover.html.87315ecf.css +1 -0
  66. package/dist/assets/test/pages/PopoverArrowBounds.html.c1e5feb1.css +1 -0
  67. package/dist/assets/test/pages/Popups.html.80f57dca.js +1 -0
  68. package/dist/assets/test/pages/Popups.html.bb021765.css +1 -0
  69. package/dist/assets/test/pages/ProgressIndicator.html.d61b0c53.css +1 -0
  70. package/dist/assets/test/pages/RTL.html.dbeca857.css +1 -0
  71. package/dist/assets/test/pages/RadioButton.html.ccfd1850.css +1 -0
  72. package/dist/assets/test/pages/RangeSlider.html.437a9174.css +1 -0
  73. package/dist/assets/test/pages/RatingIndicator.html.737cd73b.css +1 -0
  74. package/dist/assets/test/pages/ResizeHandler.html.ed7c5d20.css +1 -0
  75. package/dist/assets/test/pages/ResponsivePopover.html.6f67ae07.css +1 -0
  76. package/dist/assets/test/pages/SegmentedButton.html.8678479b.css +1 -0
  77. package/dist/assets/test/pages/Select.html.9c98a470.css +1 -0
  78. package/dist/assets/test/pages/Simple.html.8f2ddb30.css +1 -0
  79. package/dist/assets/test/pages/Slider.html.8ea10965.css +1 -0
  80. package/dist/assets/test/pages/SplitButton.html.5c992973.css +1 -0
  81. package/dist/assets/test/pages/StepInput.html.f22c112d.css +1 -0
  82. package/dist/assets/test/pages/Switch.html.a4f3262f.css +1 -0
  83. package/dist/assets/test/pages/TabContainer.html.7f2ade15.css +1 -0
  84. package/dist/assets/test/pages/Table-perf-pure.html.fce52e4b.css +1 -0
  85. package/dist/assets/test/pages/Table-perf.html.88634378.css +1 -0
  86. package/dist/assets/test/pages/Table.html.c43386f4.css +1 -0
  87. package/dist/assets/test/pages/Table2.html.aca0c111.css +1 -0
  88. package/dist/assets/test/pages/TableAllPopin.html.ad586de4.css +1 -0
  89. package/dist/assets/test/pages/TableCustomStyling.html.a85167d6.css +1 -0
  90. package/dist/assets/test/pages/TableGrouping.html.602ae2ad.css +1 -0
  91. package/dist/assets/test/pages/TableGrowingWithButton.html.5a39b2bf.css +1 -0
  92. package/dist/assets/test/pages/TableGrowingWithScroll.html.8ef93d31.css +1 -0
  93. package/dist/assets/test/pages/TableSelection.html.dba2d678.css +1 -0
  94. package/dist/assets/test/pages/TextArea.html.f8e10fd6.css +1 -0
  95. package/dist/assets/test/pages/TimePicker.html.9a4bb300.css +1 -0
  96. package/dist/assets/test/pages/TimeSelection.html.8ad57759.css +1 -0
  97. package/dist/assets/test/pages/Title.html.7bb51811.css +1 -0
  98. package/dist/assets/test/pages/Toast.html.47a93be2.css +1 -0
  99. package/dist/assets/test/pages/ToggleButton.html.3b7dbb8c.css +1 -0
  100. package/dist/assets/test/pages/Tree.html.74fe2a1d.css +1 -0
  101. package/dist/assets/test/pages/WheelSlider_Test_Page.html.8a9a5e49.css +1 -0
  102. package/dist/assets/test/pages/form.html.f0f82118.css +1 -0
  103. package/dist/assets/test/pages/i18n-defaultLang.html.b9d79c6b.css +1 -0
  104. package/dist/assets/test/pages/i18n-demo.html.c6751b5c.css +1 -0
  105. package/dist/test/pages/72override.html +33 -0
  106. package/dist/test/pages/AnimanitionOff.html +52 -0
  107. package/dist/test/pages/Avatar.html +265 -0
  108. package/dist/test/pages/AvatarGroup.html +376 -0
  109. package/dist/test/pages/Badge.html +75 -0
  110. package/dist/test/pages/Breadcrumbs.html +239 -0
  111. package/dist/test/pages/BusyIndicator.html +255 -0
  112. package/dist/test/pages/Button.html +267 -0
  113. package/dist/test/pages/Calendar.html +96 -0
  114. package/dist/test/pages/Card.html +347 -0
  115. package/dist/test/pages/Carousel.html +574 -0
  116. package/dist/test/pages/CheckBox.html +76 -0
  117. package/dist/test/pages/ColorPalette.html +126 -0
  118. package/dist/test/pages/ColorPalettePopover.html +141 -0
  119. package/dist/test/pages/ColorPicker.html +66 -0
  120. package/dist/test/pages/ComboBox.html +279 -0
  121. package/dist/test/pages/Components.html +106 -0
  122. package/dist/test/pages/CoreControls.html +203 -0
  123. package/dist/test/pages/CoreControls_exp.html +203 -0
  124. package/dist/test/pages/CustomCSS.html +55 -0
  125. package/dist/test/pages/DatePicker.html +193 -0
  126. package/dist/test/pages/DatePicker_test_page.html +97 -0
  127. package/dist/test/pages/DateRangePicker.html +64 -0
  128. package/dist/test/pages/DateTimePicker.html +190 -0
  129. package/dist/test/pages/DayPicker.html +37 -0
  130. package/dist/test/pages/Dialog.html +667 -0
  131. package/dist/test/pages/DialogLifecycle.html +62 -0
  132. package/dist/test/pages/DialogSemantic.html +59 -0
  133. package/dist/test/pages/DurationPicker.html +76 -0
  134. package/dist/test/pages/Eventing.html +33 -0
  135. package/dist/test/pages/FileUploader.html +138 -0
  136. package/dist/test/pages/FormSupport.html +59 -0
  137. package/dist/test/pages/HCB.html +45 -0
  138. package/dist/test/pages/Icon.html +257 -0
  139. package/dist/test/pages/Icon_custom.html +26 -0
  140. package/dist/test/pages/Input.html +722 -0
  141. package/dist/test/pages/InputFieldMinWidth.html +72 -0
  142. package/dist/test/pages/Input_quickview.html +204 -0
  143. package/dist/test/pages/InputsAlignment.html +131 -0
  144. package/dist/test/pages/InputsLazyLoading.html +244 -0
  145. package/dist/test/pages/ItemNavigation.html +94 -0
  146. package/dist/test/pages/Kitchen.html +638 -0
  147. package/dist/test/pages/Kitchen.openui5.html +570 -0
  148. package/dist/test/pages/Label.html +161 -0
  149. package/dist/test/pages/Link.html +201 -0
  150. package/dist/test/pages/List.html +432 -0
  151. package/dist/test/pages/ListGrowing_Button.html +64 -0
  152. package/dist/test/pages/ListGrowing_Scroll.html +93 -0
  153. package/dist/test/pages/List_keyboard_support.html +132 -0
  154. package/dist/test/pages/List_test_page.html +334 -0
  155. package/dist/test/pages/LitKeyFunction.html +40 -0
  156. package/dist/test/pages/MemoryLeak.html +78 -0
  157. package/dist/test/pages/Menu.html +79 -0
  158. package/dist/test/pages/MessagePage.html +39 -0
  159. package/dist/test/pages/MessageStrip.html +55 -0
  160. package/dist/test/pages/MultiComboBox.html +446 -0
  161. package/dist/test/pages/MultiInput.html +409 -0
  162. package/dist/test/pages/MultiInput_Suggestions.html +161 -0
  163. package/dist/test/pages/OpenUI5.html +83 -0
  164. package/dist/test/pages/Panel.html +227 -0
  165. package/dist/test/pages/Popover.html +614 -0
  166. package/dist/test/pages/PopoverArrowBounds.html +54 -0
  167. package/dist/test/pages/Popups.html +133 -0
  168. package/dist/test/pages/ProgressIndicator.html +151 -0
  169. package/dist/test/pages/RTL.html +118 -0
  170. package/dist/test/pages/RadioButton.html +201 -0
  171. package/dist/test/pages/RangeSlider.html +69 -0
  172. package/dist/test/pages/RatingIndicator.html +97 -0
  173. package/dist/test/pages/ResizeHandler.html +74 -0
  174. package/dist/test/pages/ResponsivePopover.html +204 -0
  175. package/dist/test/pages/SegmentedButton.html +116 -0
  176. package/dist/test/pages/Select.html +240 -0
  177. package/dist/test/pages/Simple.html +34 -0
  178. package/dist/test/pages/Slider.html +79 -0
  179. package/dist/test/pages/SplitButton.html +100 -0
  180. package/dist/test/pages/StepInput.html +164 -0
  181. package/dist/test/pages/Switch.html +88 -0
  182. package/dist/test/pages/TabContainer.html +876 -0
  183. package/dist/test/pages/Table-perf-pure.html +73 -0
  184. package/dist/test/pages/Table-perf.html +76 -0
  185. package/dist/test/pages/Table.html +2808 -0
  186. package/dist/test/pages/Table2.html +53 -0
  187. package/dist/test/pages/TableAllPopin.html +205 -0
  188. package/dist/test/pages/TableCustomStyling.html +89 -0
  189. package/dist/test/pages/TableGrouping.html +109 -0
  190. package/dist/test/pages/TableGrowingWithButton.html +805 -0
  191. package/dist/test/pages/TableGrowingWithScroll.html +801 -0
  192. package/dist/test/pages/TableSelection.html +445 -0
  193. package/dist/test/pages/TextArea.html +212 -0
  194. package/dist/test/pages/TimePicker.html +81 -0
  195. package/dist/test/pages/TimeSelection.html +31 -0
  196. package/dist/test/pages/Title.html +37 -0
  197. package/dist/test/pages/Toast.html +111 -0
  198. package/dist/test/pages/ToggleButton.html +69 -0
  199. package/dist/test/pages/Tree.html +294 -0
  200. package/dist/test/pages/WheelSlider_Test_Page.html +26 -0
  201. package/dist/test/pages/base/DOMObserver.html +20 -0
  202. package/dist/test/pages/base/InvisibleMessage.html +44 -0
  203. package/dist/test/pages/form.html +123 -0
  204. package/dist/test/pages/i18n-defaultLang.html +31 -0
  205. package/dist/test/pages/i18n-demo.html +79 -0
  206. package/package.json +9 -8
  207. package/src/AvatarGroup.js +2 -19
package/dist/assets/test/pages/TableGrowingWithButton.html.5a39b2bf.css ADDED
@@ -0,0 +1 @@
1
+ .tablegrowingwithbutton1auto{background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/TableGrowingWithScroll.html.8ef93d31.css ADDED
@@ -0,0 +1 @@
1
+ .tablegrowingwithscroll1auto{background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/TableSelection.html.dba2d678.css ADDED
@@ -0,0 +1 @@
1
+ .tableselection1auto{background-color:var(--sapBackgroundColor)}.tableselection2auto{display:flex;align-items:center}
package/dist/assets/test/pages/TextArea.html.f8e10fd6.css ADDED
@@ -0,0 +1 @@
1
+ html,body{margin:0}.group{padding:1rem}.group-title{color:#333}.small-margin{margin:2px}.fixed-width{display:inline-block;width:280px}.fixed-height{height:160px}.customTextArea::part(textarea){background:bisque;border-radius:var(--sapField_BorderCornerRadius)}.textarea1auto{background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/TimePicker.html.9a4bb300.css ADDED
@@ -0,0 +1 @@
1
+ html,body{height:100%}.timepicker1auto{background-color:var(--sapBackgroundColor)}.timepicker2auto{width:100%}
package/dist/assets/test/pages/TimeSelection.html.8ad57759.css ADDED
@@ -0,0 +1 @@
1
+ html,body{height:100%}.timeselection1auto{background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/Title.html.7bb51811.css ADDED
@@ -0,0 +1 @@
1
+ .title1auto{background-color:var(--sapBackgroundColor)}.title2auto{width:200px;border:1px solid #ccc}.title3auto{margin-bottom:1rem}
package/dist/assets/test/pages/Toast.html.47a93be2.css ADDED
@@ -0,0 +1 @@
1
+ ui5-button,ui5-title{margin:1rem}
package/dist/assets/test/pages/ToggleButton.html.3b7dbb8c.css ADDED
@@ -0,0 +1 @@
1
+ html,body{margin:0}.header{display:flex;justify-content:center;height:3rem;background:#3f5161}.header-title{color:#fafafa;margin:0;padding:0;line-height:3rem;font-size:1.375rem;font-weight:400;text-shadow:0 0 .125rem #ffffff;font-family:"72",Arial,Helvetica,sans-serif}.main{display:flex}.samples,.result{flex:1}.samples{flex-grow:4}.togglebutton1auto{background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/Tree.html.74fe2a1d.css ADDED
@@ -0,0 +1 @@
1
+ html,body{margin:0}.hdr{display:flex}.hdr>*{margin:.25rem}.spacer{flex:1}.full-width{width:100%}.tree1auto{padding:5px;background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/WheelSlider_Test_Page.html.8a9a5e49.css ADDED
@@ -0,0 +1 @@
1
+ .wheelslider_test_page1auto{background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/form.html.f0f82118.css ADDED
@@ -0,0 +1 @@
1
+ .form1auto{background-color:var(--sapBackgroundColor)}.form2auto{width:100%}
package/dist/assets/test/pages/i18n-defaultLang.html.b9d79c6b.css ADDED
@@ -0,0 +1 @@
1
+ .i18n-defaultlang1auto{background-color:var(--sapBackgroundColor)}
package/dist/assets/test/pages/i18n-demo.html.c6751b5c.css ADDED
@@ -0,0 +1 @@
1
+ .snippet{display:flex;width:50%;flex-direction:column;margin:200px auto auto}.i18n-demo1auto{text-align:center}
package/dist/test/pages/72override.html ADDED
@@ -0,0 +1,33 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
5
+ <meta charset="utf-8">
6
+
7
+ <title>Button</title>
8
+
9
+ <script data-ui5-config type="application/json">
10
+ {
11
+ "language": "EN",
12
+ "noConflict": {
13
+ "events": ["click"]
14
+ },
15
+ "calendarType": "Islamic"
16
+ }
17
+ </script>
18
+
19
+
20
+
21
+
22
+
23
+
24
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
25
+ <link rel="stylesheet" href="/assets/test/pages/72override.html.dda35518.css">
26
+ </head>
27
+
28
+ <body class="font72override1auto">
29
+
30
+ <ui5-button>Đỗ</ui5-button>
31
+
32
+ </body>
33
+ </html>
package/dist/test/pages/AnimanitionOff.html ADDED
@@ -0,0 +1,52 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>Animations off</title>
7
+
8
+ <script data-ui5-config type="application/json">
9
+ {
10
+ "animationMode": "none"
11
+ }
12
+ </script>
13
+
14
+
15
+
16
+
17
+
18
+
19
+ <script>
20
+ document.addEventListener("DOMContentLoaded", function () {
21
+ panel1.addEventListener("ui5-toggle", function (event) {
22
+ console.log(event);
23
+ event.target.headerText = event.target.collapsed ? "Click to expand!" : "Click to collapse!";
24
+ field1.value = parseInt(field1.value) + 1;
25
+ });
26
+ panel2.addEventListener("ui5-toggle", function (event) {
27
+ field2.value = parseInt(field2.value) + 1;
28
+ });
29
+ });
30
+ </script>
31
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
32
+ <link rel="stylesheet" href="/assets/test/pages/AnimanitionOff.html.b7566ecc.css">
33
+ </head>
34
+
35
+ <body class="animanitionoff1auto">
36
+ <ui5-panel id="panel1" collapsed header-text="Click to expand!" class="panel">
37
+ <ui5-title>This is a demo how to use the &quot;expand&quot; event.</ui5-title><br>
38
+ <ui5-label>Some short text.</ui5-label>
39
+ </ui5-panel>
40
+
41
+ <ui5-panel id="panel2" collapsed accessible-role="Complementary" class="panel">
42
+ <div slot="header" class="header">
43
+ <ui5-title>Expandable but not expanded</ui5-title>
44
+ </div>
45
+ <ui5-title>This is a demo how to use the &quot;expand&quot; event.</ui5-title><br>
46
+ <ui5-label>Some short text.</ui5-label>
47
+ </ui5-panel><br>
48
+
49
+ <ui5-input id="field1" value="0"></ui5-input>
50
+ <ui5-input id="field2" value="0"></ui5-input>
51
+ </body>
52
+ </html>
package/dist/test/pages/Avatar.html ADDED
@@ -0,0 +1,265 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+
7
+ <title>Avatar</title>
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
9
+ <meta charset="utf-8">
10
+
11
+
12
+
13
+
14
+
15
+ <script>// delete Document.prototype.adoptedStyleSheets;</script>
16
+
17
+
18
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
19
+ <link rel="stylesheet" href="/assets/test/pages/Avatar.html.62cc0573.css">
20
+ </head>
21
+
22
+ <body class="avatar1auto">
23
+ <section>
24
+ <h3>Avatar - Basic sample</h3>
25
+ <ui5-avatar>
26
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
27
+ </ui5-avatar>
28
+ </section>
29
+
30
+ <section>
31
+ <h3>Avatar - special characters in image path</h3>
32
+ <ui5-avatar class="avatar2auto">
33
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
34
+ </ui5-avatar>
35
+ <ui5-avatar class="avatar2auto">
36
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
37
+ </ui5-avatar>
38
+ <ui5-avatar class="avatar2auto">
39
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
40
+ </ui5-avatar>
41
+ <ui5-avatar class="avatar2auto">
42
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" alt="SAP Logo">
43
+ </ui5-avatar>
44
+ </section>
45
+
46
+ <section>
47
+ <h3>Avatar - Square [ XS, S, M, L, XL ]</h3>
48
+ <ui5-avatar shape="Square" size="XS">
49
+ <img src="/assets/woman_avatar_5.7316a316.png" alt="Woman image">
50
+ </ui5-avatar>
51
+ <ui5-avatar shape="Square" size="S">
52
+ <img src="/assets/woman_avatar_5.7316a316.png" alt="Woman image">
53
+ </ui5-avatar>
54
+ <ui5-avatar shape="Square" size="M">
55
+ <img src="/assets/woman_avatar_5.7316a316.png" alt="Woman image">
56
+ </ui5-avatar>
57
+ <ui5-avatar shape="Square" size="L">
58
+ <img src="/assets/woman_avatar_5.7316a316.png" alt="Woman image">
59
+ </ui5-avatar>
60
+ <ui5-avatar shape="Square" size="XL">
61
+ <img src="/assets/woman_avatar_5.7316a316.png" alt="Woman image">
62
+ </ui5-avatar>
63
+ </section>
64
+
65
+ <section>
66
+ <h3>Avatar - Circle [ XS, S, M, L, XL ]</h3>
67
+ <ui5-avatar size="XS">
68
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
69
+ </ui5-avatar>
70
+ <ui5-avatar size="S">
71
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
72
+ </ui5-avatar>
73
+ <ui5-avatar size="M">
74
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
75
+ </ui5-avatar>
76
+ <ui5-avatar size="L">
77
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
78
+ </ui5-avatar>
79
+ <ui5-avatar size="XL">
80
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
81
+ </ui5-avatar>
82
+ </section>
83
+
84
+ <section>
85
+ <h3>Avatar - UI5 Icons</h3>
86
+ <ui5-avatar icon="filter" size="XS"></ui5-avatar>
87
+ <ui5-avatar icon="employee" size="S"></ui5-avatar>
88
+ <ui5-avatar icon="product" size="M"></ui5-avatar>
89
+ <ui5-avatar icon="supplier" size="L"></ui5-avatar>
90
+ <ui5-avatar icon="shipping-status" size="XL"></ui5-avatar>
91
+ </section>
92
+
93
+ <section>
94
+ <h3>Avatar - UI5 Icons</h3>
95
+ <ui5-avatar icon="filter" shape="Square" size="XS"></ui5-avatar>
96
+ <ui5-avatar icon="employee" shape="Square" size="S"></ui5-avatar>
97
+ <ui5-avatar icon="product" shape="Square" size="M"></ui5-avatar>
98
+ <ui5-avatar icon="supplier" shape="Square" size="L"></ui5-avatar>
99
+ <ui5-avatar icon="shipping-status" shape="Square" size="XL"></ui5-avatar>
100
+ </section>
101
+
102
+ <section>
103
+ <h3>Avatar - Background colors [ Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Accent7, Accent8, Accent9, Accent10, Placeholder ]</h3>
104
+ <ui5-avatar color-scheme="Accent1" size="L"></ui5-avatar>
105
+ <ui5-avatar color-scheme="Accent2" size="L"></ui5-avatar>
106
+ <ui5-avatar color-scheme="Accent3" size="L"></ui5-avatar>
107
+ <ui5-avatar color-scheme="Accent4" size="L"></ui5-avatar>
108
+ <ui5-avatar color-scheme="Accent5" size="L"></ui5-avatar>
109
+ <ui5-avatar size="L"></ui5-avatar>
110
+ <ui5-avatar color-scheme="Accent7" size="L"></ui5-avatar>
111
+ <ui5-avatar color-scheme="Accent8" size="L"></ui5-avatar>
112
+ <ui5-avatar color-scheme="Accent9" size="L"></ui5-avatar>
113
+ <ui5-avatar color-scheme="Accent10" size="L"></ui5-avatar>
114
+ <ui5-avatar color-scheme="Placeholder" size="L"></ui5-avatar>
115
+ </section>
116
+
117
+ <section>
118
+ <h3>Avatar - Initials</h3>
119
+ <ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
120
+ <ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
121
+ <ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
122
+ <ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
123
+ <ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
124
+ <ui5-avatar initials="XS" shape="Square" size="XS"></ui5-avatar>
125
+ <ui5-avatar initials="S" color-scheme="Accent7" shape="Square" size="S"></ui5-avatar>
126
+ <ui5-avatar initials="M" color-scheme="Accent8" shape="Square" size="M"></ui5-avatar>
127
+ <ui5-avatar initials="L" color-scheme="Accent9" shape="Square" size="L"></ui5-avatar>
128
+ <ui5-avatar initials="XL" color-scheme="Accent10" shape="Square" size="XL"></ui5-avatar>
129
+ </section>
130
+
131
+ <section>
132
+ <h3>Avatar - Custom</h3>
133
+ <h4>Avatar with custom size</h4>
134
+ <ui5-avatar id="myCustomAvatar" shape="Square" size="XL" class="avatar3auto">
135
+ <img src="/assets/Lamp_avatar_01.ab251b40.jpg" alt="Lamp" class="avatar4auto">
136
+ </ui5-avatar>
137
+ <h4>Avatar with custom size and imageFitType="Contain"</h4>
138
+ <ui5-avatar id="myCustomAvatar1" shape="Square" size="XL" class="avatar3auto">
139
+ <img src="/assets/Lamp_avatar_01.ab251b40.jpg" alt="Lamp" class="avatar5auto">
140
+ </ui5-avatar>
141
+ </section>
142
+
143
+ <section>
144
+ <h3>Avatar - test</h3>
145
+ <ui5-avatar id="myAvatar1">
146
+ <img src="/assets/woman_avatar_5.7316a316.png" alt="Woman image">
147
+ </ui5-avatar>
148
+ <ui5-avatar id="myAvatar2" icon="filter"></ui5-avatar>
149
+ <ui5-avatar id="myAvatar3" icon="filter" initials="SF">
150
+ <img src="/assets/woman_avatar_5.7316a316.png" alt="Woman image">
151
+ </ui5-avatar>
152
+ <ui5-avatar id="myAvatar4" initials="SF" shape="Square" size="M"></ui5-avatar>
153
+ <ui5-avatar id="myAvatar5" initials="WWW" shape="Square" size="M"></ui5-avatar>
154
+ </section>
155
+
156
+ <section>
157
+ <h3>Avatar - interactive</h3>
158
+ <ui5-avatar id="interactive-avatar" aria-haspopup="menu" interactive initials="XS" size="XS"></ui5-avatar>
159
+ <ui5-avatar id="non-interactive-avatar" initials="S" size="S"></ui5-avatar>
160
+ <ui5-input id="click-event" value="0"></ui5-input>
161
+
162
+ <br>
163
+ <ui5-avatar id="myInteractiveAvatar" aria-haspopup="menu" interactive initials="L" size="L"></ui5-avatar>
164
+ <ui5-input id="click-event-2"></ui5-input>
165
+ </section>
166
+
167
+ <section>
168
+ <h3>Avatar - Visual affordance</h3>
169
+ <ui5-avatar initials="AB" color-scheme="Accent1">
170
+ <ui5-badge slot="badge">
171
+ <ui5-icon slot="icon" name="accelerated"></ui5-icon>
172
+ </ui5-badge>
173
+ </ui5-avatar>
174
+
175
+ <ui5-avatar interactive size="L" initials="CD" color-scheme="Accent2">
176
+ <ui5-badge slot="badge">
177
+ <ui5-icon slot="icon" name="accept"></ui5-icon>
178
+ </ui5-badge>
179
+ </ui5-avatar>
180
+
181
+ <ui5-avatar size="XL">
182
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
183
+ <ui5-badge slot="badge">
184
+ <ui5-icon slot="icon" name="bar-chart"></ui5-icon>
185
+ </ui5-badge>
186
+ </ui5-avatar>
187
+
188
+ <br>
189
+
190
+ <ui5-avatar shape="Square" size="XS" initials="EF" color-scheme="Accent3">
191
+ <ui5-badge slot="badge">
192
+ <ui5-icon slot="icon" name="filter"></ui5-icon>
193
+ </ui5-badge>
194
+ </ui5-avatar>
195
+
196
+ <ui5-avatar interactive shape="Square" initials="GH" color-scheme="Accent4">
197
+ <ui5-badge slot="badge">
198
+ <ui5-icon slot="icon" name="add-employee"></ui5-icon>
199
+ </ui5-badge>
200
+ </ui5-avatar>
201
+
202
+ <ui5-avatar shape="Square" size="L">
203
+ <img src="/assets/John_Miller.fc9d0d73.png" alt="John Miller">
204
+ <ui5-badge slot="badge">
205
+ <ui5-icon slot="icon" name="document"></ui5-icon>
206
+ </ui5-badge>
207
+ </ui5-avatar>
208
+ <br><br>
209
+ </section>
210
+
211
+ <section>
212
+ <h3>Avatar - Custom visual affordance</h3>
213
+ <ui5-avatar initials="AB" color-scheme="Accent1">
214
+ <span slot="badge" class="custom-badge">1</span>
215
+ </ui5-avatar>
216
+ <br><br>
217
+ </section>
218
+
219
+ <script>
220
+ var avatar = document.getElementById("interactive-avatar"),
221
+ myInteractiveAvatar = document.getElementById("myInteractiveAvatar"),
222
+ nonInteractiveAvatar = document.getElementById("non-interactive-avatar"),
223
+ input = document.getElementById("click-event"),
224
+ input2 = document.getElementById("click-event-2"),
225
+ inputValue = 0;
226
+ inputValue2 = 0;
227
+
228
+ avatar.addEventListener("ui5-click", function() {
229
+ input.value = ++inputValue;
230
+ });
231
+
232
+ nonInteractiveAvatar.addEventListener("ui5-click", function() {
233
+ input.value = ++inputValue;
234
+ });
235
+
236
+ myInteractiveAvatar.addEventListener("click", function() {
237
+ input2.value = ++inputValue2;
238
+ });
239
+ </script>
240
+
241
+
242
+
243
+ <ui5-avatar size="XL" shape="Circle">
244
+ <img src="/assets/Lamp_avatar_01.ab251b40.jpg" alt="Woman 1" class="avatar-image">
245
+ </ui5-avatar>
246
+
247
+ <ui5-avatar size="XL" shape="Square">
248
+ <img src="/assets/Lamp_avatar_01.ab251b40.jpg" alt="Woman 1" class="avatar-image1">
249
+ </ui5-avatar>
250
+
251
+ <section>
252
+ <h3>Avatar with three initials</h3>
253
+ <ui5-avatar initials="ABC" color-scheme="Accent1"></ui5-avatar>
254
+ <ui5-avatar initials="ABC" color-scheme="Accent2" size="XL"></ui5-avatar>
255
+
256
+
257
+ <h3>Avatar with three overflowing initials - icon should be shown</h3>
258
+ <ui5-avatar initials="WWW" color-scheme="Accent1" size="XS"></ui5-avatar>
259
+ <ui5-avatar initials="WWW" color-scheme="Accent2" size="XL"></ui5-avatar>
260
+
261
+ </section>
262
+
263
+
264
+ </body>
265
+ </html>