@ui5/webcomponents 1.14.2 → 1.14.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 (132) hide show
  1. package/.vscode/diff/vulsCount.txt +1 -0
  2. package/.vscode/settings.json +3 -0
  3. package/CHANGELOG.md +11 -0
  4. package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js +1 -1
  5. package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js.map +1 -1
  6. package/package.json +7 -8
  7. package/src/ComboBoxPopover.hbs +16 -12
  8. package/LICENSE.txt +0 -201
  9. package/dist/assets/test/pages/ComboBox.html.e6b2c662.js +0 -1
  10. package/dist/assets/test/pages/Icon.html.4f593716.js +0 -1
  11. package/dist/assets/test/pages/Label.html.36a2faae.js +0 -4
  12. package/dist/assets/test/pages/Popups.html.c29d144e.js +0 -1
  13. package/dist/test/pages/72override.html +0 -33
  14. package/dist/test/pages/AnimanitionOff.html +0 -52
  15. package/dist/test/pages/Avatar.html +0 -264
  16. package/dist/test/pages/AvatarGroup.html +0 -376
  17. package/dist/test/pages/Badge.html +0 -75
  18. package/dist/test/pages/Breadcrumbs.html +0 -239
  19. package/dist/test/pages/BusyIndicator.html +0 -278
  20. package/dist/test/pages/Button.html +0 -273
  21. package/dist/test/pages/Calendar.html +0 -103
  22. package/dist/test/pages/Card.html +0 -347
  23. package/dist/test/pages/Carousel.html +0 -613
  24. package/dist/test/pages/CheckBox.html +0 -90
  25. package/dist/test/pages/ColorPalette.html +0 -126
  26. package/dist/test/pages/ColorPalettePopover.html +0 -141
  27. package/dist/test/pages/ColorPicker.html +0 -66
  28. package/dist/test/pages/ComboBox.html +0 -292
  29. package/dist/test/pages/Components.html +0 -106
  30. package/dist/test/pages/CoreControls.html +0 -203
  31. package/dist/test/pages/CoreControls_exp.html +0 -203
  32. package/dist/test/pages/CustomCSS.html +0 -55
  33. package/dist/test/pages/DatePicker.html +0 -211
  34. package/dist/test/pages/DatePicker_test_page.html +0 -109
  35. package/dist/test/pages/DateRangePicker.html +0 -67
  36. package/dist/test/pages/DateTimePicker.html +0 -199
  37. package/dist/test/pages/DateTimePicker_Timezone.html +0 -72
  38. package/dist/test/pages/DayPicker.html +0 -37
  39. package/dist/test/pages/Dialog.html +0 -813
  40. package/dist/test/pages/DialogLifecycle.html +0 -62
  41. package/dist/test/pages/DialogSemantic.html +0 -58
  42. package/dist/test/pages/Eventing.html +0 -33
  43. package/dist/test/pages/F6Test1.html +0 -42
  44. package/dist/test/pages/F6Test2.html +0 -42
  45. package/dist/test/pages/F6Test3.html +0 -39
  46. package/dist/test/pages/F6Test4.html +0 -46
  47. package/dist/test/pages/F6Test5.html +0 -42
  48. package/dist/test/pages/F6Test6.html +0 -39
  49. package/dist/test/pages/F6Test7.html +0 -36
  50. package/dist/test/pages/FileUploader.html +0 -138
  51. package/dist/test/pages/FormComponents.html +0 -76
  52. package/dist/test/pages/FormSupport.html +0 -59
  53. package/dist/test/pages/HCB.html +0 -45
  54. package/dist/test/pages/Icon.html +0 -278
  55. package/dist/test/pages/Icon_and_theming.html +0 -67
  56. package/dist/test/pages/Icon_custom.html +0 -26
  57. package/dist/test/pages/Input.html +0 -731
  58. package/dist/test/pages/InputFieldLabels.html +0 -355
  59. package/dist/test/pages/InputFieldMinWidth.html +0 -230
  60. package/dist/test/pages/InputIcons.html +0 -80
  61. package/dist/test/pages/Input_quickview.html +0 -204
  62. package/dist/test/pages/InputsAlignment.html +0 -131
  63. package/dist/test/pages/InputsLazyLoading.html +0 -244
  64. package/dist/test/pages/ItemNavigation.html +0 -94
  65. package/dist/test/pages/Kitchen.html +0 -637
  66. package/dist/test/pages/Kitchen.openui5.html +0 -570
  67. package/dist/test/pages/Label.html +0 -192
  68. package/dist/test/pages/Link.html +0 -201
  69. package/dist/test/pages/List.html +0 -465
  70. package/dist/test/pages/ListGrowing_Button.html +0 -64
  71. package/dist/test/pages/ListGrowing_Scroll.html +0 -93
  72. package/dist/test/pages/List_keyboard_support.html +0 -130
  73. package/dist/test/pages/List_test_page.html +0 -395
  74. package/dist/test/pages/LitKeyFunction.html +0 -40
  75. package/dist/test/pages/MemoryLeak.html +0 -78
  76. package/dist/test/pages/Menu.html +0 -161
  77. package/dist/test/pages/MessagePage.html +0 -39
  78. package/dist/test/pages/MessageStrip.html +0 -55
  79. package/dist/test/pages/MultiComboBox.html +0 -489
  80. package/dist/test/pages/MultiInput.html +0 -451
  81. package/dist/test/pages/MultiInput_Suggestions.html +0 -161
  82. package/dist/test/pages/OpenUI5-second.html +0 -60
  83. package/dist/test/pages/OpenUI5.html +0 -83
  84. package/dist/test/pages/Panel.html +0 -226
  85. package/dist/test/pages/Popover.html +0 -658
  86. package/dist/test/pages/PopoverArrowBounds.html +0 -52
  87. package/dist/test/pages/Popups.html +0 -131
  88. package/dist/test/pages/ProgressIndicator.html +0 -151
  89. package/dist/test/pages/RTL.html +0 -118
  90. package/dist/test/pages/RadioButton.html +0 -201
  91. package/dist/test/pages/RangeSlider.html +0 -96
  92. package/dist/test/pages/RatingIndicator.html +0 -97
  93. package/dist/test/pages/ResizeHandler.html +0 -74
  94. package/dist/test/pages/ResponsivePopover.html +0 -267
  95. package/dist/test/pages/SegmentedButton.html +0 -151
  96. package/dist/test/pages/Select.html +0 -272
  97. package/dist/test/pages/Simple.html +0 -25
  98. package/dist/test/pages/Slider.html +0 -79
  99. package/dist/test/pages/SplitButton.html +0 -101
  100. package/dist/test/pages/StepInput.html +0 -189
  101. package/dist/test/pages/Switch.html +0 -97
  102. package/dist/test/pages/TabContainer.html +0 -904
  103. package/dist/test/pages/Table-perf-pure.html +0 -73
  104. package/dist/test/pages/Table-perf.html +0 -76
  105. package/dist/test/pages/Table.html +0 -2808
  106. package/dist/test/pages/Table2.html +0 -53
  107. package/dist/test/pages/TableAllPopin.html +0 -228
  108. package/dist/test/pages/TableCustomStyling.html +0 -89
  109. package/dist/test/pages/TableGrouping.html +0 -109
  110. package/dist/test/pages/TableGrowingWithButton.html +0 -805
  111. package/dist/test/pages/TableGrowingWithScroll.html +0 -801
  112. package/dist/test/pages/TableSelection.html +0 -445
  113. package/dist/test/pages/Test.html +0 -15
  114. package/dist/test/pages/TextArea.html +0 -222
  115. package/dist/test/pages/TimePicker.html +0 -89
  116. package/dist/test/pages/TimeSelection.html +0 -31
  117. package/dist/test/pages/Title.html +0 -60
  118. package/dist/test/pages/Toast.html +0 -111
  119. package/dist/test/pages/ToggleButton.html +0 -71
  120. package/dist/test/pages/Tokenizer.html +0 -91
  121. package/dist/test/pages/Tree.html +0 -307
  122. package/dist/test/pages/TreeDynamic.html +0 -56
  123. package/dist/test/pages/WheelSlider_Test_Page.html +0 -26
  124. package/dist/test/pages/base/AriaLabelHelper.html +0 -334
  125. package/dist/test/pages/base/DOMObserver.html +0 -20
  126. package/dist/test/pages/base/IconCollection.html +0 -23
  127. package/dist/test/pages/base/IconCollectionInCustomTheme.html +0 -25
  128. package/dist/test/pages/base/IgnoreCustomElements.html +0 -26
  129. package/dist/test/pages/base/InvisibleMessage.html +0 -44
  130. package/dist/test/pages/form.html +0 -123
  131. package/dist/test/pages/i18n-defaultLang.html +0 -31
  132. package/dist/test/pages/i18n-demo.html +0 -79
@@ -1,203 +0,0 @@
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>Core Controls</title>
8
-
9
-
10
-
11
-
12
-
13
- <script>// delete Document.prototype.adoptedStyleSheets;</script>
14
-
15
- <script data-ui5-config type="application/json">
16
- {
17
- "theme": "sap_horizon_exp",
18
- "language": "EN"
19
- }
20
- </script>
21
-
22
-
23
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
24
- <link rel="stylesheet" href="/assets/CoreControls_exp.ab4b7ad2.css">
25
- </head>
26
-
27
- <body>
28
- <section class="row-space-between">
29
- <ui5-badge color-scheme="1">Mango</ui5-badge><br>
30
- <ui5-badge color-scheme="2">Redd</ui5-badge><br>
31
- <ui5-badge color-scheme="3">Pink</ui5-badge><br>
32
- <ui5-badge color-scheme="4">Pink 2</ui5-badge><br>
33
- <ui5-badge color-scheme="5">Purple</ui5-badge><br>
34
- <ui5-badge color-scheme="6">Blue</ui5-badge><br>
35
- <ui5-badge color-scheme="7">Green</ui5-badge><br>
36
- <ui5-badge color-scheme="8">Lemon</ui5-badge><br>
37
- <ui5-badge color-scheme="9">Grey</ui5-badge><br>
38
- <ui5-badge color-scheme="10">indigo</ui5-badge><br>
39
- </section>
40
-
41
- <section class="row-center">
42
- <ui5-input show-suggestions placeholder="Suggestions">
43
- <ui5-suggestion-item text="Chromium"></ui5-suggestion-item>
44
- <ui5-suggestion-item text="Titanium"></ui5-suggestion-item>
45
- <ui5-suggestion-item text="Iron"></ui5-suggestion-item>
46
- <ui5-suggestion-item text="Gold"></ui5-suggestion-item>
47
- <ui5-suggestion-item text="Silver"></ui5-suggestion-item>
48
- </ui5-input>
49
-
50
- <ui5-input value="Not editable" readonly></ui5-input>
51
- <ui5-input value="Not editable" disabled></ui5-input>
52
- </section>
53
-
54
- <section class="row-center">
55
- <ui5-input value="input" value-state="Error">
56
- </ui5-input>
57
- <ui5-input value="input" value-state="Warning">
58
- </ui5-input>
59
- <ui5-input value="input" value-state="Success">
60
- </ui5-input>
61
-
62
- <ui5-input value="input" value-state="Information">
63
- </ui5-input>
64
- </section>
65
-
66
- <section class="row-center">
67
- <ui5-combobox show-suggestions placeholder="Standard">
68
- <ui5-cb-item text="Chromium"></ui5-cb-item>
69
- <ui5-cb-item selected text="Titanium"></ui5-cb-item>
70
- <ui5-cb-item text="Iron"></ui5-cb-item>
71
- <ui5-cb-item text="Gold"></ui5-cb-item>
72
- <ui5-cb-item text="Silver"></ui5-cb-item>
73
- </ui5-combobox>
74
-
75
- <ui5-combobox show-suggestions readonly value="Not editable">
76
- <ui5-cb-item text="Chromium"></ui5-cb-item>
77
- <ui5-cb-item text="Titanium"></ui5-cb-item>
78
- <ui5-cb-item text="Iron"></ui5-cb-item>
79
- <ui5-cb-item text="Gold"></ui5-cb-item>
80
- <ui5-cb-item text="Silver"></ui5-cb-item>
81
- </ui5-combobox>
82
-
83
- <ui5-combobox disabled value="disabled"></ui5-combobox>
84
-
85
- <ui5-combobox show-suggestions placeholder="Standard">
86
- <ui5-cb-item text="Chromium"></ui5-cb-item>
87
- <ui5-cb-item text="Titanium"></ui5-cb-item>
88
- <ui5-cb-item text="Iron"></ui5-cb-item>
89
- <ui5-cb-item text="Gold"></ui5-cb-item>
90
- <ui5-cb-item text="Silver"></ui5-cb-item>
91
- </ui5-combobox>
92
- </section>
93
-
94
- <section class="row-center">
95
- <ui5-select>
96
- <ui5-option>Cozy</ui5-option>
97
- <ui5-option selected>Compact</ui5-option>
98
- <ui5-option >Condensed</ui5-option>
99
- </ui5-select>
100
-
101
- <ui5-date-picker placeholder='Delivery Date...'></ui5-date-picker>
102
-
103
- <ui5-date-picker value-state="Error"></ui5-date-picker>
104
- </section>
105
-
106
- <section>
107
- <ui5-tabcontainer collapsed fixed>
108
- <ui5-tab text="One" selected>
109
- </ui5-tab>
110
- <ui5-tab text="Two">
111
- </ui5-tab>
112
- <ui5-tab text="Three">
113
- </ui5-tab>
114
- <ui5-tab text="Four">
115
- </ui5-tab>
116
- <ui5-tab text="Five">
117
- </ui5-tab>
118
- <ui5-tab text="Six">
119
- </ui5-tab>
120
- <ui5-tab text="Seven">
121
- </ui5-tab>
122
- <ui5-tab text="Eight">
123
- </ui5-tab>
124
- <ui5-tab text="Nine">
125
- </ui5-tab>
126
- <ui5-tab text="Ten">
127
- </ui5-tab>
128
- <ui5-tab text="Eleven">
129
- </ui5-tab>
130
- <ui5-tab text="Twelve">
131
- </ui5-tab>
132
- <ui5-tab text="Thirteen">
133
- </ui5-tab>
134
- <ui5-tab text="Fourteen">
135
- </ui5-tab>
136
- <ui5-tab text="Fiveteen">
137
- </ui5-tab>
138
- <ui5-tab text="Sixteen">
139
- </ui5-tab>
140
- </ui5-tabcontainer>
141
- </section>
142
-
143
- <section class="row-center">
144
- <section>
145
- <ui5-button design="Emphasized">Action</ui5-button>
146
- <ui5-button>Primary</ui5-button>
147
- <ui5-button design="Transparent">Secondary</ui5-button>
148
- <ui5-button disabled>Inactive</ui5-button>
149
- <ui5-button design="Positive">Agree</ui5-button>
150
- <ui5-button design="Negative">Decline</ui5-button>
151
- <ui5-button design="Attention">Warning</ui5-button>
152
- <ui5-button design="Attention" icon="message-warning">Warning</ui5-button>
153
- </section>
154
-
155
- <section>
156
- <ui5-radio-button text="Group One" checked name="test"></ui5-radio-button>
157
- <ui5-radio-button text="Group One" name="test"></ui5-radio-button>
158
- <ui5-radio-button text="Group One" name="test"></ui5-radio-button>
159
- <ui5-radio-button text="Group One" disabled name="test2"></ui5-radio-button>
160
- <ui5-radio-button text="Group One" readonly name="test2"></ui5-radio-button>
161
- </section>
162
-
163
- <section>
164
- <ui5-radio-button value-state="Error" checked text="Group Two" name="test2"></ui5-radio-button>
165
- <ui5-radio-button value-state="Error" disabled text="Group Two" name="test2"></ui5-radio-button>
166
- <ui5-radio-button value-state="Warning" text="Group Two" name="test2"></ui5-radio-button>
167
- <ui5-radio-button value-state="Success" text="Group Two" name="test2"></ui5-radio-button>
168
- <ui5-radio-button value-state="Information" text="Group Two" name="test2"></ui5-radio-button>
169
- </section>
170
-
171
- <section>
172
- <ui5-checkbox text="Option C"></ui5-checkbox>
173
- <ui5-checkbox checked text="Option D"></ui5-checkbox>
174
- <ui5-checkbox text="Option E"></ui5-checkbox>
175
- <ui5-checkbox disabled text="Option A"></ui5-checkbox>
176
- <ui5-checkbox readonly text="Option B"></ui5-checkbox>
177
- </section>
178
-
179
- <section>
180
- <ui5-checkbox checked value-state="Error" text="First"></ui5-checkbox>
181
- <ui5-checkbox value-state="Error" disabled text="Second"></ui5-checkbox>
182
- <ui5-checkbox value-state="Warning" text="Third"></ui5-checkbox>
183
- <ui5-checkbox value-state="Success" text="Fourth"></ui5-checkbox>
184
- <ui5-checkbox value-state="Information" text="Fifth"></ui5-checkbox>
185
- </section>
186
-
187
- <section>
188
- <ui5-switch checked name="test"></ui5-switch>
189
- <ui5-switch name="test"></ui5-switch>
190
- <ui5-switch name="test"></ui5-switch>
191
- <ui5-switch checked name="test"></ui5-switch>
192
- <ui5-switch name="test"></ui5-switch>
193
- </section>
194
- </section>
195
-
196
- <section class="row-center">
197
- <section class="corecontrols_exp1auto">
198
- <ui5-slider min="0" max="20" show-tooltip></ui5-slider>
199
- <ui5-slider min="20" max="100" label-interval="5" show-tickmarks></ui5-slider>
200
- </section>
201
- </section>
202
- </body>
203
- </html>
@@ -1,55 +0,0 @@
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.fa62259e.js"></script>
25
- <link rel="stylesheet" href="/assets/CustomCSS.79ab0997.css">
26
- </head>
27
-
28
- <body class="customcss1auto">
29
-
30
- <ui5-select id="select">
31
- <ui5-option>1</ui5-option>
32
- <ui5-option>2</ui5-option>
33
- </ui5-select>
34
-
35
- <br />
36
- <br />
37
-
38
- <ui5-button id="btn">Apply custom css and rerender</ui5-button>
39
-
40
- <br />
41
- <br />
42
-
43
- <script>
44
- const applyCustomCSSAndRerender = function() {
45
- window["sap-ui-webcomponents-bundle"].addCustomCSS("ui5-select", ".ui5-select-root { background-color: red; } ");
46
- };
47
-
48
- document
49
- .getElementById("btn")
50
- .addEventListener("click", applyCustomCSSAndRerender);
51
-
52
- </script>
53
-
54
- </body>
55
- </html>
@@ -1,211 +0,0 @@
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.fa62259e.js"></script>
36
- <link rel="stylesheet" href="/assets/DatePicker.975133a2.css">
37
- </head>
38
- <body class="datepicker1auto">
39
- <div style='width:600px;'>
40
- <div>
41
- <h3> DatePicker with no format pattern & min-max dates in ISO format</h3>
42
- <ui5-date-picker id="dpMinMax-dates" min-date="2019-09-01" max-date="2019-11-01"></ui5-date-picker>
43
- </div>
44
-
45
- <h3>Date picker with placeholder.</h3>
46
- <ui5-date-picker id='ui5-datepicker--startDate'
47
- placeholder='Delivery Date...'>
48
- </ui5-date-picker>
49
-
50
- <ui5-date-picker id='ui5-datepicker-value-state-message'
51
- placeholder='Delivery Date...'
52
- value-state="Error">
53
- <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>
54
- <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>
55
- </ui5-date-picker>
56
-
57
- <h3>placeholder + events</h3>
58
- <ui5-date-picker id='dp5'
59
- placeholder='Delivery Date...'>
60
- </ui5-date-picker>
61
- <ui5-label id="lblChange">change: N/A</ui5-label><br/>
62
- <ui5-label id="lblLiveChange">input: N/A</ui5-label><br/>
63
-
64
- <h3>placeholder + prevented default events</h3>
65
- <ui5-date-picker id='dpPrevent'
66
- placeholder='Delivery Date...'>
67
- </ui5-date-picker>
68
- <ui5-label id="lblChangePrevent">change: N/A</ui5-label><br/>
69
- <ui5-label id="lblChangePreventTargetValue">target value on event fire : N/A</ui5-label><br/>
70
- <ui5-label id="lblLiveChangePrevent">input: N/A</ui5-label><br/>
71
-
72
- <h3>format-pattern - 'short'</h3>
73
- <ui5-date-picker id='dp6' format-pattern='short'></ui5-date-picker>
74
-
75
- <h3>format-pattern - 'long'</h3>
76
- <ui5-date-picker id='dp7' format-pattern='long'></ui5-date-picker>
77
-
78
- <h3>format-pattern - 'QQQ yyyy, MMM dd'</h3>
79
- <ui5-date-picker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-date-picker>
80
-
81
- <h3>format-pattern - 'EEE, M/d/yyyy'</h3>
82
- <ui5-date-picker id='dp9' format-pattern='EEE, M/d/yyyy'></ui5-date-picker>
83
-
84
- <h3>Try the value - 'today'</h3>
85
- <ui5-date-picker id='dp10'></ui5-date-picker>
86
-
87
- <h3>Value is set using Java Script Date object</h3>
88
- <ui5-date-picker id="dp11" value="11/11/2018" format-pattern="long"></ui5-date-picker>
89
- <ui5-button id="b1" design="Default">Set date</ui5-button>
90
-
91
- <h3>disabled</h3>
92
- <ui5-date-picker id='dp2' value='11/11/2018' disabled></ui5-date-picker>
93
-
94
- <h3>readonly</h3>
95
- <ui5-date-picker id='dp3' placeholder='Delivery Date...' readonly></ui5-date-picker>
96
-
97
- <h3>islamic calendar type</h3>
98
- <ui5-date-picker primary-calendar-type='Islamic'></ui5-date-picker>
99
-
100
- <h3>buddhist calendar type</h3>
101
- <ui5-date-picker primary-calendar-type='Buddhist'></ui5-date-picker>
102
-
103
- <h3>japanese calendar type</h3>
104
- <ui5-date-picker primary-calendar-type='Japanese'></ui5-date-picker>
105
-
106
- <h3>Date picker with primary and secondary calendar type</h3>
107
- <ui5-date-picker primary-calendar-type='Islamic' secondary-calendar-type='Gregorian'></ui5-date-picker>
108
-
109
- <h3>explicitly set empty placeholder</h3>
110
- <ui5-date-picker placeholder=""></ui5-date-picker>
111
-
112
- <h3>Date picker with min and max date 9/1/2019 - 11/1/2019</h3>
113
- <ui5-date-picker id="dp33" min-date="9/1/2019" max-date="11/1/2019" format-pattern="dd/MM/yyyy"></ui5-date-picker>
114
-
115
- <h3>Date picker with only min date 1/1/2000</h3>
116
- <ui5-date-picker id="dp34" min-date="1/1/2000" format-pattern="dd/MM/yyyy"></ui5-date-picker>
117
-
118
- <h3>Date picker with only max date date 1/1/2100</h3>
119
- <ui5-date-picker id="dp35" max-date="1/1/2100" format-pattern="dd/MM/yyyy"></ui5-date-picker>
120
-
121
- <h3>1 months range</h3>
122
- <ui5-date-picker id="minMax1" min-date="6/1/2020" max-date="25/1/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
123
- <h3>2 months range</h3>
124
- <ui5-date-picker id="minMax2" min-date="6/1/2020" max-date="25/3/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
125
- <h3>3 months range</h3>
126
- <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>
127
- <h3>1 year range</h3>
128
- <ui5-date-picker id="minMax4" value="Feb 5, 2020" min-date="Jan 5, 2020" max-date="Jan 5, 2021"></ui5-date-picker>
129
-
130
- <section>
131
- <h3>Test accessibleName and accessibleNameRef</h3>
132
- <ui5-date-picker id="dpAriaLabel" accessible-name="Hello World"></ui5-date-picker>
133
- <br>
134
- <ui5-label id="infoText">info text</ui5-label>
135
- <ui5-date-picker id="dpAriaLabelledBy" accessible-name-ref="infoText"></ui5-date-picker>
136
- </section>
137
-
138
- <section class="ui5-content-density-compact">
139
- <h3>DatePicker in Compact</h3>
140
- <div>
141
- <ui5-date-picker></ui5-date-picker>
142
- </div>
143
- </section>
144
-
145
- <section>
146
- <h3>DatePicker with properties given in the wrong format</h3>
147
- <ui5-date-picker min-date="1/1/2021" max-date="31/1/2021" value="5/1/2021"></ui5-date-picker>
148
- </section>
149
-
150
- <h3>DatePicker with format `yyyy, dd/MM` should open picker on days</h3>
151
- <ui5-date-picker id="dpCalendarModeDays" format-pattern="yyyy, dd/MM"></ui5-date-picker>
152
-
153
- <h3>DatePicker with format `MMM y` should open picker on months</h3>
154
- <ui5-date-picker id="dpCalendarModeMonths" format-pattern="MMM y"></ui5-date-picker>
155
-
156
- <h3>DatePicker with format `yyyy` should open picker on years</h3>
157
- <ui5-date-picker id="dpCalendarModeYears" format-pattern="yyyy"></ui5-date-picker>
158
-
159
- </div>
160
- <script>
161
- var dp = document.getElementById('dp5');
162
- var labelChange = document.getElementById('lblChange');
163
- var labelLiveChange = document.getElementById('lblLiveChange');
164
-
165
- dp.addEventListener('click', function() { console.log('click')});
166
- dp.addEventListener('focus', function() {console.log('focus')});
167
- dp.addEventListener('dblclick', function() { console.log('dblclick')});
168
- dp.addEventListener('keydown', function() { console.log('keydown')});
169
- dp.addEventListener('blur', function() { console.log('blur')});
170
-
171
- dp.addEventListener('ui5-change', function(e) {
172
- console.log('change: ', e.detail);
173
- labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
174
- });
175
- dp.addEventListener('ui5-input', function(e) {
176
- console.log('input: ', e.detail);
177
- labelLiveChange.innerHTML = 'input: ' + JSON.stringify(e.detail);
178
- });
179
-
180
- var dpPrevent = document.getElementById('dpPrevent');
181
- var labelChangePrevent = document.getElementById('lblChangePrevent');
182
- var labelChangePreventTargetValue = document.getElementById('lblChangePreventTargetValue');
183
- var labelLiveChangePrevent = document.getElementById('lblLiveChangePrevent');
184
-
185
- dpPrevent.addEventListener('ui5-change', function(e) {
186
- e.preventDefault();
187
- console.log('change: ', e.detail);
188
- labelChangePreventTargetValue.innerHTML = 'target value on event fire: ' + e.target.value;
189
- labelChangePrevent.innerHTML = 'change: ' + JSON.stringify(e.detail);
190
- });
191
- dpPrevent.addEventListener('ui5-input', function(e) {
192
- console.log('input: ', e.detail);
193
- labelLiveChangePrevent.innerHTML = 'input: ' + JSON.stringify(e.detail);
194
- });
195
-
196
- $('#ui5-datepicker--startDate').on('ui5-input change', (function(e) {
197
- var dp = $('#ui5-datepicker--startDate')[0];
198
- dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Error');
199
- $('#startDate').val($('#ui5-datepicker--startDate').val());
200
- $('#startDate').trigger('change');
201
- }));
202
-
203
- var dp11 = document.getElementById('dp11');
204
-
205
- document.getElementById('b1').addEventListener("click", function(e) {
206
- dp11.setAttribute("value", dp11.formatValue(new Date(2018, 11, 11)));
207
- });
208
-
209
- </script>
210
- </body>
211
- </html>
@@ -1,109 +0,0 @@
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.fa62259e.js"></script>
19
- <link rel="stylesheet" href="/assets/DatePicker_test_page.3de901b4.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
- <h3>DatePicker with format `yyyy, dd/MM` should open picker on days</h3>
69
- <ui5-date-picker id="dpCalendarModeDays" format-pattern="yyyy, dd/MM"></ui5-date-picker>
70
-
71
- <h3>DatePicker with format `MMM y` should open picker on months</h3>
72
- <ui5-date-picker id="dpCalendarModeMonths" format-pattern="MMM y"></ui5-date-picker>
73
-
74
- <h3>DatePicker with format `yyyy` should open picker on years</h3>
75
- <ui5-date-picker id="dpCalendarModeYears" format-pattern="yyyy"></ui5-date-picker>
76
-
77
- <h3> DatePicker with no format pattern & min-max dates in ISO format</h3>
78
- <ui5-date-picker id="dpISOMinMaxDates" min-date="2019-09-01" max-date="2019-11-01"></ui5-date-picker>
79
-
80
- <section>
81
- <h3>Test accessibleName and accessibleNameRef</h3>
82
- <ui5-date-picker id="dpAriaLabel" accessible-name="Hello World"></ui5-date-picker>
83
- <br>
84
- <ui5-label id="infoText">info text</ui5-label>
85
- <ui5-date-picker id="dpAriaLabelledBy" accessible-name-ref="infoText"></ui5-date-picker>
86
- </section>
87
-
88
- <script>
89
- var counter = 0;
90
- var counterTomorrow = 0;
91
- function increaseCounter() {
92
- document.querySelector('#lbl').innerHTML = ++counter;
93
- }
94
-
95
- document.querySelector("#dp5").addEventListener("ui5-change", increaseCounter);
96
- document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
97
- document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
98
- document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
99
- document.querySelector('#lblTomorrowDate').innerHTML = e.target.liveValue;
100
- });
101
-
102
- var dp16 = document.getElementById('dp16');
103
-
104
- document.getElementById('b1').addEventListener("click", function(e) {
105
- dp16.setAttribute("value", dp16.formatValue(new Date(2018, 11, 11)));
106
- });
107
- </script>
108
- </body>
109
- </html>
@@ -1,67 +0,0 @@
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.fa62259e.js"></script>
27
- <link rel="stylesheet" href="/assets/DateRangePicker.0e44d4a3.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
- <h3>DateRange Picker with no format pattern & min-max dates in ISO format</h3>
53
- <ui5-daterange-picker id="daterange-picker8" min-date="2023-02-10" max-date="2023-07-22"></ui5-daterange-picker>
54
-
55
-
56
- </div>
57
- <script>
58
- document.getElementById('daterange-picker1').addEventListener('ui5-change', function(e) {
59
- document.getElementById("labelChange").innerHTML = Number(document.getElementById("labelChange").innerHTML) + 1;
60
- });
61
-
62
- document.getElementById('daterange-picker4').addEventListener('ui5-change', function(e) {
63
- document.getElementById("labelDate").innerHTML = e.detail.value;
64
- });
65
- </script>
66
- </body>
67
- </html>