@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/test/pages/DatePicker.html ADDED
@@ -0,0 +1,193 @@
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>DatePicker test page</title>
7
+
8
+ <script>
9
+ // delete Document.prototype.adoptedStyleSheets;
10
+ </script>
11
+
12
+
13
+
14
+ <script
15
+ src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
16
+ integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
17
+ crossorigin="anonymous"></script>
18
+
19
+ <script data-ui5-config type="application/json">
20
+ {
21
+ "language": "EN"
22
+ }
23
+ </script>
24
+
25
+ <script data-id="sap-ui-config" type="application/json">
26
+ {
27
+ "rtl": false,
28
+ "formatSettings": {
29
+ "firstDayOfWeek": 0
30
+ }
31
+ }
32
+ </script>
33
+
34
+
35
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
36
+ <link rel="stylesheet" href="/assets/test/pages/DatePicker.html.e667d0b8.css">
37
+ </head>
38
+ <body class="datepicker1auto">
39
+ <div style='width:500px;'>
40
+ <ui5-date-picker id='ui5-datepicker--startDate'
41
+ placeholder='Delivery Date...'>
42
+ </ui5-date-picker>
43
+
44
+ <ui5-date-picker id='ui5-datepicker-value-state-message'
45
+ placeholder='Delivery Date...'
46
+ value-state="Error">
47
+ <div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
48
+ <div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
49
+ </ui5-date-picker>
50
+
51
+ <h3>placeholder + events</h3>
52
+ <ui5-date-picker id='dp5'
53
+ placeholder='Delivery Date...'>
54
+ </ui5-date-picker>
55
+ <ui5-label id="lblChange">change: N/A</ui5-label><br/>
56
+ <ui5-label id="lblLiveChange">input: N/A</ui5-label><br/>
57
+
58
+ <h3>placeholder + prevented default events</h3>
59
+ <ui5-date-picker id='dpPrevent'
60
+ placeholder='Delivery Date...'>
61
+ </ui5-date-picker>
62
+ <ui5-label id="lblChangePrevent">change: N/A</ui5-label><br/>
63
+ <ui5-label id="lblLiveChangePrevent">input: N/A</ui5-label><br/>
64
+
65
+ <h3>format-pattern - 'short'</h3>
66
+ <ui5-date-picker id='dp6' format-pattern='short'></ui5-date-picker>
67
+
68
+ <h3>format-pattern - 'long'</h3>
69
+ <ui5-date-picker id='dp7' format-pattern='long'></ui5-date-picker>
70
+
71
+ <h3>format-pattern - 'QQQ yyyy, MMM dd'</h3>
72
+ <ui5-date-picker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-date-picker>
73
+
74
+ <h3>format-pattern - 'EEE, M/d/yyyy'</h3>
75
+ <ui5-date-picker id='dp9' format-pattern='EEE, M/d/yyyy'></ui5-date-picker>
76
+
77
+ <h3>Try the value - 'today'</h3>
78
+ <ui5-date-picker id='dp10'></ui5-date-picker>
79
+
80
+ <h3>Value is set using Java Script Date object</h3>
81
+ <ui5-date-picker id="dp11" value="11/11/2018" format-pattern="long"></ui5-date-picker>
82
+ <ui5-button id="b1" design="Default">Set date</ui5-button>
83
+
84
+ <h3>disabled</h3>
85
+ <ui5-date-picker id='dp2' value='11/11/2018' disabled></ui5-date-picker>
86
+
87
+ <h3>readonly</h3>
88
+ <ui5-date-picker id='dp3' placeholder='Delivery Date...' readonly></ui5-date-picker>
89
+
90
+ <h3>islamic calendar type</h3>
91
+ <ui5-date-picker primary-calendar-type='Islamic'></ui5-date-picker>
92
+
93
+ <h3>buddhist calendar type</h3>
94
+ <ui5-date-picker primary-calendar-type='Buddhist'></ui5-date-picker>
95
+
96
+ <h3>japanese calendar type</h3>
97
+ <ui5-date-picker primary-calendar-type='Japanese'></ui5-date-picker>
98
+
99
+ <h3>Date picker with primary and secondary calendar type</h3>
100
+ <ui5-date-picker primary-calendar-type='Islamic' secondary-calendar-type='Gregorian'></ui5-date-picker>
101
+
102
+ <h3>explicitly set empty placeholder</h3>
103
+ <ui5-date-picker placeholder=""></ui5-date-picker>
104
+
105
+ <h3>Date picker with min and max date 9/1/2019 - 11/1/2019</h3>
106
+ <ui5-date-picker id="dp33" min-date="9/1/2019" max-date="11/1/2019" format-pattern="dd/MM/yyyy"></ui5-date-picker>
107
+
108
+ <h3>Date picker with only min date 1/1/2000</h3>
109
+ <ui5-date-picker id="dp34" min-date="1/1/2000" format-pattern="dd/MM/yyyy"></ui5-date-picker>
110
+
111
+ <h3>Date picker with only max date date 1/1/2100</h3>
112
+ <ui5-date-picker id="dp35" max-date="1/1/2100" format-pattern="dd/MM/yyyy"></ui5-date-picker>
113
+
114
+ <h3>1 months range</h3>
115
+ <ui5-date-picker id="minMax1" min-date="6/1/2020" max-date="25/1/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
116
+ <h3>2 months range</h3>
117
+ <ui5-date-picker id="minMax2" min-date="6/1/2020" max-date="25/3/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
118
+ <h3>3 months range</h3>
119
+ <ui5-date-picker id="minMax3" value="5/6/2020" min-date="6/1/2020" max-date="5/1/2021" format-pattern="dd/MM/yyyy"></ui5-date-picker>
120
+ <h3>1 year range</h3>
121
+ <ui5-date-picker id="minMax4" value="Feb 5, 2020" min-date="Jan 5, 2020" max-date="Jan 5, 2021"></ui5-date-picker>
122
+
123
+ <section>
124
+ <h3>Test accessibleName and accessibleNameRef</h3>
125
+ <ui5-date-picker id="dpAriaLabel" accessible-name="Hello World"></ui5-date-picker>
126
+ <br>
127
+ <ui5-label id="infoText">info text</ui5-label>
128
+ <ui5-date-picker id="dpAriaLabelledBy" accessible-name-ref="infoText"></ui5-date-picker>
129
+ </section>
130
+
131
+ <section class="ui5-content-density-compact">
132
+ <h3>DatePicker in Compact</h3>
133
+ <div>
134
+ <ui5-date-picker></ui5-date-picker>
135
+ </div>
136
+ </section>
137
+
138
+ <section>
139
+ <h3>DatePicker with properties given in the wrong format</h3>
140
+ <ui5-date-picker min-date="1/1/2021" max-date="31/1/2021" value="5/1/2021"></ui5-date-picker>
141
+ </section>
142
+
143
+ </div>
144
+ <script>
145
+ var dp = document.getElementById('dp5');
146
+ var labelChange = document.getElementById('lblChange');
147
+ var labelLiveChange = document.getElementById('lblLiveChange');
148
+
149
+ dp.addEventListener('click', function() { console.log('click')});
150
+ dp.addEventListener('focus', function() {console.log('focus')});
151
+ dp.addEventListener('dblclick', function() { console.log('dblclick')});
152
+ dp.addEventListener('keydown', function() { console.log('keydown')});
153
+ dp.addEventListener('blur', function() { console.log('blur')});
154
+
155
+ dp.addEventListener('ui5-change', function(e) {
156
+ console.log('change: ', e.detail);
157
+ labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
158
+ });
159
+ dp.addEventListener('ui5-input', function(e) {
160
+ console.log('input: ', e.detail);
161
+ labelLiveChange.innerHTML = 'input: ' + JSON.stringify(e.detail);
162
+ });
163
+
164
+ var dpPrevent = document.getElementById('dpPrevent');
165
+ var labelChangePrevent = document.getElementById('lblChangePrevent');
166
+ var labelLiveChangePrevent = document.getElementById('lblLiveChangePrevent');
167
+
168
+ dpPrevent.addEventListener('ui5-change', function(e) {
169
+ e.preventDefault();
170
+ console.log('change: ', e.detail);
171
+ labelChangePrevent.innerHTML = 'change: ' + JSON.stringify(e.detail);
172
+ });
173
+ dpPrevent.addEventListener('ui5-input', function(e) {
174
+ console.log('input: ', e.detail);
175
+ labelLiveChangePrevent.innerHTML = 'input: ' + JSON.stringify(e.detail);
176
+ });
177
+
178
+ $('#ui5-datepicker--startDate').on('ui5-input change', (function(e) {
179
+ var dp = $('#ui5-datepicker--startDate')[0];
180
+ dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Error');
181
+ $('#startDate').val($('#ui5-datepicker--startDate').val());
182
+ $('#startDate').trigger('change');
183
+ }));
184
+
185
+ var dp11 = document.getElementById('dp11');
186
+
187
+ document.getElementById('b1').addEventListener("click", function(e) {
188
+ dp11.setAttribute("value", dp11.formatValue(new Date(2018, 11, 11)));
189
+ });
190
+
191
+ </script>
192
+ </body>
193
+ </html>
package/dist/test/pages/DatePicker_test_page.html ADDED
@@ -0,0 +1,97 @@
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
+ <script data-ui5-config type="application/json">
8
+ {
9
+ "language": "EN"
10
+ }
11
+ </script>
12
+
13
+
14
+
15
+
16
+
17
+
18
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
19
+ <link rel="stylesheet" href="/assets/test/pages/DatePicker_test_page.html.882ab55e.css">
20
+ </head>
21
+ <body class="datepicker_test_page1auto">
22
+ <ui5-date-picker id="dp12"></ui5-date-picker>
23
+ <ui5-date-picker id="dp"></ui5-date-picker>
24
+ <ui5-date-picker id="dp1" value="11/11/11"></ui5-date-picker>
25
+ <ui5-date-picker id="dp2" format-pattern="yyyy, dd/MM"></ui5-date-picker>
26
+ <ui5-date-picker id="dp3"></ui5-date-picker>
27
+ <ui5-date-picker id="dp4" value="Jan 29, 2019" format-pattern="MMM d, y"></ui5-date-picker>
28
+ <ui5-date-picker id="dp5"></ui5-date-picker>
29
+ <ui5-date-picker id="dp6"></ui5-date-picker>
30
+ <ui5-date-picker id="dp7" format-pattern="MMM d, y" value="Jan 1, 2019"></ui5-date-picker>
31
+ <ui5-date-picker id="dp7_1" format-pattern="MMM d, y"></ui5-date-picker>
32
+ <ui5-date-picker id="dp7_2" format-pattern="MMM d, y"></ui5-date-picker>
33
+ <ui5-date-picker id="dp8" value="Jan 6, 2015"></ui5-date-picker>
34
+ <ui5-date-picker id="dp9" value="today"></ui5-date-picker>
35
+ <ui5-date-picker id="dp10" disabled></ui5-date-picker>
36
+ <ui5-date-picker id='dp-required' required></ui5-date-picker>
37
+ <ui5-date-picker id="dp11"></ui5-date-picker>
38
+ <ui5-date-picker id="dp13"></ui5-date-picker>
39
+ <ui5-date-picker id="dp16" format-pattern="long"></ui5-date-picker>
40
+ <ui5-date-picker value="Invalid value" id="dp20"></ui5-date-picker>
41
+ <ui5-button id="b1" design="Default">Set date</ui5-button>
42
+
43
+
44
+ <label id='lbl'>0</label>
45
+ <button id="downThere" class="datepicker_test_page2auto"></button>
46
+ <label id='lblTomorrow'>0</label>
47
+ <label id='lblTomorrowDate'></label>
48
+
49
+ <h3> Minimum and Maximum Date</h3>
50
+ <ui5-date-picker id="dp33" format-pattern="MMM d, y" min-date="Jan 1, 2000" max-date="Jan 8, 2100" ></ui5-date-picker>
51
+ <h3> Minimum and Maximum Date In Smaller Range</h3>
52
+ <ui5-date-picker id="dp34" format-pattern="MMM d, y" min-date="Jan 12, 2020" max-date="Jan 20, 2020" ></ui5-date-picker>
53
+ <h3>Test placeholder</h3>
54
+ <ui5-date-picker id="dp14" format-pattern="MMM d, y"></ui5-date-picker>
55
+ <ui5-date-picker id="dp15" format-pattern="MMM d, y" placeholder="Delivery date"></ui5-date-picker>
56
+
57
+ <h3>DatePicker with valueStateMessage</h3>
58
+ <ui5-date-picker id="dp17" value-state="Error">
59
+ <div slot="valueStateMessage" id="coolValueStateMessage">
60
+ This date is wrong
61
+ </div>
62
+ </ui5-date-picker>
63
+
64
+ <h3>DatePicker with hide-week-numbers=true/false</h3>
65
+ <ui5-date-picker id="dp18"></ui5-date-picker>
66
+ <ui5-date-picker id="dp19" hide-week-numbers></ui5-date-picker>
67
+
68
+ <section>
69
+ <h3>Test accessibleName and accessibleNameRef</h3>
70
+ <ui5-date-picker id="dpAriaLabel" accessible-name="Hello World"></ui5-date-picker>
71
+ <br>
72
+ <ui5-label id="infoText">info text</ui5-label>
73
+ <ui5-date-picker id="dpAriaLabelledBy" accessible-name-ref="infoText"></ui5-date-picker>
74
+ </section>
75
+
76
+ <script>
77
+ var counter = 0;
78
+ var counterTomorrow = 0;
79
+ function increaseCounter() {
80
+ document.querySelector('#lbl').innerHTML = ++counter;
81
+ }
82
+
83
+ document.querySelector("#dp5").addEventListener("ui5-change", increaseCounter);
84
+ document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
85
+ document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
86
+ document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
87
+ document.querySelector('#lblTomorrowDate').innerHTML = e.target.liveValue;
88
+ });
89
+
90
+ var dp16 = document.getElementById('dp16');
91
+
92
+ document.getElementById('b1').addEventListener("click", function(e) {
93
+ dp16.setAttribute("value", dp16.formatValue(new Date(2018, 11, 11)));
94
+ });
95
+ </script>
96
+ </body>
97
+ </html>
package/dist/test/pages/DateRangePicker.html ADDED
@@ -0,0 +1,64 @@
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>DateRangePicker test page</title>
7
+
8
+ <script>
9
+ // delete Document.prototype.adoptedStyleSheets;
10
+ </script>
11
+
12
+
13
+
14
+
15
+
16
+ <script data-id="sap-ui-config" type="application/json">
17
+ {
18
+ "rtl": false,
19
+ "formatSettings": {
20
+ "firstDayOfWeek": 0
21
+ }
22
+ }
23
+ </script>
24
+
25
+
26
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
27
+ <link rel="stylesheet" href="/assets/test/pages/DateRangePicker.html.1b5072fd.css">
28
+ </head>
29
+ <body class="daterangepicker1auto">
30
+ <div style='width:500px;'>
31
+ <div>
32
+ <label id='labelChange'>0</label>
33
+ <label id='labelDate'></label>
34
+ </div>
35
+ <ui5-daterange-picker id="daterange-picker1"></ui5-daterange-picker>
36
+ <h3>daterange-picker with delimiter @</h3>
37
+ <ui5-daterange-picker id="daterange-picker2" delimiter="@"></ui5-daterange-picker>
38
+ <h3>daterange-picker with format pattern dd/MM/yyyy</h3>
39
+ <ui5-daterange-picker id="daterange-picker3" format-pattern="dd/MM/yyyy"></ui5-daterange-picker>
40
+ <h3>daterange-picker with minDate 01/09/2019 and maxDate 01/11/2019</h3>
41
+ <ui5-daterange-picker id="daterange-picker4" format-pattern="dd/MM/yyyy" min-date="01/09/2019" max-date="01/11/2019"></ui5-daterange-picker>
42
+ <section class="ui5-content-density-compact">
43
+ <h3>daterange-picker in Compact</h3>
44
+ <div>
45
+ <ui5-daterange-picker id="daterange-picker5" delimiter="@"></ui5-daterange-picker>
46
+ </div>
47
+ </section>
48
+ <h3>daterange-picker with format pattern yyyy-MM-ddy</h3>
49
+ <ui5-daterange-picker id="daterange-picker6" format-pattern="yyyy-MM-dd"></ui5-daterange-picker>
50
+ <h3>DateRange Picker with one date selected as first & last</h3>
51
+ <ui5-daterange-picker id="daterange-picker7" value="Aug 20, 2020 - Aug 20, 2020"></ui5-daterange-picker>
52
+
53
+ </div>
54
+ <script>
55
+ document.getElementById('daterange-picker1').addEventListener('ui5-change', function(e) {
56
+ document.getElementById("labelChange").innerHTML = Number(document.getElementById("labelChange").innerHTML) + 1;
57
+ });
58
+
59
+ document.getElementById('daterange-picker4').addEventListener('ui5-change', function(e) {
60
+ document.getElementById("labelDate").innerHTML = e.detail.value;
61
+ });
62
+ </script>
63
+ </body>
64
+ </html>
package/dist/test/pages/DateTimePicker.html ADDED
@@ -0,0 +1,190 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
+ <title>DateTimePicker Test Page</title>
8
+
9
+ <script>
10
+ // delete Document.prototype.adoptedStyleSheets;
11
+ </script>
12
+
13
+
14
+
15
+
16
+
17
+
18
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
19
+ <link rel="stylesheet" href="/assets/test/pages/DateTimePicker.html.eff0e2e0.css">
20
+ </head>
21
+
22
+ <body class="datetimepicker1auto">
23
+ <section>
24
+ <ui5-title wrapping-type="Normal">DateTimePicker</ui5-title><br>
25
+ <ui5-datetime-picker id="dt"></ui5-datetime-picker>
26
+ </section>
27
+
28
+ <section>
29
+ <ui5-title wrapping-type="Normal">DateTimePicker format pattern</ui5-title>
30
+
31
+ <br><ui5-label>Default format pattern</ui5-label><br>
32
+ <ui5-datetime-picker
33
+ id="defaultPattern"
34
+ value="13/04/2020, 03:16:16 AM"
35
+ ></ui5-datetime-picker>
36
+ <ui5-button id="setButton" design="Default">Set date</ui5-button>
37
+
38
+ <br>
39
+
40
+ <br><ui5-label>d/MM/yyyy, hh:mm aa</ui5-label><br>
41
+ <ui5-datetime-picker
42
+ id="dtMinutes"
43
+ format-pattern="dd/MM/yyyy, hh:mm aa"
44
+ value="13/04/2020, 09:16 AM"
45
+ ></ui5-datetime-picker>
46
+
47
+ <br>
48
+
49
+ <br><ui5-label>d/MM/yyyy, hh:mm:ss aa</ui5-label><br>
50
+ <ui5-datetime-picker
51
+ id="dtSeconds"
52
+ format-pattern="dd/MM/yyyy, hh:mm:ss aa"
53
+ value="13/04/2020, 03:16:16 AM"
54
+ ></ui5-datetime-picker>
55
+
56
+ <br>
57
+
58
+ <br><ui5-label>yyyy-MM-dd-hh:mm:ss aa</ui5-label><br>
59
+ <ui5-datetime-picker
60
+ id="dtPreventDefault"
61
+ format-pattern="yyyy-MM-dd-hh:mm:ss aa"
62
+ ></ui5-datetime-picker>
63
+
64
+ <br>
65
+
66
+ <br><ui5-label>d/MM/yyyy, HH:mm:ss (24 hour format)</ui5-label><br>
67
+ <ui5-datetime-picker
68
+ format-pattern="dd/MM/yyyy, HH:mm:ss"
69
+ value="13/04/2020, 19:16:16"
70
+ ></ui5-datetime-picker>
71
+
72
+ <br>
73
+
74
+ <br><ui5-label>d/MM/yyyy, H</ui5-label><br>
75
+ <ui5-datetime-picker
76
+ format-pattern="dd/MM/yyyy, H"
77
+ value="13/04/2020, 19"
78
+ ></ui5-datetime-picker>
79
+
80
+ <br>
81
+
82
+ <br><ui5-label>d/MM/yyyy - no timeset</ui5-label><br>
83
+ <ui5-datetime-picker
84
+ format-pattern="dd/MM/yyyy"
85
+ value="Apr 10, 2020"
86
+ ></ui5-datetime-picker>
87
+ </section>
88
+
89
+ <section>
90
+ <ui5-title wrapping-type="Normal">Test DateTimePicker change event on submit</ui5-title>
91
+ <br>
92
+
93
+ <ui5-datetime-picker id="dt1"></ui5-datetime-picker><br>
94
+ <br><ui5-label>Change counter</ui5-label><br>
95
+ <ui5-input
96
+ id="input1"
97
+ class="datetimepicker2auto">
98
+ </ui5-input>
99
+
100
+ <br><ui5-label>Changed value</ui5-label><br>
101
+ <ui5-input
102
+ id="input2"
103
+ class="datetimepicker2auto">
104
+ </ui5-input>
105
+ </section>
106
+
107
+ <section>
108
+ <ui5-title wrapping-type="Normal">Test DateTimePicker change event on cancel</ui5-title>
109
+ <br/>
110
+
111
+ <ui5-datetime-picker id="dt2"></ui5-datetime-picker><br>
112
+
113
+ <br><ui5-label>Change counter</ui5-label><br>
114
+ <ui5-input id="input3" class="datetimepicker2auto"></ui5-input>
115
+
116
+ <br><ui5-label>Changed value</ui5-label><br>
117
+ <ui5-input id="input4" class="datetimepicker2auto"></ui5-input>
118
+ </section>
119
+
120
+ <section>
121
+ <ui5-datetime-picker
122
+ id="dtTest12AM"
123
+ format-pattern="dd/MM/yyyy, hh:mm:ss aa"
124
+ value="13/04/2020, 03:16:16 AM"
125
+ ></ui5-datetime-picker>
126
+ </section>
127
+ <ui5-datetime-picker
128
+ id="dtTest12PM"
129
+ format-pattern="dd/MM/yyyy, hh:mm:ss aa"
130
+ value="13/04/2020, 03:16:16 AM">
131
+ </ui5-datetime-picker>
132
+
133
+ <section>
134
+ <ui5-title wrapping-type="Normal">DateTimePicker states</ui5-title>
135
+ <ui5-datetime-picker value-state="Error"></ui5-datetime-picker>
136
+ <ui5-datetime-picker value-state="Warning"></ui5-datetime-picker>
137
+ <ui5-datetime-picker value-state="Information"></ui5-datetime-picker>
138
+ <ui5-datetime-picker value-state="Success"></ui5-datetime-picker>
139
+ <br><br>
140
+ <ui5-datetime-picker readonly></ui5-datetime-picker>
141
+ <ui5-datetime-picker disabled></ui5-datetime-picker>
142
+ </section>
143
+
144
+ <section class="sapUiSizeCompact">
145
+ <ui5-title wrapping-type="Normal">DateTimePicker compact size</ui5-title>
146
+ <ui5-datetime-picker
147
+ ></ui5-datetime-picker>
148
+
149
+ <br>
150
+ <ui5-datetime-picker
151
+ format-pattern="yyyy-MM-dd-hh:mm:ss aa"
152
+ value="2020-04-13-04:16:16 AM"
153
+ ></ui5-datetime-picker>
154
+ </section>
155
+
156
+ <section>
157
+ <ui5-title wrapping-type="Normal">DateTimePicker with secondary calendar type</ui5-title>
158
+ <ui5-datetime-picker
159
+ id="secondaryCalendar"
160
+ value="Sha. 24, 1443 AH, 10:27:26 AM"
161
+ primary-calendar-type="Islamic"
162
+ secondary-calendar-type="Gregorian"
163
+ ></ui5-datetime-picker>
164
+ </section>
165
+
166
+ <script>
167
+ var counter = 0;
168
+ dt1.addEventListener("ui5-change", function(event) {
169
+ input1.value = ++counter;
170
+ input2.value = "{ value: " + event.detail.value + " , valid: " + event.detail.valid + " }";
171
+ });
172
+
173
+ dtPreventDefault.addEventListener("ui5-change", function(event) {
174
+ event.preventDefault();
175
+ });
176
+
177
+ var counter2 = 0;
178
+ dt2.addEventListener("ui5-change", function(event) {
179
+ input3.value = ++counter2;
180
+ input4.value = "{ value: " + dt2.value + " , valid: " + event.detail.valid + " }";
181
+ });
182
+
183
+ var dtp = document.getElementById('defaultPattern');
184
+ document.getElementById('setButton').addEventListener("click", function(e) {
185
+ dtp.setAttribute("value", dtp.formatValue(new Date(2020, 3, 13, 3, 16, 16)));
186
+ });
187
+
188
+ </script>
189
+ </body>
190
+ </html>
package/dist/test/pages/DayPicker.html ADDED
@@ -0,0 +1,37 @@
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
+ <script>
8
+ // delete Document.prototype.adoptedStyleSheets;
9
+ </script>
10
+
11
+
12
+
13
+
14
+
15
+ <script
16
+ src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
17
+ integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
18
+ crossorigin="anonymous"></script>
19
+
20
+ <script data-id="sap-ui-config" type="application/json">
21
+ {
22
+ "rtl": false,
23
+ "formatSettings": {
24
+ "firstDayOfWeek": 0
25
+ }
26
+ }
27
+ </script>
28
+
29
+
30
+ <script type="module" crossorigin src="/assets/bundle.common.ac7489b0.js"></script>
31
+ <link rel="stylesheet" href="/assets/test/pages/DayPicker.html.5700622a.css">
32
+ </head>
33
+ <body class="daypicker1auto">
34
+ <ui5-daypicker id="daypicker"></ui5-daypicker>
35
+ <ui5-daypicker id="daypicker1"></ui5-daypicker>
36
+ </body>
37
+ </html>