@ui5/webcomponents 1.14.3 → 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 (129) hide show
  1. package/.vscode/diff/vulsCount.txt +1 -0
  2. package/.vscode/settings.json +3 -0
  3. package/package.json +7 -8
  4. package/LICENSE.txt +0 -201
  5. package/dist/assets/test/pages/ComboBox.html.81ae00e2.js +0 -1
  6. package/dist/assets/test/pages/Icon.html.1951ea7c.js +0 -1
  7. package/dist/assets/test/pages/Label.html.e50a04af.js +0 -4
  8. package/dist/assets/test/pages/Popups.html.d7a532db.js +0 -1
  9. package/dist/test/pages/72override.html +0 -33
  10. package/dist/test/pages/AnimanitionOff.html +0 -52
  11. package/dist/test/pages/Avatar.html +0 -264
  12. package/dist/test/pages/AvatarGroup.html +0 -376
  13. package/dist/test/pages/Badge.html +0 -75
  14. package/dist/test/pages/Breadcrumbs.html +0 -239
  15. package/dist/test/pages/BusyIndicator.html +0 -278
  16. package/dist/test/pages/Button.html +0 -273
  17. package/dist/test/pages/Calendar.html +0 -103
  18. package/dist/test/pages/Card.html +0 -347
  19. package/dist/test/pages/Carousel.html +0 -613
  20. package/dist/test/pages/CheckBox.html +0 -90
  21. package/dist/test/pages/ColorPalette.html +0 -126
  22. package/dist/test/pages/ColorPalettePopover.html +0 -141
  23. package/dist/test/pages/ColorPicker.html +0 -66
  24. package/dist/test/pages/ComboBox.html +0 -292
  25. package/dist/test/pages/Components.html +0 -106
  26. package/dist/test/pages/CoreControls.html +0 -203
  27. package/dist/test/pages/CoreControls_exp.html +0 -203
  28. package/dist/test/pages/CustomCSS.html +0 -55
  29. package/dist/test/pages/DatePicker.html +0 -211
  30. package/dist/test/pages/DatePicker_test_page.html +0 -109
  31. package/dist/test/pages/DateRangePicker.html +0 -67
  32. package/dist/test/pages/DateTimePicker.html +0 -199
  33. package/dist/test/pages/DateTimePicker_Timezone.html +0 -72
  34. package/dist/test/pages/DayPicker.html +0 -37
  35. package/dist/test/pages/Dialog.html +0 -813
  36. package/dist/test/pages/DialogLifecycle.html +0 -62
  37. package/dist/test/pages/DialogSemantic.html +0 -58
  38. package/dist/test/pages/Eventing.html +0 -33
  39. package/dist/test/pages/F6Test1.html +0 -42
  40. package/dist/test/pages/F6Test2.html +0 -42
  41. package/dist/test/pages/F6Test3.html +0 -39
  42. package/dist/test/pages/F6Test4.html +0 -46
  43. package/dist/test/pages/F6Test5.html +0 -42
  44. package/dist/test/pages/F6Test6.html +0 -39
  45. package/dist/test/pages/F6Test7.html +0 -36
  46. package/dist/test/pages/FileUploader.html +0 -138
  47. package/dist/test/pages/FormComponents.html +0 -76
  48. package/dist/test/pages/FormSupport.html +0 -59
  49. package/dist/test/pages/HCB.html +0 -45
  50. package/dist/test/pages/Icon.html +0 -278
  51. package/dist/test/pages/Icon_and_theming.html +0 -67
  52. package/dist/test/pages/Icon_custom.html +0 -26
  53. package/dist/test/pages/Input.html +0 -731
  54. package/dist/test/pages/InputFieldLabels.html +0 -355
  55. package/dist/test/pages/InputFieldMinWidth.html +0 -230
  56. package/dist/test/pages/InputIcons.html +0 -80
  57. package/dist/test/pages/Input_quickview.html +0 -204
  58. package/dist/test/pages/InputsAlignment.html +0 -131
  59. package/dist/test/pages/InputsLazyLoading.html +0 -244
  60. package/dist/test/pages/ItemNavigation.html +0 -94
  61. package/dist/test/pages/Kitchen.html +0 -637
  62. package/dist/test/pages/Kitchen.openui5.html +0 -570
  63. package/dist/test/pages/Label.html +0 -192
  64. package/dist/test/pages/Link.html +0 -201
  65. package/dist/test/pages/List.html +0 -465
  66. package/dist/test/pages/ListGrowing_Button.html +0 -64
  67. package/dist/test/pages/ListGrowing_Scroll.html +0 -93
  68. package/dist/test/pages/List_keyboard_support.html +0 -130
  69. package/dist/test/pages/List_test_page.html +0 -395
  70. package/dist/test/pages/LitKeyFunction.html +0 -40
  71. package/dist/test/pages/MemoryLeak.html +0 -78
  72. package/dist/test/pages/Menu.html +0 -161
  73. package/dist/test/pages/MessagePage.html +0 -39
  74. package/dist/test/pages/MessageStrip.html +0 -55
  75. package/dist/test/pages/MultiComboBox.html +0 -489
  76. package/dist/test/pages/MultiInput.html +0 -451
  77. package/dist/test/pages/MultiInput_Suggestions.html +0 -161
  78. package/dist/test/pages/OpenUI5-second.html +0 -60
  79. package/dist/test/pages/OpenUI5.html +0 -83
  80. package/dist/test/pages/OpenUI5Nightly.html +0 -83
  81. package/dist/test/pages/Panel.html +0 -226
  82. package/dist/test/pages/Popover.html +0 -658
  83. package/dist/test/pages/PopoverArrowBounds.html +0 -52
  84. package/dist/test/pages/Popups.html +0 -131
  85. package/dist/test/pages/ProgressIndicator.html +0 -151
  86. package/dist/test/pages/RTL.html +0 -118
  87. package/dist/test/pages/RadioButton.html +0 -201
  88. package/dist/test/pages/RangeSlider.html +0 -96
  89. package/dist/test/pages/RatingIndicator.html +0 -97
  90. package/dist/test/pages/ResizeHandler.html +0 -74
  91. package/dist/test/pages/ResponsivePopover.html +0 -267
  92. package/dist/test/pages/SegmentedButton.html +0 -151
  93. package/dist/test/pages/Select.html +0 -272
  94. package/dist/test/pages/Simple.html +0 -25
  95. package/dist/test/pages/Slider.html +0 -79
  96. package/dist/test/pages/SplitButton.html +0 -101
  97. package/dist/test/pages/StepInput.html +0 -189
  98. package/dist/test/pages/Switch.html +0 -97
  99. package/dist/test/pages/TabContainer.html +0 -904
  100. package/dist/test/pages/Table-perf-pure.html +0 -73
  101. package/dist/test/pages/Table-perf.html +0 -76
  102. package/dist/test/pages/Table.html +0 -2808
  103. package/dist/test/pages/Table2.html +0 -53
  104. package/dist/test/pages/TableAllPopin.html +0 -228
  105. package/dist/test/pages/TableCustomStyling.html +0 -89
  106. package/dist/test/pages/TableGrouping.html +0 -109
  107. package/dist/test/pages/TableGrowingWithButton.html +0 -805
  108. package/dist/test/pages/TableGrowingWithScroll.html +0 -801
  109. package/dist/test/pages/TableSelection.html +0 -445
  110. package/dist/test/pages/Test.html +0 -15
  111. package/dist/test/pages/TextArea.html +0 -222
  112. package/dist/test/pages/TimePicker.html +0 -89
  113. package/dist/test/pages/TimeSelection.html +0 -31
  114. package/dist/test/pages/Title.html +0 -60
  115. package/dist/test/pages/Toast.html +0 -111
  116. package/dist/test/pages/ToggleButton.html +0 -71
  117. package/dist/test/pages/Tokenizer.html +0 -91
  118. package/dist/test/pages/Tree.html +0 -307
  119. package/dist/test/pages/TreeDynamic.html +0 -56
  120. package/dist/test/pages/WheelSlider_Test_Page.html +0 -26
  121. package/dist/test/pages/base/AriaLabelHelper.html +0 -334
  122. package/dist/test/pages/base/DOMObserver.html +0 -20
  123. package/dist/test/pages/base/IconCollection.html +0 -23
  124. package/dist/test/pages/base/IconCollectionInCustomTheme.html +0 -25
  125. package/dist/test/pages/base/IgnoreCustomElements.html +0 -26
  126. package/dist/test/pages/base/InvisibleMessage.html +0 -44
  127. package/dist/test/pages/form.html +0 -123
  128. package/dist/test/pages/i18n-defaultLang.html +0 -31
  129. package/dist/test/pages/i18n-demo.html +0 -79
package/dist/test/pages/Dialog.html DELETED
@@ -1,813 +0,0 @@
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
-
8
- <title>Dialog</title>
9
-
10
- <script data-ui5-config type="application/json">
11
- {
12
- "language": "EN"
13
- }
14
- </script>
15
-
16
- <script>
17
- // delete Document.prototype.adoptedStyleSheets
18
- </script>
19
-
20
-
21
-
22
-
23
-
24
- <script type="module" crossorigin src="/assets/bundle.common.ad270030.js"></script>
25
- <link rel="stylesheet" href="/assets/Dialog.be6e9063.css">
26
- </head>
27
-
28
- <body>
29
- <ui5-checkbox text="Compact size" id="cbCompact"></ui5-checkbox>
30
- <ui5-checkbox text="Scrollable page" id="cbScrollable"></ui5-checkbox>
31
- <br>
32
- <br>
33
- <ui5-button id="btnOpenDialog">Open Stretched Dialog</ui5-button>
34
- <br>
35
- <br>
36
- <ui5-button id="btnOpenDialogNoPaddings">Open Stretched Dialog - no paddings</ui5-button>
37
- <br>
38
- <br>
39
- <ui5-button id="btnOpenDialogWithAttr">Open with Attribute</ui5-button>
40
- <br>
41
- <br>
42
- <ui5-button id="message">Open Message Dialog</ui5-button>
43
- <br>
44
- <br>
45
- <ui5-button id="prevent">Open Prevent closing Dialog</ui5-button>
46
- <br>
47
- <br>
48
- <ui5-button id="modals-open">Open Multiple modals</ui5-button>
49
- <br>
50
- <br>
51
- <ui5-button id="empty-open">Open empty dialog (no focusable element)</ui5-button>
52
- <br>
53
- <br>
54
- <ui5-button id="wide-open">Open wide dialog</ui5-button>
55
- <br>
56
- <br>
57
- <ui5-button id="wide-open2">Open wide dialog 2</ui5-button>
58
- <br>
59
- <br>
60
- <ui5-button id="draggable-open">Open draggable dialog</ui5-button>
61
- <br>
62
- <br>
63
- <ui5-button id="resizable-open">Open resizable dialog</ui5-button>
64
- <br>
65
- <br>
66
- <ui5-button id="resizable-custom-header-open">Open resizable dialog with custom header</ui5-button>
67
- <br>
68
- <br>
69
- <ui5-button id="draggable-and-resizable-open">Open draggable & resizable dialog</ui5-button>
70
- <br>
71
- <br>
72
- <ui5-button id="dynamic-open">Open dialog which is created dynamically</ui5-button>
73
- <br>
74
- <br>
75
- <ui5-button id="multiple-show">Open dialog calling show() multiple times</ui5-button>
76
-
77
- <ui5-block-layer></ui5-block-layer>
78
-
79
- <ui5-dialog id="msg-dialog" header-text="Message dialog" class="dialog1auto">
80
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
81
- That´s OpenUI5.</p>
82
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
83
- That´s OpenUI5.</p>
84
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
85
- That´s OpenUI5.</p>
86
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
87
- That´s OpenUI5.</p>
88
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
89
- That´s OpenUI5.</p>
90
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
91
- That´s OpenUI5.</p>
92
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
93
- That´s OpenUI5.</p>
94
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
95
- That´s OpenUI5.</p>
96
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
97
- That´s OpenUI5.</p>
98
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
99
- That´s OpenUI5.</p>
100
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
101
- That´s OpenUI5.</p>
102
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
103
- That´s OpenUI5.</p>
104
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
105
- That´s OpenUI5.</p>
106
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
107
- That´s OpenUI5.</p>
108
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
109
- That´s OpenUI5.</p>
110
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
111
- That´s OpenUI5.</p>
112
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
113
- That´s OpenUI5.</p>
114
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
115
- That´s OpenUI5.</p>
116
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
117
- That´s OpenUI5.</p>
118
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
119
- That´s OpenUI5.</p>
120
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
121
- That´s OpenUI5.</p>
122
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
123
- That´s OpenUI5.</p>
124
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
125
- That´s OpenUI5.</p>
126
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
127
- That´s OpenUI5.</p>
128
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
129
- That´s OpenUI5.</p>
130
-
131
- <div slot="footer" class="dialogFooter">
132
- <ui5-button design="Emphasized">OK</ui5-button>
133
- </div>
134
- </ui5-dialog>
135
-
136
- <ui5-dialog id="dlgAttr">
137
- <ui5-button id="btnCloseWithMethod">Close with Method</ui5-button>
138
- <ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
139
- </ui5-dialog>
140
-
141
- <ui5-dialog id="dialog" accessible-name="Resizable" stretch>
142
- <div slot="header">
143
- <ui5-button id="header-button">focus stop</ui5-button>
144
- <ui5-title id="tt" level="H1">Resizable</ui5-title>
145
-
146
- </div>
147
-
148
- <div class="dialog3auto">
149
- <ui5-title level="H3">Hello World!</ui5-title>
150
- </div>
151
-
152
- <ui5-select id="mySelect">
153
- <ui5-option>Hello</ui5-option>
154
- <ui5-option>World</ui5-option>
155
- </ui5-select>
156
-
157
- <ui5-textarea id="area" placeholder="Type some text" max-length="2" show-exceeded-text>
158
- </ui5-textarea>
159
-
160
- <div class="dialog3auto">
161
- <ui5-title level="H3">Hello World!</ui5-title>
162
- </div>
163
-
164
- <ui5-select>
165
- <ui5-option>Hello</ui5-option>
166
- <ui5-option>World</ui5-option>
167
- </ui5-select>
168
-
169
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
170
- </ui5-textarea>
171
-
172
- <div class="dialog3auto">
173
- <ui5-title level="H3">Hello World!</ui5-title>
174
- </div>
175
-
176
- <ui5-select>
177
- <ui5-option>Hello</ui5-option>
178
- <ui5-option>World</ui5-option>
179
- </ui5-select>
180
-
181
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
182
- </ui5-textarea>
183
-
184
-
185
- <div class="dialog3auto">
186
- <ui5-title level="H3">Hello World!</ui5-title>
187
- </div>
188
-
189
- <ui5-select>
190
- <ui5-option>Hello</ui5-option>
191
- <ui5-option>World</ui5-option>
192
- </ui5-select>
193
-
194
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
195
- </ui5-textarea>
196
-
197
-
198
- <div class="dialog3auto">
199
- <ui5-title level="H1">Hello World!</ui5-title>
200
- </div>
201
-
202
- <ui5-select>
203
- <ui5-option>Hello</ui5-option>
204
- <ui5-option>World</ui5-option>
205
- </ui5-select>
206
-
207
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
208
- </ui5-textarea>
209
-
210
-
211
- <div class="dialog3auto">
212
- <ui5-title level="H3">Hello World!</ui5-title>
213
- </div>
214
-
215
- <ui5-select>
216
- <ui5-option>Hello</ui5-option>
217
- <ui5-option>World</ui5-option>
218
- </ui5-select>
219
-
220
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
221
- </ui5-textarea>
222
-
223
-
224
- <div class="dialog3auto">
225
- <ui5-title level="H3">Hello World!</ui5-title>
226
- </div>
227
-
228
- <ui5-select>
229
- <ui5-option>Hello</ui5-option>
230
- <ui5-option>World</ui5-option>
231
- </ui5-select>
232
-
233
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
234
- </ui5-textarea>
235
-
236
- <div slot="footer" class="dialogFooter">
237
- <ui5-button id="btnCloseDialog">Close</ui5-button>
238
- </div>
239
- </ui5-dialog>
240
-
241
- <ui5-dialog id="dialogNoPaddings" header-text="No content paddings" stretch class="noContentPaddingsDialog">
242
- <div class="dialog3auto">
243
- <ui5-title level="H3">Hello World!</ui5-title>
244
- </div>
245
-
246
- <ui5-select id="mySelect">
247
- <ui5-option>Hello</ui5-option>
248
- <ui5-option>World</ui5-option>
249
- </ui5-select>
250
-
251
- <ui5-textarea id="area" placeholder="Type some text" max-length="2" show-exceeded-text>
252
- </ui5-textarea>
253
-
254
- <div class="dialog3auto">
255
- <ui5-title level="H3">Hello World!</ui5-title>
256
- </div>
257
-
258
- <ui5-select>
259
- <ui5-option>Hello</ui5-option>
260
- <ui5-option>World</ui5-option>
261
- </ui5-select>
262
-
263
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
264
- </ui5-textarea>
265
-
266
- <div class="dialog3auto">
267
- <ui5-title level="H3">Hello World!</ui5-title>
268
- </div>
269
-
270
- <ui5-select>
271
- <ui5-option>Hello</ui5-option>
272
- <ui5-option>World</ui5-option>
273
- </ui5-select>
274
-
275
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
276
- </ui5-textarea>
277
-
278
-
279
- <div class="dialog3auto">
280
- <ui5-title level="H3">Hello World!</ui5-title>
281
- </div>
282
-
283
- <ui5-select>
284
- <ui5-option>Hello</ui5-option>
285
- <ui5-option>World</ui5-option>
286
- </ui5-select>
287
-
288
- <ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
289
- </ui5-textarea>
290
-
291
- <div slot="footer" class="dialogFooter">
292
- <ui5-button id="btnCloseDialogNoPaddings">Close</ui5-button>
293
- </div>
294
-
295
- </ui5-dialog>
296
-
297
-
298
- <ui5-dialog id="prevent-dialog" header-text="Message dialog">
299
- <p>Prevent closing the dialog.</p>
300
-
301
- <div slot="footer" class="dialogFooter">
302
- <ui5-button design="Emphasized">OK</ui5-button>
303
- </div>
304
- </ui5-dialog>
305
-
306
- <ui5-dialog id="confirm-dialog">
307
- <p>Are you sure?</p>
308
- <div>
309
- <ui5-button id="yes">YES</ui5-button>
310
- <ui5-button id="no">NO</ui5-button>
311
- </div>
312
- </ui5-dialog>
313
-
314
- <ui5-dialog id="wide-dialog" header-text="Wide dialog" class="dialog6auto">
315
- <p>That´s OpenUI5.</p>
316
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
317
- That´s OpenUI5.</p>
318
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
319
- That´s OpenUI5.</p>
320
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
321
- That´s OpenUI5.</p>
322
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
323
- That´s OpenUI5.</p>
324
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
325
- That´s OpenUI5.</p>
326
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
327
- That´s OpenUI5.</p>
328
-
329
- <div slot="footer" class="dialogFooter">
330
- <ui5-button design="Emphasized">OK</ui5-button>
331
- </div>
332
- </ui5-dialog>
333
-
334
- <ui5-dialog id="wide-dialog2" header-text="Wide dialog" stretch class="dialog6auto">
335
- <p>That´s OpenUI5.</p>
336
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
337
- That´s OpenUI5.</p>
338
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
339
- That´s OpenUI5.</p>
340
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
341
- That´s OpenUI5.</p>
342
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
343
- That´s OpenUI5.</p>
344
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
345
- That´s OpenUI5.</p>
346
- <p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
347
- That´s OpenUI5.</p>
348
-
349
- <div slot="footer" class="dialogFooter">
350
- <ui5-button design="Emphasized">OK</ui5-button>
351
- </div>
352
- </ui5-dialog>
353
-
354
- <ui5-dialog id="draggable-dialog" accessible-name="Draggable" draggable>
355
- <div id="tlt" slot="header" class="dialog7auto">Draggable dialog header</div>
356
-
357
- <p>Hint: Move this dialog around the screen by dragging it by its header or use the arrow keys.</p>
358
- <p>This feature is available only on Desktop.</p>
359
-
360
- <div slot="footer" class="dialogFooter">
361
- <ui5-button id="draggable-close" design="Emphasized">OK</ui5-button>
362
- </div>
363
- </ui5-dialog>
364
-
365
- <ui5-dialog id="resizable-dialog" header-text="Resizable dialog header" resizable>
366
- <p>Hint: Resize this dialog by dragging it by its resize handle or use shift+arrow keys.</p>
367
- <p>This feature is available only on Desktop.</p>
368
- <div slot="footer" class="dialogFooter">
369
- <ui5-button id="resizable-close" design="Emphasized">OK</ui5-button>
370
- </div>
371
- </ui5-dialog>
372
-
373
- <ui5-dialog id="resizable-dialog-custom-header" resizable>
374
- <div slot="header">
375
- <ui5-title level="H1">Resizable dialog with custom Header</ui5-title>
376
- </div>
377
- <p>Content</p>
378
- <div slot="footer" class="dialogFooter">
379
- <ui5-button id="resizable-custom-header-close" design="Emphasized">OK</ui5-button>
380
- </div>
381
- </ui5-dialog>
382
-
383
- <ui5-dialog id="draggable-and-resizable-dialog" header-text="Draggable & resizable dialog header" draggable resizable>
384
- <p>Hint: Move this dialog around the screen by dragging it by its header or use the arrow keys.</p>
385
- <p>Resize this dialog by dragging it by its resize handle or use shift+arrow keys.</p>
386
- <p>This feature is available only on Desktop.</p>
387
-
388
- <div slot="footer" class="dialogFooter tallFooter">
389
- <ui5-button id="draggable-and-resizable-close" design="Emphasized">Close</ui5-button>
390
- </div>
391
- </ui5-dialog>
392
-
393
- <ui5-popover header-text="My Heading" id="pop" class="dialog8auto" placement-type="Top">
394
- <!-- <div slot="header">
395
- Hello World
396
- </div> -->
397
-
398
- <ui5-list>
399
- <ui5-li>Hello</ui5-li>
400
- <ui5-li>World</ui5-li>
401
- <ui5-li>Again</ui5-li>
402
- </ui5-list>
403
-
404
- <br>
405
- <br>
406
-
407
- <ui5-button id="dangerDialogBtn">Open Dialog</ui5-button>
408
-
409
-
410
-
411
- <br>
412
- <br>
413
-
414
- <ui5-select>
415
- <ui5-option>Hello</ui5-option>
416
- <ui5-option>World</ui5-option>
417
- </ui5-select>
418
-
419
- <br>
420
- <br>
421
-
422
- <!-- <ui5-date-picker></ui5-date-picker> -->
423
-
424
- <div slot="footer">
425
- Hello World Footer
426
- </div>
427
- </ui5-popover>
428
-
429
- <ui5-dialog placement-type="Bottom" id='danger'>
430
- <ui5-list>
431
- <ui5-li>Hello</ui5-li>
432
- <ui5-li>World</ui5-li>
433
- <ui5-li>Again</ui5-li>
434
- </ui5-list>
435
-
436
- <br>
437
- <br>
438
-
439
- <ui5-button id='bigDanger'>Super Danger !</ui5-button>
440
-
441
-
442
- </ui5-dialog>
443
-
444
- <ui5-popover id='bigDangerPop'>
445
- <ui5-list>
446
- <ui5-li>Hello</ui5-li>
447
- <ui5-li>World</ui5-li>
448
- <ui5-li>Again</ui5-li>
449
- </ui5-list>
450
- </ui5-popover>
451
-
452
- <ui5-dialog id="empty-dialog">Empty</ui5-dialog>
453
-
454
- <br>
455
- <br>
456
-
457
- <ui5-button id="btn-acc-name-ref">Dialog with accessibleNameRef</ui5-button>
458
- <ui5-label id="label-acc-name-ref">Some label</ui5-label>
459
- <ui5-dialog id="dialog-acc-name-ref" accessible-name-ref="label-acc-name-ref" stretch>
460
- <div slot="header">
461
- <ui5-title level="H1">Header</ui5-title>
462
- </div>
463
- <span>Hello World!</span>
464
- </ui5-dialog>
465
- <br>
466
- <br>
467
- <div>
468
- <ui5-label>Focus circularity</ui5-label>
469
- <ui5-button id="btn-focus-circ">Dialog focus circularity</ui5-button>
470
- <ui5-dialog id="focus-circ">
471
- <ui5-busy-indicator slot="header">
472
- <ui5-button id="active-btn-1">1</ui5-button>
473
- </ui5-busy-indicator>
474
- <ui5-busy-indicator slot="footer">
475
- <ui5-button id="active-btn-2">2</ui5-button>
476
- </ui5-busy-indicator>
477
- </ui5-dialog>
478
- </div>
479
- <div>
480
- <ui5-label>Dialog states</ui5-label>
481
- </div>
482
- <ui5-button id="btn-error-state">Dialog with Error State</ui5-button>
483
- <ui5-dialog id="dialog-error-state" state="Error">
484
- <div slot="header">
485
- <ui5-title level="H1">Error</ui5-title>
486
- </div>
487
- <span>Hello World!</span>
488
- </ui5-dialog>
489
-
490
- <ui5-button id="btn-info-state">Dialog with Information State</ui5-button>
491
- <ui5-dialog id="dialog-info-state" state="Information">
492
- <div slot="header">
493
- <ui5-title level="H1">Information</ui5-title>
494
- </div>
495
- <span>Hello World!</span>
496
- </ui5-dialog>
497
-
498
- <ui5-button id="btn-success-state">Dialog with Success State</ui5-button>
499
- <ui5-dialog id="dialog-success-state" state="Success">
500
- <div slot="header">
501
- <ui5-title level="H1">Success</ui5-title>
502
- </div>
503
- <span>Hello World!</span>
504
- </ui5-dialog>
505
-
506
- <ui5-button id="btn-warn-state">Dialog with Warning State</ui5-button>
507
- <ui5-dialog id="dialog-warn-state" state="Warning">
508
- <div slot="header">
509
- <ui5-title level="H1">Warning</ui5-title>
510
- </div>
511
- <span>Hello World!</span>
512
- </ui5-dialog>
513
- </div>
514
- <br>
515
- <div>
516
- <div>
517
- <ui5-label>Dialog roles</ui5-label>
518
- </div>
519
- <ui5-button id="btn-role-default">Error State, no role set</ui5-button>
520
- <ui5-dialog id="dialog-error-no-role" state="Error">
521
- <div slot="header">
522
- <ui5-title level="H1">Error</ui5-title>
523
- </div>
524
- <span>Hello World!</span>
525
- </ui5-dialog>
526
-
527
- <ui5-button id="btn-role-alert">No State, 'AlertDialog' role set</ui5-button>
528
- <ui5-dialog id="dialog-no-state-alert-role" accessible-role="AlertDialog">
529
- <div slot="header">
530
- <ui5-title level="H1">No state</ui5-title>
531
- </div>
532
- <span>Hello World!</span>
533
- </ui5-dialog>
534
-
535
- <ui5-button id="btn-role-none">Role 'None' set</ui5-button>
536
- <ui5-dialog id="dialog-none-role" accessible-role="None">
537
- <div slot="header">
538
- <ui5-title level="H1">Role 'None'</ui5-title>
539
- </div>
540
- <span>Hello World!</span>
541
- </ui5-dialog>
542
-
543
- <ui5-button id="btn-role-alert-success-state">Success State, 'AlertDialog' role set</ui5-button>
544
- <ui5-dialog id="dialog-success-state-alert-role" state="Success" accessible-role="AlertDialog">
545
- <div slot="header">
546
- <ui5-title level="H1">Success</ui5-title>
547
- </div>
548
- <span>Hello World!</span>
549
- </ui5-dialog>
550
-
551
- </div>
552
- <br>
553
- <ui5-button id="dialogOverDialogBtn">Dialog over a Dialog</ui5-button>
554
- <ui5-dialog id="dialogOverDialog1">
555
- <div slot="header">
556
- <ui5-title level="H1">Header 1</ui5-title>
557
- </div>
558
- <ui5-button id="dialogOverDialog1Btn">Open a new Dialog</ui5-button>
559
- </ui5-dialog>
560
- <ui5-dialog id="dialogOverDialog2">
561
- <div slot="header">
562
- <ui5-title level="H1">Header 2</ui5-title>
563
- </div>
564
- <ui5-button id="dialogOverDialog2Btn">Open a new Dialog</ui5-button>
565
- </ui5-dialog>
566
- <ui5-dialog id="dialogOverDialog3">
567
- <div slot="header">
568
- <ui5-title level="H1">Header 3</ui5-title>
569
- </div>
570
- <ui5-button id="dialogOverDialog3Btn">Close</ui5-button>
571
- </ui5-dialog>
572
- <br>
573
- <!-- Sample when Dialog is created in order different than "header, content, footer" sequence -->
574
- <ui5-button id="dialogFocus">Dialog Focus</ui5-button>
575
- <ui5-dialog id="dialogFocus1">
576
- <span>Some message</span>
577
- <ui5-button id="fistButtonInDialog">Confirm</ui5-button>
578
-
579
- <div slot="header">Header text</div>
580
-
581
- <div slot="footer" class="dialog-footer">
582
- <div style="flex: 1"></div>
583
- <ui5-button id="closeDialogFocusButton" design="Emphasized">Close</ui5-button>
584
- </div>
585
- </ui5-dialog>
586
- <br>
587
- <div>
588
- <ui5-title level="H3">Open Dialog from list</ui5-title>
589
- <ui5-list id="listContainerId" mode="SingleSelect">
590
- <ui5-li>Test1</ui5-li>
591
- <ui5-li id="listContainerItemId">Test2</ui5-li>
592
- <ui5-li>Test3</ui5-li>
593
- </ui5-list>
594
- <ui5-dialog id="listContainerDialogId">
595
- <ui5-button id="listContainerDialogCloseBtnId">Close</ui5-button>
596
- </ui5-dialog>
597
- <script>
598
- const listContainer = document.getElementById("listContainerId");
599
- const listContainerDialog = document.getElementById("listContainerDialogId");
600
- const listContainerDialogCloseBtn = document.getElementById("listContainerDialogCloseBtnId");
601
-
602
- listContainer.addEventListener("ui5-selectionChange", function (event) {
603
- listContainerDialog.show();
604
- });
605
-
606
- listContainerDialogCloseBtn.addEventListener("click", function (event) {
607
- listContainerDialog.close();
608
- });
609
- </script>
610
- </div>
611
-
612
- <div id="scrollHelper" class="dialog9scrollHelper">
613
- <span>Scroll Helper</span>
614
- <ui5-button id="scrolledBtn" class="scrolledBtn">open</ui5-button>
615
- </div>
616
-
617
- <script>
618
- cbCompact.addEventListener("ui5-change", function () {
619
- document.body.classList.toggle("ui5-content-density-compact", cbCompact.checked);
620
- });
621
-
622
- cbScrollable.addEventListener("ui5-change", function () {
623
- console.error("change");
624
- scrollHelper.style.display = cbScrollable.checked ? "block" : "none";
625
- });
626
-
627
- let preventClosing = true;
628
-
629
- btnOpenDialog.addEventListener("click", function () {
630
- dialog.show();
631
- });
632
-
633
- const focusCirBtn = document.getElementById("btn-focus-circ");
634
- const focusCircDialog = document.getElementById("focus-circ");
635
-
636
- focusCirBtn.addEventListener("click", function () {
637
- focusCircDialog.show();
638
- });
639
-
640
- btnOpenDialogNoPaddings.addEventListener("click", function () {
641
- window["dialogNoPaddings"].show();
642
- });
643
-
644
- btnCloseDialog.addEventListener("click", function () {
645
- dialog.close();
646
- });
647
-
648
- btnOpenDialogWithAttr.addEventListener("click", function () {
649
- dlgAttr.setAttribute("open", "");
650
- });
651
-
652
- btnCloseWithMethod.addEventListener("click", function () {
653
- dlgAttr.close();
654
- });
655
-
656
- btnCloseWithAttr.addEventListener("click", function () {
657
- dlgAttr.removeAttribute("open");
658
- });
659
-
660
- btnCloseDialogNoPaddings.addEventListener("click", function () {
661
- window["dialogNoPaddings"].close();
662
- });
663
-
664
- prevent.addEventListener("click", function () {
665
- window["prevent-dialog"].show();
666
- });
667
-
668
- message.addEventListener("click", function () {
669
- window["msg-dialog"].show();
670
- });
671
-
672
- window["prevent-dialog"].addEventListener("ui5-beforeClose", function (event) {
673
- if (preventClosing) {
674
- event.preventDefault();
675
- window["confirm-dialog"].show();
676
- }
677
-
678
- if (!preventClosing) {
679
- preventClosing = true;
680
- }
681
- });
682
-
683
- yes.addEventListener("click", function (event) {
684
- preventClosing = false;
685
- window["confirm-dialog"].close();
686
- window["prevent-dialog"].close();
687
- });
688
-
689
- no.addEventListener("click", function (event) {
690
- window["confirm-dialog"].close();
691
- preventClosing = true;
692
- });
693
-
694
- window["modals-open"].addEventListener("click", function (event) { pop.showAt(event.target) });
695
-
696
- dangerDialogBtn.addEventListener('click', function (event) {
697
- danger.show();
698
- });
699
-
700
- bigDanger.addEventListener('click', function (event) {
701
- bigDangerPop.showAt(bigDanger);
702
- });
703
-
704
- window["empty-open"].addEventListener("click", function () { window["empty-dialog"].show(); });
705
- window["wide-open"].addEventListener("click", function () { window["wide-dialog"].show(); });
706
- window["wide-open2"].addEventListener("click", function () { window["wide-dialog2"].show(); });
707
- window["draggable-open"].addEventListener("click", function () { window["draggable-dialog"].show(); });
708
- window["draggable-close"].addEventListener("click", function () { window["draggable-dialog"].close(); });
709
- window["resizable-open"].addEventListener("click", function () { window["resizable-dialog"].show(); });
710
- window["resizable-close"].addEventListener("click", function () { window["resizable-dialog"].close(); });
711
- window["resizable-custom-header-open"].addEventListener("click", function () { window["resizable-dialog-custom-header"].show(); });
712
- window["resizable-custom-header-close"].addEventListener("click", function () { window["resizable-dialog-custom-header"].close(); });
713
- window["draggable-and-resizable-open"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].show(); });
714
- window["draggable-and-resizable-close"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].close(); });
715
-
716
- window["dynamic-open"].addEventListener("click", function () {
717
- var dialog = document.createElement("ui5-dialog"),
718
- button = document.createElement("ui5-button"),
719
- separator = document.createElement("div")
720
- input = document.createElement("ui5-input");
721
-
722
- button.setAttribute("id", "dynamic-dialog-close-button");
723
- button.appendChild(document.createTextNode("Close"));
724
- button.addEventListener("click", function () {
725
- dialog.close();
726
- });
727
-
728
- dialog.setAttribute("id", "dynamic-dialog");
729
- dialog.appendChild(button);
730
-
731
- separator.style.height = "200px";
732
- dialog.appendChild(separator);
733
-
734
- dialog.appendChild(input);
735
-
736
- document.body.appendChild(dialog);
737
-
738
- dialog.show();
739
- });
740
-
741
- window["multiple-show"].addEventListener("click", function () {
742
- dialog.show();
743
- dialog.show();
744
- });
745
-
746
- window["btn-acc-name-ref"].addEventListener("click", function () {
747
- window["dialog-acc-name-ref"].show();
748
- });
749
-
750
- window["scrolledBtn"].addEventListener("click", function () {
751
- window["dialog"].show();
752
- });
753
-
754
- window["btn-error-state"].addEventListener("click", function () {
755
- window["dialog-error-state"].show();
756
- });
757
-
758
- window["btn-info-state"].addEventListener("click", function () {
759
- window["dialog-info-state"].show();
760
- });
761
-
762
- window["btn-success-state"].addEventListener("click", function () {
763
- window["dialog-success-state"].show();
764
- });
765
-
766
- window["btn-warn-state"].addEventListener("click", function () {
767
- window["dialog-warn-state"].show();
768
- });
769
-
770
- window["btn-role-default"].addEventListener("click", function () {
771
- window["dialog-error-no-role"].show();
772
- });
773
-
774
- window["btn-role-alert"].addEventListener("click", function () {
775
- window["dialog-no-state-alert-role"].show();
776
- });
777
-
778
- window["btn-role-none"].addEventListener("click", function () {
779
- window["dialog-none-role"].show();
780
- });
781
-
782
- window["btn-role-alert-success-state"].addEventListener("click", function () {
783
- window["dialog-success-state-alert-role"].show();
784
- });
785
-
786
- window["dialogOverDialogBtn"].addEventListener("click", function () {
787
- window["dialogOverDialog1"].open = true;
788
- });
789
-
790
- window["dialogOverDialog1Btn"].addEventListener("click", function () {
791
- window["dialogOverDialog2"].open = true;
792
- });
793
-
794
- window["dialogOverDialog2Btn"].addEventListener("click", function () {
795
- window["dialogOverDialog3"].open = true;
796
- });
797
-
798
- window["dialogOverDialog3Btn"].addEventListener("click", function () {
799
- window["dialogOverDialog3"].open = false;
800
- });
801
-
802
- window["dialogFocus"].addEventListener("click", function () {
803
- window["dialogFocus1"].open = true;
804
- });
805
-
806
- window["closeDialogFocusButton"].addEventListener("click", function () {
807
- window["dialogFocus1"].close();
808
- });
809
-
810
- </script>
811
- </body>
812
-
813
- </html>