@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
package/dist/test/pages/InputFieldLabels.html DELETED
@@ -1,355 +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" />
7
- <title>ui5-input</title>
8
-
9
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
10
- </head>
11
-
12
- <style>
13
- html,
14
- body {
15
- margin: 0;
16
- padding: 0;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- body {
22
- padding: 1rem;
23
- box-sizing: border-box;
24
- }
25
-
26
- .wrapper {
27
- padding: 0.5rem;
28
- box-sizing: border-box;
29
- border: 1px #e1e1e1 dashed;
30
- display: flex;
31
- justify-content: center;
32
- align-items: center;
33
- flex-direction: column;
34
- margin: 0;
35
- }
36
-
37
- .field {
38
- margin-top: 0.25rem;
39
- display: block;
40
- max-width: 100%;
41
- }
42
-
43
- .fields {
44
- padding: 1rem 2rem;
45
- margin-bottom: 2rem;
46
- background-color: #e1e1e1;
47
- border-bottom: 1px solid #888888;
48
- }
49
-
50
- .field,
51
- .fields {
52
- width: 85%;
53
- max-width: 100%;
54
- }
55
-
56
- h4 {
57
- text-align: start;
58
- border-bottom: 1px solid #2f2f2f;
59
- }
60
-
61
- .actual-html {
62
- color: cadetblue;
63
- }
64
- </style>
65
-
66
- <body>
67
- <div class="wrapper">
68
- <div class="info"><ui5-button id="btnShow">Show Latest</ui5-button></div>
69
- <div class="fields">
70
- <h4>Label-For Tests</h4>
71
- <div class="info">
72
- <ui5-label id="lblDesc1" for="myInput">Description that will change</ui5-label>
73
- </div>
74
- <div class="info">
75
- <ui5-label id="lblDesc2" for="myInput">Another description</ui5-label>
76
- </div>
77
- <div class="info">
78
- <ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
79
- </div>
80
- <div class="info">
81
- <ui5-label id="lblDesc3" for="myInput">
82
- Description that will be removed</ui5-label>
83
- </div>
84
- <div class="info"><label for="myInput">DescLabel</label></div>
85
- <div class="info"><ui5-button id="btnChange">Change Desc</ui5-button></div>
86
- <div class="info"><ui5-button id="btnChange11">Remove for attr from Another Description</ui5-button></div>
87
- <div class="info"><ui5-button id="btnRemoveInput">Remove input</ui5-button></div>
88
- <div id="actualLabel1">Actual Desc from myInput:</div>
89
- <div class="actual-html" id="actualInput1"></div>
90
- </div>
91
- <div class="fields">
92
- <h4>Input accessibleNameRef Tests</h4>
93
- <div class="info">
94
- lblEnterName1: &nbsp;<ui5-label id="lblEnterName1">First Label Desc</ui5-label>
95
- </div>
96
- <div class="info">
97
- lblEnterName2: &nbsp; <ui5-label id="lblEnterName2">Second Label Desc</ui5-label>
98
- </div>
99
- <div class="info">
100
- lblEnterName3: &nbsp; <ui5-label id="lblEnterName3">This label description stays until removed</ui5-label>
101
- </div>
102
- <div class="info">
103
- <ui5-input id="inputEnterName" accessible-name-ref="lblEnterName1 lblEnterName3" placeholder="Enter your name"
104
- class="field"></ui5-input>
105
- </div>
106
- <div class="info"><ui5-button id="btnChange2">Change Desc lblEnterName1</ui5-button>&nbsp;<ui5-button id="btnChange22">Change Desc lblEnterName2</ui5-button></div>
107
- <div class="info"><ui5-button id="btnChange3">Swap Accessible Name Ref 1 and 2</ui5-button></div>
108
- <div class="info"><ui5-button id="btnChange35">Remove lblEnterName3 from accessible-name-ref</ui5-button></div>
109
- <div class="actual-desc" id="actualLabel2">Actual Desc from inputEnterName:</div>
110
- <div class="actual-html" id="actualInput2"></div>
111
- </div>
112
- <div class="fields">
113
- <h4>Input accessibleName and accessibleNameRef Tests <ui5-button class="show-btn">Show Latest</ui5-button></h4>
114
- <div class="info">
115
- lblEnterDesc1: &nbsp; <ui5-label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</ui5-label>
116
- </div>
117
- <div class="info">
118
- lblEnterDesc3: &nbsp; <ui5-label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</ui5-label>
119
- </div>
120
- <div class="info">
121
- <ui5-input id="inputEnterDesc" accessible-name="Some description added by accessibleName" placeholder="Enter description"
122
- class="field"></ui5-input>
123
- </div>
124
- <div class="info"><ui5-button id="btnChange4">Toggle AccessibleName Value</ui5-button></div>
125
- <div class="info"><ui5-button id="btnChange5">Remove AccessibleName Attribute</ui5-button></div>
126
- <div class="info"><ui5-button id="btnChange6">Add Accessible Name Ref</ui5-button></div>
127
- <div class="actual-desc" id="actualLabel3">Actual Desc from inputEnterDesc:</div>
128
- <div class="actual-html" id="actualInput3"></div>
129
- </div>
130
- <div class="fields">
131
- <h4>Three inputs with same label accessibleNameRef Tests <ui5-button class="show-btn">Show Latest</ui5-button></h4>
132
- <div class="info">
133
- lblTestDesc: &nbsp; <ui5-label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</ui5-label>
134
- </div>
135
- <div class="info">
136
- <ui5-input id="testInput1" placeholder="Enter description1" class="field"></ui5-input>
137
- <ui5-input id="testInput2" accessible-name-ref="lblTestDesc" accessible-name="Hello" placeholder="Enter description2" class="field"></ui5-input>
138
- <ui5-input id="testInput3" accessible-name-ref="lblTestDesc" placeholder="Enter description3" class="field"></ui5-input>
139
- </div>
140
- <div class="info"><ui5-button id="btnChange71">Remove For Attribute On Label</ui5-button></div>
141
- <div class="info"><ui5-button id="btnChange72">Remove AccessibleNameRef Attribute For Input 2</ui5-button></div>
142
- <div class="info"><ui5-button id="btnChange73">Remove AccessibleNameRef Attribute For Input 3</ui5-button></div>
143
- <div class="info"><ui5-button id="btnChange74">Change Desc</ui5-button></div>
144
- <div class="actual-desc" id="actualLabel41">Actual Desc from testInput1:</div>
145
- <div class="actual-desc" id="actualLabel42">Actual Desc from testInput2:</div>
146
- <div class="actual-desc" id="actualLabel43">Actual Desc from testInput3:</div>
147
- <div class="actual-html" id="actualInput41"></div>
148
- <div class="actual-html" id="actualInput42"></div>
149
- <div class="actual-html" id="actualInput43"></div>
150
- </div>
151
- </div>
152
-
153
- <script>
154
- function showAriaLabelForInput(inputId, labelId) {
155
- const shadowRoot = document.getElementById(inputId).shadowRoot;
156
- const innerInput = shadowRoot.querySelector(".ui5-input-inner");
157
- const ariaLabel = innerInput.getAttribute("aria-label");
158
- document.getElementById(labelId).innerHTML = `Actual ariaLabel from ${inputId}: ${ariaLabel}`;
159
- const actualInputHTML = document.getElementById(labelId.replace('Label','Input'));
160
- if(actualInputHTML) {
161
- actualInputHTML.innerHTML = `<code>${innerInput.outerHTML.replace('<','&lt;').replace('>','&gt;')}</code>`;
162
- }
163
- }
164
-
165
-
166
- function showNow() {
167
- showAriaLabelForInput("myInput", "actualLabel1");
168
- showAriaLabelForInput("inputEnterName", "actualLabel2");
169
- showAriaLabelForInput("inputEnterDesc", "actualLabel3");
170
- showAriaLabelForInput("testInput1", "actualLabel41");
171
- showAriaLabelForInput("testInput2", "actualLabel42");
172
- showAriaLabelForInput("testInput3", "actualLabel43");
173
- }
174
-
175
- function show() {
176
- setTimeout(() => { showNow(); }, 200);
177
- }
178
-
179
-
180
- let counterMyInput = 0;
181
-
182
- const btnChange = document.getElementById("btnChange");
183
- btnChange.addEventListener("click", () => {
184
- const lblDesc1 = document.getElementById("lblDesc1");
185
- const lblDesc2 = (document.getElementById("lblDesc2").for =
186
- "other");
187
- const lblDesc3 = document.getElementById("lblDesc3");
188
- lblDesc3?.remove();
189
- lblDesc1.innerHTML =
190
- "Desc" + (++counterMyInput);
191
- show();
192
- });
193
-
194
-
195
- const btnChange11 = document.getElementById("btnChange11");
196
- btnChange11.addEventListener("click", () => {
197
- document.getElementById("lblDesc2").for = "";
198
- show();
199
- });
200
-
201
-
202
-
203
- let counterEnterName = 0;
204
- let counterEnterName2 = 0;
205
-
206
- const btnChange2 = document.getElementById("btnChange2");
207
- btnChange2.addEventListener("click", () => {
208
- const lblEnterName = document.getElementById("lblEnterName1");
209
- lblEnterName.innerHTML =
210
- "First Label Desc " + (++counterEnterName);
211
- show();
212
- });
213
-
214
- const btnChange22 = document.getElementById("btnChange22");
215
- btnChange22.addEventListener("click", () => {
216
- const lblEnterName = document.getElementById("lblEnterName2");
217
- lblEnterName.innerHTML =
218
- "Second Label Desc " + (++counterEnterName2);
219
- show();
220
- });
221
-
222
- const btnChange3 = document.getElementById("btnChange3");
223
- btnChange3.addEventListener("click", () => {
224
- const inputEnterName = document.getElementById("inputEnterName");
225
- let refValue = inputEnterName['accessibleNameRef'];
226
- if(refValue.indexOf('1')!==-1) { refValue = refValue.replace('1', '2'); }
227
- else { refValue = refValue.replace('2', '1'); }
228
- inputEnterName['accessibleNameRef']=refValue;
229
- show();
230
- });
231
-
232
- const btnChange35 = document.getElementById("btnChange35");
233
- btnChange35.addEventListener("click", () => {
234
- const inputEnterName = document.getElementById("inputEnterName");
235
- let refValue = inputEnterName['accessibleNameRef'];
236
- if(refValue.indexOf('lblEnterName3')!==-1) {
237
- refValue = refValue.replace(' lblEnterName3', '');
238
- btnChange35.innerHTML = btnChange35.innerHTML.replace('Remove','Add');
239
- }
240
- else {
241
- refValue = refValue + ' lblEnterName3';
242
- btnChange35.innerHTML = btnChange35.innerHTML.replace('Add','Remove');
243
- }
244
- inputEnterName['accessibleNameRef']=refValue;
245
- show();
246
- });
247
-
248
-
249
-
250
- const btnChange4 = document.getElementById("btnChange4");
251
- btnChange4.addEventListener("click", () => {
252
- const inputEnterDesc = document.getElementById("inputEnterDesc");
253
- let accessibleName = inputEnterDesc['accessibleName'];
254
- if(accessibleName.includes('Some')) {
255
- accessibleName = accessibleName.replace('Some','Another');
256
- } else {
257
- accessibleName = accessibleName.replace('Another', 'Some');
258
- }
259
- inputEnterDesc['accessibleName'] = accessibleName;
260
- show();
261
- });
262
-
263
- const btnChange5 = document.getElementById("btnChange5");
264
- btnChange5.addEventListener("click", () => {
265
- const inputEnterDesc = document.getElementById("inputEnterDesc");
266
- let accessibleName = inputEnterDesc['accessibleName'];
267
- if(accessibleName.length) {
268
- accessibleName = '';
269
- btnChange5.innerHTML = btnChange5.innerHTML.replace('Remove','Add');
270
- } else {
271
- accessibleName = 'Some description added by accessibleName'
272
- btnChange5.innerHTML = btnChange5.innerHTML.replace('Add', 'Remove');
273
- }
274
- inputEnterDesc['accessibleName'] = accessibleName;
275
- show();
276
- });
277
-
278
- const btnChange6 = document.getElementById("btnChange6");
279
- btnChange6.addEventListener("click", () => {
280
- const inputEnterDesc = document.getElementById("inputEnterDesc");
281
- const accessibleNameRef = inputEnterDesc['accessibleNameRef'];
282
- if(accessibleNameRef==="") {
283
- inputEnterDesc['accessibleNameRef']="lblEnterDesc3";
284
- btnChange6.innerHTML = btnChange6.innerHTML.replace('Add','Remove');
285
- } else {
286
- inputEnterDesc['accessibleNameRef']="";
287
- btnChange6.innerHTML = btnChange6.innerHTML.replace('Remove','Add');
288
- }
289
- show();
290
- });
291
-
292
- const btnChange71 = document.getElementById("btnChange71");
293
- btnChange71.addEventListener("click", () => {
294
- if(document.getElementById("lblTestDesc").for === "testInput1") {
295
- document.getElementById("lblTestDesc").for = "";
296
- btnChange71.innerHTML = btnChange71.innerHTML.replace('Remove','Add');
297
- } else {
298
- document.getElementById("lblTestDesc").for = "testInput1";
299
- btnChange71.innerHTML = btnChange71.innerHTML.replace('Add','Remove');
300
- }
301
- show();
302
- });
303
-
304
- const btnChange72 = document.getElementById("btnChange72");
305
- btnChange72.addEventListener("click", () => {
306
- const inputEnterName = document.getElementById("testInput2");
307
- let refValue = inputEnterName['accessibleNameRef'];
308
- if(refValue.indexOf('lblTestDesc')!==-1) {
309
- refValue = refValue.replace('lblTestDesc', '');
310
- btnChange72.innerHTML = btnChange72.innerHTML.replace('Remove','Add');
311
- }
312
- else {
313
- refValue = refValue + 'lblTestDesc';
314
- btnChange72.innerHTML = btnChange72.innerHTML.replace('Add','Remove');
315
- }
316
- inputEnterName['accessibleNameRef']=refValue;
317
- show();
318
- });
319
-
320
- const btnChange73 = document.getElementById("btnChange73");
321
- btnChange73.addEventListener("click", () => {
322
- const inputEnterName = document.getElementById("testInput3");
323
- let refValue = inputEnterName['accessibleNameRef'];
324
- if(refValue.indexOf('lblTestDesc')!==-1) {
325
- refValue = refValue.replace('lblTestDesc', '');
326
- btnChange73.innerHTML = btnChange73.innerHTML.replace('Remove','Add');
327
- }
328
- else {
329
- refValue = refValue + 'lblTestDesc';
330
- btnChange73.innerHTML = btnChange73.innerHTML.replace('Add','Remove');
331
- }
332
- inputEnterName['accessibleNameRef']=refValue;
333
- show();
334
- });
335
-
336
- const btnRemoveInput = document.getElementById("btnRemoveInput");
337
- btnRemoveInput.addEventListener("click", () => {
338
- document.getElementById("myInput").remove();
339
- });
340
-
341
-
342
- const btnShow = document.getElementById("btnShow");
343
- btnShow.addEventListener("click", () => {
344
- show();
345
- });
346
- Array.from(document.querySelectorAll('.show-btn')).forEach(
347
- btn => {
348
- btn.addEventListener("click", () => { show(); });
349
- });
350
-
351
-
352
- </script>
353
- </body>
354
-
355
- </html>
package/dist/test/pages/InputFieldMinWidth.html DELETED
@@ -1,230 +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">
7
- <title>ui5-input</title>
8
-
9
- <script>
10
-
11
- delete Document.prototype.adoptedStyleSheets;
12
-
13
- </script>
14
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
15
- </head>
16
-
17
- <style>
18
- html,
19
- body {
20
- margin: 0;
21
- height: 100%;
22
- width: 100%;
23
- }
24
-
25
- body {
26
- padding: 1rem;
27
- box-sizing: border-box;
28
- }
29
-
30
- .wrapper {
31
- padding: .5rem;
32
- box-sizing: border-box;
33
- border: 1px grey dashed;
34
- display: flex;
35
- justify-content: center;
36
- align-items: center;
37
- flex-direction: column;
38
- }
39
-
40
- .fields {
41
- position: relative;
42
- }
43
-
44
- .field {
45
- margin-top: .25rem;
46
- display: block;
47
- max-width: 100%;
48
- }
49
-
50
- .field,
51
- .fields {
52
- width: 540px;
53
- max-width: 100%;
54
- }
55
-
56
- #slider {
57
- margin-top: 1rem;
58
- width: 540px;
59
- max-width: 100%;
60
- }
61
-
62
- .header {
63
- position: sticky;
64
- top:0;
65
- left:0;
66
- z-index: 1000;
67
- background-color: whitesmoke;
68
- padding:20px;
69
- }
70
- </style>
71
-
72
- <body>
73
- <div class="wrapper" id="wrapper">
74
- <div class="fields">
75
- <div class="header" >
76
- <ui5-checkbox id="cbCompact" text="Compact" ></ui5-checkbox>
77
- <ui5-label id="label-width2">fields width: 540</ui5-label>
78
- <ui5-slider id="slider2" show-tickmarks value="540" min="0" max="540" step="1" label-interval="1"></ui5-slider>
79
- </div>
80
- <p>Input</p>
81
- <ui5-input placeholder="input" class="field"></ui5-input>
82
- <ui5-input value="input with clear icon" show-clear-icon class="field">
83
- <ui5-icon slot="icon" name="accept"></ui5-icon>
84
- </ui5-input>
85
- <ui5-input placeholder="input with custom icon" class="field">
86
- <ui5-icon slot="icon" name="accept"></ui5-icon>
87
- </ui5-input>
88
- <ui5-input placeholder="input with 4 custom icons" class="field">
89
- <ui5-icon slot="icon" name="accept"></ui5-icon>
90
- <ui5-icon slot="icon" name="accept"></ui5-icon>
91
- <ui5-icon slot="icon" name="accept"></ui5-icon>
92
- <ui5-icon slot="icon" name="accept"></ui5-icon>
93
- </ui5-input>
94
- <ui5-input value="input with clear icon" show-clear-icon class="field">
95
- <ui5-icon slot="icon" name="accept"></ui5-icon>
96
- </ui5-input>
97
- <p>Multi Input</p>
98
- <ui5-multi-input placeholder="multi-input" class="field"></ui5-multi-input>
99
- <ui5-multi-input placeholder="multi-input" show-value-help-icon class="field"></ui5-multi-input>
100
- <ui5-multi-input placeholder="multi-input" show-value-help-icon class="field">
101
- <ui5-icon slot="icon" name="accept"></ui5-icon>
102
- </ui5-multi-input>
103
- <ui5-multi-input placeholder="multi-input" class="field">
104
- <ui5-icon slot="icon" name="accept"></ui5-icon>
105
- <ui5-icon slot="icon" name="accept"></ui5-icon>
106
- <ui5-icon slot="icon" name="accept"></ui5-icon>
107
- <ui5-icon slot="icon" name="accept"></ui5-icon>
108
- <ui5-icon slot="icon" name="accept"></ui5-icon>
109
- </ui5-multi-input>
110
- <ui5-multi-input placeholder="multi-input" show-value-help-icon class="field">
111
- <ui5-icon slot="icon" name="accept"></ui5-icon>
112
- <ui5-icon slot="icon" name="accept"></ui5-icon>
113
- <ui5-icon slot="icon" name="accept"></ui5-icon>
114
- <ui5-icon slot="icon" name="accept"></ui5-icon>
115
- <ui5-icon slot="icon" name="accept"></ui5-icon>
116
- </ui5-multi-input>
117
- <ui5-multi-input placeholder="multi-input" class="field" show-value-help-icon>
118
- <ui5-token slot="tokens" text="Token 1"></ui5-token>
119
- <ui5-token slot="tokens" text="Token 2"></ui5-token>
120
- <ui5-token slot="tokens" text="Token 3"></ui5-token>
121
- </ui5-multi-input>
122
- <ui5-multi-input placeholder="multi-input" class="field">
123
- <ui5-token slot="tokens" text="a"></ui5-token>
124
- <ui5-token slot="tokens" text="b"></ui5-token>
125
- <ui5-token slot="tokens" text="c"></ui5-token>
126
- </ui5-multi-input>
127
- <ui5-multi-input placeholder="multi-input" show-value-help-icon class="field">
128
- <ui5-token slot="tokens" text="Token 1"></ui5-token>
129
- <ui5-token slot="tokens" text="Token 2"></ui5-token>
130
- <ui5-token slot="tokens" text="Token 3"></ui5-token>
131
- </ui5-multi-input>
132
- <ui5-multi-input placeholder="multi-input" show-value-help-icon class="field">
133
- <ui5-token slot="tokens" text="Token 1"></ui5-token>
134
- <ui5-token slot="tokens" text="Token 222222222222222222"></ui5-token>
135
- <ui5-token slot="tokens" text="Token 3"></ui5-token>
136
- <ui5-icon slot="icon" name="accept"></ui5-icon>
137
- <ui5-icon slot="icon" name="accept"></ui5-icon>
138
- </ui5-multi-input>
139
- <ui5-multi-input placeholder="multi-input" show-value-help-icon class="field">
140
- <ui5-token slot="tokens" text="Token 1111111111111111"></ui5-token>
141
- <ui5-token slot="tokens" text="Token 2"></ui5-token>
142
- <ui5-token slot="tokens" text="Token 3"></ui5-token>
143
- <ui5-token slot="tokens" text="Token 4"></ui5-token>
144
- <ui5-token slot="tokens" text="Token 5"></ui5-token>
145
- <ui5-token slot="tokens" text="Token 6"></ui5-token>
146
- </ui5-multi-input>
147
- <ui5-multi-input placeholder="multi-input" show-value-help-icon class="field">
148
- <ui5-token slot="tokens" text="Est consequat ea veniam velit do sint duis."></ui5-token>
149
- </ui5-multi-input>
150
- <p>Combobox</p>
151
- <ui5-combobox placeholder="combobox" class="field"></ui5-combobox>
152
- <ui5-combobox placeholder="combobox with 3 custom icons" class="field">
153
- <ui5-icon slot="icon" name="accept"></ui5-icon>
154
- <ui5-icon slot="icon" name="accept"></ui5-icon>
155
- <ui5-icon slot="icon" name="accept"></ui5-icon>
156
- </ui5-combobox>
157
- <p>Multi Combobox</p>
158
- <ui5-multi-combobox placeholder="multi-combobox" class="field"></ui5-multi-combobox>
159
- <ui5-multi-combobox placeholder="multi-combobox" class="field">
160
- <ui5-mcb-item selected text="Item 1"></ui5-mcb-item>
161
- <ui5-mcb-item selected text="Item 2"></ui5-mcb-item>
162
- <ui5-mcb-item selected text="Item 3"></ui5-mcb-item>
163
- <ui5-mcb-item selected text="Item 4"></ui5-mcb-item>
164
- <ui5-mcb-item selected text="Item 5"></ui5-mcb-item>
165
- </ui5-multi-combobox>
166
- <ui5-multi-combobox id="mcb-compact" placeholder="Some initial text" class="field">
167
- <ui5-mcb-item text="Cosy" selected></ui5-mcb-item>
168
- <ui5-mcb-item text="Compact" selected></ui5-mcb-item>
169
- <ui5-mcb-item text="Condensed"></ui5-mcb-item>
170
- <ui5-mcb-item text="Longest word in the world"></ui5-mcb-item>
171
- </ui5-multi-combobox>
172
- <p>Others</p>
173
- <ui5-step-input placeholder="step-input" class="field"></ui5-step-input>
174
- <ui5-textarea placeholder="textarea" class="field"></ui5-textarea>
175
- <ui5-select placeholder="Select" class="field">
176
- <ui5-option selected>Cozy</ui5-option>
177
- <ui5-option selected>Compact</ui5-option>
178
- <ui5-option selected>Condensed</ui5-option>
179
- </ui5-select>
180
- <ui5-select placeholder="Select Device" class="field">
181
- <ui5-option icon="iphone" selected>Phone</ui5-option>
182
- <ui5-option icon="ipad">Tablet</ui5-option>
183
- <ui5-option icon="laptop">Desktop</ui5-option>
184
- </ui5-select>
185
- <ui5-datetime-picker placeholder="datetime-picker" class="field"></ui5-datetime-picker>
186
- <ui5-daterange-picker placeholder="daterange-picker" class="field"></ui5-daterange-picker>
187
- <ui5-time-picker placeholder="time-picker" class="field"></ui5-time-picker>
188
- <ui5-input value="input with clear icon" show-clear-icon class="field">
189
- </ui5-input>
190
- </div>
191
-
192
-
193
- <ui5-slider id="slider" show-tickmarks value="540" min="0" max="540" step="1" label-interval="1"></ui5-slider>
194
-
195
- <ui5-label id="label-width">fields width: 540</ui5-label>
196
- </div>
197
-
198
- <script>
199
- const fields = document.querySelectorAll(".field");
200
-
201
- document.getElementById("slider").addEventListener("ui5-input", event => {
202
- Array.from(fields).forEach(el => {
203
- el.style.width = `${event.target.value}px`;
204
- document.getElementById("label-width").textContent = `Field width: ${event.target.value}px`;
205
- document.getElementById("label-width2").textContent = `Field width: ${event.target.value/16}rem`;
206
- })
207
- });
208
-
209
- document.getElementById("slider2").addEventListener("ui5-input", event => {
210
- Array.from(fields).forEach(el => {
211
- el.style.width = `${event.target.value}px`;
212
- document.getElementById("label-width").textContent = `Field width: ${event.target.value}px`;
213
- document.getElementById("label-width2").textContent = `Field width: ${event.target.value/16}rem`;
214
- })
215
- });
216
-
217
- const cbCompact = document.getElementById('cbCompact');
218
- cbCompact.addEventListener('ui5-change', ()=> {
219
- var el = document.getElementById('wrapper');
220
- el.classList.remove('sapUiSizeCompact');
221
- if(cbCompact.checked) {
222
- el.classList.add('sapUiSizeCompact');
223
- }
224
-
225
-
226
- });
227
- </script>
228
- </body>
229
-
230
- </html>
package/dist/test/pages/InputIcons.html DELETED
@@ -1,80 +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
- <title>ui5-input with icons</title>
8
-
9
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
10
- </head>
11
-
12
- <style>
13
- .clear-icon-examples {
14
- display: flex;
15
- flex-direction: column;
16
- border: 1px dashed grey;
17
- margin-top: .5rem;
18
- padding: .5rem;
19
- box-sizing: border-box;
20
- background-color: var(--sapBackgroundColor);
21
- }
22
-
23
- .clear-icon-examples > * {
24
- margin-top: .25rem;
25
- }
26
-
27
- .custom-small-size ui5-input {
28
- height: 24px;
29
- }
30
-
31
- .custom-big-size ui5-input{
32
- height: 64px;
33
- }
34
- </style>
35
-
36
- <body>
37
- <div class="theme-change-wrapper">
38
- <ui5-button data-theme-name="sap_belize">Blize</ui5-button>
39
- <ui5-button data-theme-name="sap_fiori_3">Fiori 3</ui5-button>
40
- <ui5-button data-theme-name="sap_fiori_3_hcb">Fiori 3 HCB</ui5-button>
41
- <ui5-button data-theme-name="sap_horizon">Horizon</ui5-button>
42
- <ui5-button data-theme-name="sap_horizon_hcb">Horizon HCB</ui5-button>
43
- <ui5-button data-theme-name="sap_horizon_hcw">Horizon HCW</ui5-button>
44
- <ui5-button data-theme-name="sap_horizon_dark">Horizon Dark</ui5-button>
45
- </div>
46
- <div class="clear-icon-examples">
47
- <ui5-input show-clear-icon value="Test"></ui5-input>
48
- <ui5-input show-clear-icon value="Test" value-state="Error"></ui5-input>
49
- <ui5-input show-clear-icon value="Test" value-state="Warning"></ui5-input>
50
- <ui5-input show-clear-icon value="Test" value-state="Success"></ui5-input>
51
- <ui5-input show-clear-icon value="Test" value-state="None"></ui5-input>
52
- </div>
53
-
54
- <div class="clear-icon-examples custom-small-size">
55
- <ui5-input show-clear-icon value="Test"></ui5-input>
56
- <ui5-input show-clear-icon value="Test" value-state="Error"></ui5-input>
57
- <ui5-input show-clear-icon value="Test" value-state="Warning"></ui5-input>
58
- <ui5-input show-clear-icon value="Test" value-state="Success"></ui5-input>
59
- <ui5-input show-clear-icon value="Test" value-state="None"></ui5-input>
60
- </div>
61
-
62
- <div class="clear-icon-examples custom-big-size">
63
- <ui5-input show-clear-icon value="Test"></ui5-input>
64
- <ui5-input show-clear-icon value="Test" value-state="Error"></ui5-input>
65
- <ui5-input show-clear-icon value="Test" value-state="Warning"></ui5-input>
66
- <ui5-input show-clear-icon value="Test" value-state="Success"></ui5-input>
67
- <ui5-input show-clear-icon value="Test" value-state="None"></ui5-input>
68
- </div>
69
-
70
- <script>
71
-
72
- Array.from(document.querySelectorAll(".theme-change-wrapper ui5-button")).forEach(button => {
73
- button.addEventListener("click", event => {
74
- window["sap-ui-webcomponents-bundle"].configuration.setTheme(event.target.getAttribute("data-theme-name"));
75
- });
76
- });
77
- </script>
78
- </body>
79
-
80
- </html>