@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.
- package/.vscode/diff/vulsCount.txt +1 -0
- package/.vscode/settings.json +3 -0
- package/CHANGELOG.md +11 -0
- package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js.map +1 -1
- package/package.json +7 -8
- package/src/ComboBoxPopover.hbs +16 -12
- package/LICENSE.txt +0 -201
- package/dist/assets/test/pages/ComboBox.html.e6b2c662.js +0 -1
- package/dist/assets/test/pages/Icon.html.4f593716.js +0 -1
- package/dist/assets/test/pages/Label.html.36a2faae.js +0 -4
- package/dist/assets/test/pages/Popups.html.c29d144e.js +0 -1
- package/dist/test/pages/72override.html +0 -33
- package/dist/test/pages/AnimanitionOff.html +0 -52
- package/dist/test/pages/Avatar.html +0 -264
- package/dist/test/pages/AvatarGroup.html +0 -376
- package/dist/test/pages/Badge.html +0 -75
- package/dist/test/pages/Breadcrumbs.html +0 -239
- package/dist/test/pages/BusyIndicator.html +0 -278
- package/dist/test/pages/Button.html +0 -273
- package/dist/test/pages/Calendar.html +0 -103
- package/dist/test/pages/Card.html +0 -347
- package/dist/test/pages/Carousel.html +0 -613
- package/dist/test/pages/CheckBox.html +0 -90
- package/dist/test/pages/ColorPalette.html +0 -126
- package/dist/test/pages/ColorPalettePopover.html +0 -141
- package/dist/test/pages/ColorPicker.html +0 -66
- package/dist/test/pages/ComboBox.html +0 -292
- package/dist/test/pages/Components.html +0 -106
- package/dist/test/pages/CoreControls.html +0 -203
- package/dist/test/pages/CoreControls_exp.html +0 -203
- package/dist/test/pages/CustomCSS.html +0 -55
- package/dist/test/pages/DatePicker.html +0 -211
- package/dist/test/pages/DatePicker_test_page.html +0 -109
- package/dist/test/pages/DateRangePicker.html +0 -67
- package/dist/test/pages/DateTimePicker.html +0 -199
- package/dist/test/pages/DateTimePicker_Timezone.html +0 -72
- package/dist/test/pages/DayPicker.html +0 -37
- package/dist/test/pages/Dialog.html +0 -813
- package/dist/test/pages/DialogLifecycle.html +0 -62
- package/dist/test/pages/DialogSemantic.html +0 -58
- package/dist/test/pages/Eventing.html +0 -33
- package/dist/test/pages/F6Test1.html +0 -42
- package/dist/test/pages/F6Test2.html +0 -42
- package/dist/test/pages/F6Test3.html +0 -39
- package/dist/test/pages/F6Test4.html +0 -46
- package/dist/test/pages/F6Test5.html +0 -42
- package/dist/test/pages/F6Test6.html +0 -39
- package/dist/test/pages/F6Test7.html +0 -36
- package/dist/test/pages/FileUploader.html +0 -138
- package/dist/test/pages/FormComponents.html +0 -76
- package/dist/test/pages/FormSupport.html +0 -59
- package/dist/test/pages/HCB.html +0 -45
- package/dist/test/pages/Icon.html +0 -278
- package/dist/test/pages/Icon_and_theming.html +0 -67
- package/dist/test/pages/Icon_custom.html +0 -26
- package/dist/test/pages/Input.html +0 -731
- package/dist/test/pages/InputFieldLabels.html +0 -355
- package/dist/test/pages/InputFieldMinWidth.html +0 -230
- package/dist/test/pages/InputIcons.html +0 -80
- package/dist/test/pages/Input_quickview.html +0 -204
- package/dist/test/pages/InputsAlignment.html +0 -131
- package/dist/test/pages/InputsLazyLoading.html +0 -244
- package/dist/test/pages/ItemNavigation.html +0 -94
- package/dist/test/pages/Kitchen.html +0 -637
- package/dist/test/pages/Kitchen.openui5.html +0 -570
- package/dist/test/pages/Label.html +0 -192
- package/dist/test/pages/Link.html +0 -201
- package/dist/test/pages/List.html +0 -465
- package/dist/test/pages/ListGrowing_Button.html +0 -64
- package/dist/test/pages/ListGrowing_Scroll.html +0 -93
- package/dist/test/pages/List_keyboard_support.html +0 -130
- package/dist/test/pages/List_test_page.html +0 -395
- package/dist/test/pages/LitKeyFunction.html +0 -40
- package/dist/test/pages/MemoryLeak.html +0 -78
- package/dist/test/pages/Menu.html +0 -161
- package/dist/test/pages/MessagePage.html +0 -39
- package/dist/test/pages/MessageStrip.html +0 -55
- package/dist/test/pages/MultiComboBox.html +0 -489
- package/dist/test/pages/MultiInput.html +0 -451
- package/dist/test/pages/MultiInput_Suggestions.html +0 -161
- package/dist/test/pages/OpenUI5-second.html +0 -60
- package/dist/test/pages/OpenUI5.html +0 -83
- package/dist/test/pages/Panel.html +0 -226
- package/dist/test/pages/Popover.html +0 -658
- package/dist/test/pages/PopoverArrowBounds.html +0 -52
- package/dist/test/pages/Popups.html +0 -131
- package/dist/test/pages/ProgressIndicator.html +0 -151
- package/dist/test/pages/RTL.html +0 -118
- package/dist/test/pages/RadioButton.html +0 -201
- package/dist/test/pages/RangeSlider.html +0 -96
- package/dist/test/pages/RatingIndicator.html +0 -97
- package/dist/test/pages/ResizeHandler.html +0 -74
- package/dist/test/pages/ResponsivePopover.html +0 -267
- package/dist/test/pages/SegmentedButton.html +0 -151
- package/dist/test/pages/Select.html +0 -272
- package/dist/test/pages/Simple.html +0 -25
- package/dist/test/pages/Slider.html +0 -79
- package/dist/test/pages/SplitButton.html +0 -101
- package/dist/test/pages/StepInput.html +0 -189
- package/dist/test/pages/Switch.html +0 -97
- package/dist/test/pages/TabContainer.html +0 -904
- package/dist/test/pages/Table-perf-pure.html +0 -73
- package/dist/test/pages/Table-perf.html +0 -76
- package/dist/test/pages/Table.html +0 -2808
- package/dist/test/pages/Table2.html +0 -53
- package/dist/test/pages/TableAllPopin.html +0 -228
- package/dist/test/pages/TableCustomStyling.html +0 -89
- package/dist/test/pages/TableGrouping.html +0 -109
- package/dist/test/pages/TableGrowingWithButton.html +0 -805
- package/dist/test/pages/TableGrowingWithScroll.html +0 -801
- package/dist/test/pages/TableSelection.html +0 -445
- package/dist/test/pages/Test.html +0 -15
- package/dist/test/pages/TextArea.html +0 -222
- package/dist/test/pages/TimePicker.html +0 -89
- package/dist/test/pages/TimeSelection.html +0 -31
- package/dist/test/pages/Title.html +0 -60
- package/dist/test/pages/Toast.html +0 -111
- package/dist/test/pages/ToggleButton.html +0 -71
- package/dist/test/pages/Tokenizer.html +0 -91
- package/dist/test/pages/Tree.html +0 -307
- package/dist/test/pages/TreeDynamic.html +0 -56
- package/dist/test/pages/WheelSlider_Test_Page.html +0 -26
- package/dist/test/pages/base/AriaLabelHelper.html +0 -334
- package/dist/test/pages/base/DOMObserver.html +0 -20
- package/dist/test/pages/base/IconCollection.html +0 -23
- package/dist/test/pages/base/IconCollectionInCustomTheme.html +0 -25
- package/dist/test/pages/base/IgnoreCustomElements.html +0 -26
- package/dist/test/pages/base/InvisibleMessage.html +0 -44
- package/dist/test/pages/form.html +0 -123
- package/dist/test/pages/i18n-defaultLang.html +0 -31
- package/dist/test/pages/i18n-demo.html +0 -79
|
@@ -1,334 +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>AriaLabelHelper</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
|
-
|
|
62
|
-
</style>
|
|
63
|
-
|
|
64
|
-
<body>
|
|
65
|
-
<div class="wrapper">
|
|
66
|
-
<div class="fields">
|
|
67
|
-
<h4>Label-For Tests</h4>
|
|
68
|
-
<div class="info">
|
|
69
|
-
<ui5-label id="lblDesc1" for="myInput">Desc1</ui5-label>
|
|
70
|
-
</div>
|
|
71
|
-
<div class="info">
|
|
72
|
-
<ui5-label id="lblDesc2" for="myInput">Desc2</ui5-label>
|
|
73
|
-
</div>
|
|
74
|
-
<div class="info">
|
|
75
|
-
<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
|
|
76
|
-
</div>
|
|
77
|
-
<div class="info">
|
|
78
|
-
<ui5-label id="lblDesc3" for="myInput">Desc3</ui5-label>
|
|
79
|
-
</div>
|
|
80
|
-
<div class="info"><label id="lblDesc4" for="myInput">Desc4</label></div>
|
|
81
|
-
<div class="info"><ui5-button id="btnChange">Change Desc</ui5-button></div>
|
|
82
|
-
<div class="info"><ui5-button id="btnChange11">Remove for attr from Another Description</ui5-button></div>
|
|
83
|
-
<div class="info"><ui5-button id="btnRemoveInput">Remove input</ui5-button></div>
|
|
84
|
-
</div>
|
|
85
|
-
<div class="fields">
|
|
86
|
-
<h4>Input accessibleNameRef Tests</h4>
|
|
87
|
-
<div class="info">
|
|
88
|
-
lblEnterName1: <ui5-label id="lblEnterName1">FirstDesc</ui5-label>
|
|
89
|
-
</div>
|
|
90
|
-
<div class="info">
|
|
91
|
-
lblEnterName2: <ui5-label id="lblEnterName2">SecondDesc</ui5-label>
|
|
92
|
-
</div>
|
|
93
|
-
<div class="info">
|
|
94
|
-
lblEnterName3: <ui5-label id="lblEnterName3">ThirdDesc</ui5-label>
|
|
95
|
-
</div>
|
|
96
|
-
<div class="info">
|
|
97
|
-
<ui5-input id="inputEnterName" accessible-name-ref="lblEnterName1 lblEnterName3" placeholder="Enter your name"
|
|
98
|
-
class="field"></ui5-input>
|
|
99
|
-
</div>
|
|
100
|
-
<div class="info"><ui5-button id="btnChange2">Change Desc lblEnterName1</ui5-button> <ui5-button id="btnChange22">Change Desc lblEnterName2</ui5-button></div>
|
|
101
|
-
<div class="info"><ui5-button id="btnChange3">Swap Accessible Name Ref 1 and 2</ui5-button></div>
|
|
102
|
-
<div class="info"><ui5-button id="btnChange35">Remove lblEnterName3 from accessible-name-ref</ui5-button></div>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="fields">
|
|
105
|
-
<h4>Input accessibleName and accessibleNameRef Tests</h4>
|
|
106
|
-
<div class="info">
|
|
107
|
-
lblEnterDesc1: <ui5-label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</ui5-label>
|
|
108
|
-
</div>
|
|
109
|
-
<div class="info">
|
|
110
|
-
lblEnterDesc3: <ui5-label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</ui5-label>
|
|
111
|
-
</div>
|
|
112
|
-
<div class="info">
|
|
113
|
-
<ui5-input id="inputEnterDesc" accessible-name="Some description added by accessibleName" placeholder="Enter description"
|
|
114
|
-
class="field"></ui5-input>
|
|
115
|
-
</div>
|
|
116
|
-
<div class="info"><ui5-button id="btnChange4">Toggle AccessibleName Value</ui5-button></div>
|
|
117
|
-
<div class="info"><ui5-button id="btnChange5">Remove AccessibleName Attribute</ui5-button></div>
|
|
118
|
-
<div class="info"><ui5-button id="btnChange6">Add Accessible Name Ref</ui5-button></div>
|
|
119
|
-
<div class="info"><ui5-button id="btnChange65">Remove lblEnterDesc1 for Attribute</ui5-button></div>
|
|
120
|
-
</div>
|
|
121
|
-
<div class="fields">
|
|
122
|
-
<h4>Three inputs with same label accessibleNameRef Tests</h4>
|
|
123
|
-
<div class="info">
|
|
124
|
-
lblTestDesc: <ui5-label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</ui5-label>
|
|
125
|
-
</div>
|
|
126
|
-
<div class="info">
|
|
127
|
-
<ui5-input id="testInput1" placeholder="Enter description1" class="field"></ui5-input>
|
|
128
|
-
<ui5-input id="testInput2" accessible-name-ref="lblTestDesc" accessible-name="Hello" placeholder="Enter description2" class="field"></ui5-input>
|
|
129
|
-
<ui5-input id="testInput3" accessible-name-ref="lblTestDesc" placeholder="Enter description3" class="field"></ui5-input>
|
|
130
|
-
</div>
|
|
131
|
-
<div class="info"><ui5-button id="btnChange71">Remove For Attribute On Label</ui5-button></div>
|
|
132
|
-
<div class="info"><ui5-button id="btnChange72">Remove AccessibleNameRef Attribute For Input 2</ui5-button></div>
|
|
133
|
-
<div class="info"><ui5-button id="btnChange73">Remove AccessibleNameRef Attribute For Input 3</ui5-button></div>
|
|
134
|
-
<div class="info"><ui5-button id="btnChange74">Change Label Desc</ui5-button></div>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="fields">
|
|
137
|
-
<h4>Tests for html elements used with for</h4>
|
|
138
|
-
<div class="info">
|
|
139
|
-
<label id="elId1" for="myInput2">Desc1</label>
|
|
140
|
-
</div>
|
|
141
|
-
<div class="info">
|
|
142
|
-
<label id="elId2" for="myInput2">Desc2</label>
|
|
143
|
-
</div>
|
|
144
|
-
<div class="info">
|
|
145
|
-
<ui5-input id="myInput2" placeholder="input placeholder" class="field"></ui5-input>
|
|
146
|
-
</div>
|
|
147
|
-
<div class="info">
|
|
148
|
-
<div id="elId3" for="myInput2">Desc3</div>
|
|
149
|
-
</div>
|
|
150
|
-
<div class="info">
|
|
151
|
-
<span id="elId4" for="myInput2">Desc4</span>
|
|
152
|
-
</div>
|
|
153
|
-
<div class="info">
|
|
154
|
-
<span id="elId5" for="myInput2">Desc5</span>
|
|
155
|
-
</div>
|
|
156
|
-
<div class="info"><ui5-button id="btnChange8">Change el1, Remove el2, Change for of el3, Change el4 </ui5-button></div>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
|
|
160
|
-
<script>
|
|
161
|
-
|
|
162
|
-
const btnChange8 = document.getElementById("btnChange8");
|
|
163
|
-
btnChange8.addEventListener("click", () => {
|
|
164
|
-
document.getElementById("elId1").innerHTML += "X";
|
|
165
|
-
document.getElementById("elId2").remove();
|
|
166
|
-
document.getElementById("elId3").setAttribute("for", "other");
|
|
167
|
-
document.getElementById("elId4").innerHTML += "X";
|
|
168
|
-
document.getElementById("elId5").removeAttribute("for");
|
|
169
|
-
});
|
|
170
|
-
|
|
171
|
-
let counterMyInput = 0;
|
|
172
|
-
|
|
173
|
-
const btnChange = document.getElementById("btnChange");
|
|
174
|
-
btnChange.addEventListener("click", () => {
|
|
175
|
-
const lblDesc1 = document.getElementById("lblDesc1");
|
|
176
|
-
const lblDesc2 = (document.getElementById("lblDesc2").for =
|
|
177
|
-
"other");
|
|
178
|
-
const lblDesc3 = document.getElementById("lblDesc3");
|
|
179
|
-
lblDesc3?.remove();
|
|
180
|
-
lblDesc1.innerHTML = "Desc" + (++counterMyInput);
|
|
181
|
-
});
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
const btnChange11 = document.getElementById("btnChange11");
|
|
185
|
-
btnChange11.addEventListener("click", () => {
|
|
186
|
-
document.getElementById("lblDesc2").for = "";
|
|
187
|
-
});
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
let counterEnterName = 0;
|
|
192
|
-
let counterEnterName2 = 0;
|
|
193
|
-
|
|
194
|
-
const btnChange2 = document.getElementById("btnChange2");
|
|
195
|
-
btnChange2.addEventListener("click", () => {
|
|
196
|
-
const lblEnterName = document.getElementById("lblEnterName1");
|
|
197
|
-
lblEnterName.innerHTML =
|
|
198
|
-
"First Label Desc " + (++counterEnterName);
|
|
199
|
-
});
|
|
200
|
-
|
|
201
|
-
const btnChange22 = document.getElementById("btnChange22");
|
|
202
|
-
btnChange22.addEventListener("click", () => {
|
|
203
|
-
const lblEnterName = document.getElementById("lblEnterName2");
|
|
204
|
-
lblEnterName.innerHTML =
|
|
205
|
-
"Second Label Desc " + (++counterEnterName2);
|
|
206
|
-
});
|
|
207
|
-
|
|
208
|
-
const btnChange3 = document.getElementById("btnChange3");
|
|
209
|
-
btnChange3.addEventListener("click", () => {
|
|
210
|
-
const inputEnterName = document.getElementById("inputEnterName");
|
|
211
|
-
let refValue = inputEnterName['accessibleNameRef'];
|
|
212
|
-
if(refValue.indexOf('1')!==-1) { refValue = refValue.replace('1', '2'); }
|
|
213
|
-
else { refValue = refValue.replace('2', '1'); }
|
|
214
|
-
inputEnterName['accessibleNameRef']=refValue;
|
|
215
|
-
});
|
|
216
|
-
|
|
217
|
-
const btnChange35 = document.getElementById("btnChange35");
|
|
218
|
-
btnChange35.addEventListener("click", () => {
|
|
219
|
-
const inputEnterName = document.getElementById("inputEnterName");
|
|
220
|
-
let refValue = inputEnterName['accessibleNameRef'];
|
|
221
|
-
if(refValue.indexOf('lblEnterName3')!==-1) {
|
|
222
|
-
refValue = refValue.replace(' lblEnterName3', '');
|
|
223
|
-
btnChange35.innerHTML = btnChange35.innerHTML.replace('Remove','Add');
|
|
224
|
-
}
|
|
225
|
-
else {
|
|
226
|
-
refValue = refValue + ' lblEnterName3';
|
|
227
|
-
btnChange35.innerHTML = btnChange35.innerHTML.replace('Add','Remove');
|
|
228
|
-
}
|
|
229
|
-
inputEnterName['accessibleNameRef']=refValue;
|
|
230
|
-
});
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
const btnChange4 = document.getElementById("btnChange4");
|
|
235
|
-
btnChange4.addEventListener("click", () => {
|
|
236
|
-
const inputEnterDesc = document.getElementById("inputEnterDesc");
|
|
237
|
-
let accessibleName = inputEnterDesc['accessibleName'];
|
|
238
|
-
if(accessibleName.includes('Some')) {
|
|
239
|
-
accessibleName = accessibleName.replace('Some','Another');
|
|
240
|
-
} else {
|
|
241
|
-
accessibleName = accessibleName.replace('Another', 'Some');
|
|
242
|
-
}
|
|
243
|
-
inputEnterDesc['accessibleName'] = accessibleName;
|
|
244
|
-
});
|
|
245
|
-
|
|
246
|
-
const btnChange5 = document.getElementById("btnChange5");
|
|
247
|
-
btnChange5.addEventListener("click", () => {
|
|
248
|
-
const inputEnterDesc = document.getElementById("inputEnterDesc");
|
|
249
|
-
let accessibleName = inputEnterDesc['accessibleName'];
|
|
250
|
-
if(accessibleName.length) {
|
|
251
|
-
accessibleName = '';
|
|
252
|
-
btnChange5.innerHTML = btnChange5.innerHTML.replace('Remove','Add');
|
|
253
|
-
} else {
|
|
254
|
-
accessibleName = 'Some description added by accessibleName'
|
|
255
|
-
btnChange5.innerHTML = btnChange5.innerHTML.replace('Add', 'Remove');
|
|
256
|
-
}
|
|
257
|
-
inputEnterDesc['accessibleName'] = accessibleName;
|
|
258
|
-
});
|
|
259
|
-
|
|
260
|
-
const btnChange6 = document.getElementById("btnChange6");
|
|
261
|
-
btnChange6.addEventListener("click", () => {
|
|
262
|
-
const inputEnterDesc = document.getElementById("inputEnterDesc");
|
|
263
|
-
const accessibleNameRef = inputEnterDesc['accessibleNameRef'];
|
|
264
|
-
if(accessibleNameRef==="") {
|
|
265
|
-
inputEnterDesc['accessibleNameRef']="lblEnterDesc3";
|
|
266
|
-
btnChange6.innerHTML = btnChange6.innerHTML.replace('Add','Remove');
|
|
267
|
-
} else {
|
|
268
|
-
inputEnterDesc['accessibleNameRef']="";
|
|
269
|
-
btnChange6.innerHTML = btnChange6.innerHTML.replace('Remove','Add');
|
|
270
|
-
}
|
|
271
|
-
});
|
|
272
|
-
|
|
273
|
-
const btnChange71 = document.getElementById("btnChange71");
|
|
274
|
-
btnChange71.addEventListener("click", () => {
|
|
275
|
-
if(document.getElementById("lblTestDesc").for === "testInput1") {
|
|
276
|
-
document.getElementById("lblTestDesc").for = undefined;
|
|
277
|
-
btnChange71.innerHTML = btnChange71.innerHTML.replace('Remove','Add');
|
|
278
|
-
} else {
|
|
279
|
-
document.getElementById("lblTestDesc").for = "testInput1";
|
|
280
|
-
btnChange71.innerHTML = btnChange71.innerHTML.replace('Add','Remove');
|
|
281
|
-
}
|
|
282
|
-
});
|
|
283
|
-
|
|
284
|
-
const btnChange72 = document.getElementById("btnChange72");
|
|
285
|
-
btnChange72.addEventListener("click", () => {
|
|
286
|
-
const inputEnterName = document.getElementById("testInput2");
|
|
287
|
-
let refValue = inputEnterName['accessibleNameRef'];
|
|
288
|
-
if(refValue.indexOf('lblTestDesc')!==-1) {
|
|
289
|
-
refValue = refValue.replace('lblTestDesc', '');
|
|
290
|
-
btnChange72.innerHTML = btnChange72.innerHTML.replace('Remove','Add');
|
|
291
|
-
}
|
|
292
|
-
else {
|
|
293
|
-
refValue = refValue + 'lblTestDesc';
|
|
294
|
-
btnChange72.innerHTML = btnChange72.innerHTML.replace('Add','Remove');
|
|
295
|
-
}
|
|
296
|
-
inputEnterName['accessibleNameRef']=refValue;
|
|
297
|
-
});
|
|
298
|
-
|
|
299
|
-
const btnChange73 = document.getElementById("btnChange73");
|
|
300
|
-
btnChange73.addEventListener("click", () => {
|
|
301
|
-
const inputEnterName = document.getElementById("testInput3");
|
|
302
|
-
let refValue = inputEnterName['accessibleNameRef'];
|
|
303
|
-
if(refValue.indexOf('lblTestDesc')!==-1) {
|
|
304
|
-
refValue = refValue.replace('lblTestDesc', '');
|
|
305
|
-
btnChange73.innerHTML = btnChange73.innerHTML.replace('Remove','Add');
|
|
306
|
-
}
|
|
307
|
-
else {
|
|
308
|
-
refValue = refValue + 'lblTestDesc';
|
|
309
|
-
btnChange73.innerHTML = btnChange73.innerHTML.replace('Add','Remove');
|
|
310
|
-
}
|
|
311
|
-
inputEnterName['accessibleNameRef']=refValue;
|
|
312
|
-
});
|
|
313
|
-
|
|
314
|
-
const btnRemoveInput = document.getElementById("btnRemoveInput");
|
|
315
|
-
btnRemoveInput.addEventListener("click", () => {
|
|
316
|
-
document.getElementById("myInput").remove();
|
|
317
|
-
});
|
|
318
|
-
|
|
319
|
-
const btnChange65 = document.getElementById("btnChange65");
|
|
320
|
-
btnChange65.addEventListener("click", () => {
|
|
321
|
-
document.getElementById("lblEnterDesc1").for = "";
|
|
322
|
-
});
|
|
323
|
-
|
|
324
|
-
const btnChange74 = document.getElementById("btnChange74");
|
|
325
|
-
btnChange74.addEventListener("click", () => {
|
|
326
|
-
const lblDesc1 = document.getElementById("lblTestDesc");
|
|
327
|
-
lblDesc1.innerHTML = "Another description for testing";
|
|
328
|
-
});
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
</script>
|
|
332
|
-
</body>
|
|
333
|
-
|
|
334
|
-
</html>
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
|
|
7
|
-
<title>DOMObserver</title>
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
9
|
-
<meta charset="utf-8">
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
|
|
14
|
-
</head>
|
|
15
|
-
|
|
16
|
-
<body>
|
|
17
|
-
|
|
18
|
-
</body>
|
|
19
|
-
|
|
20
|
-
</html>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="EN">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<title>ui5 webcomponents</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
7
|
-
<meta charset="utf-8">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<script data-ui5-config type="application/json">
|
|
12
|
-
{
|
|
13
|
-
"theme": "sap_fiori_3_dark"
|
|
14
|
-
}
|
|
15
|
-
</script>
|
|
16
|
-
<script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
|
|
17
|
-
</head>
|
|
18
|
-
|
|
19
|
-
<body>
|
|
20
|
-
|
|
21
|
-
<ui5-icon name="home"></ui5-icon>
|
|
22
|
-
</body>
|
|
23
|
-
</html>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="EN">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<title>ui5 webcomponents</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
7
|
-
<meta charset="utf-8">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<script data-ui5-config type="application/json">
|
|
13
|
-
{
|
|
14
|
-
"theme": "readfish"
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
<script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
|
|
18
|
-
<link rel="stylesheet" href="/assets/IconCollectionInCustomTheme.91b08a2b.css">
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
|
|
23
|
-
<ui5-icon name="home"></ui5-icon>
|
|
24
|
-
</body>
|
|
25
|
-
</html>
|
|
@@ -1,26 +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
|
-
|
|
7
|
-
<title>Ignore Custom Elements</title>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
|
|
12
|
-
<link rel="stylesheet" href="/assets/IgnoreCustomElements.2238457d.css">
|
|
13
|
-
</head>
|
|
14
|
-
|
|
15
|
-
<body clas="bg">
|
|
16
|
-
<ui5-card>
|
|
17
|
-
<ui5-card-header
|
|
18
|
-
slot="header"
|
|
19
|
-
status="4 of 10"
|
|
20
|
-
title-text="Product"></ui5-card-header>
|
|
21
|
-
|
|
22
|
-
<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
|
|
23
|
-
<my-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
|
|
24
|
-
</ui5-card>
|
|
25
|
-
</body>
|
|
26
|
-
</html>
|
|
@@ -1,44 +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
|
-
|
|
7
|
-
<title>InvisibleMessage</title>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
|
|
11
|
-
</head>
|
|
12
|
-
|
|
13
|
-
<body style="background-color: var(--sapBackgroundColor);">
|
|
14
|
-
<style>
|
|
15
|
-
ui5-textarea {
|
|
16
|
-
margin: 1rem 0;
|
|
17
|
-
}
|
|
18
|
-
</style>
|
|
19
|
-
|
|
20
|
-
<section class="group">
|
|
21
|
-
<ui5-title>InvisibleMessage announcement</ui5-title>
|
|
22
|
-
<ui5-textarea id="announce-textarea" placeholder="Enter text to be announced by the screen reader."></ui5-textarea>
|
|
23
|
-
<ui5-checkbox id="announce-checkbox" text="Assertive announcement"></ui5-checkbox>
|
|
24
|
-
<ui5-button id="announce-button" design="Emphasized" aria-expanded="true">Press me to announce.</ui5-button>
|
|
25
|
-
</section>
|
|
26
|
-
|
|
27
|
-
<script>
|
|
28
|
-
const button = document.querySelector("#announce-button");
|
|
29
|
-
const textarea = document.querySelector("#announce-textarea");
|
|
30
|
-
const checkbox = document.querySelector("#announce-checkbox");
|
|
31
|
-
let invisibleMessage;
|
|
32
|
-
|
|
33
|
-
button.addEventListener("click", function(event) {
|
|
34
|
-
invisibleMessage = window["sap-ui-webcomponents-bundle"].invisibleMessage;
|
|
35
|
-
|
|
36
|
-
if (checkbox.checked) {
|
|
37
|
-
invisibleMessage.announce(textarea.value, "Assertive")
|
|
38
|
-
} else {
|
|
39
|
-
invisibleMessage.announce(textarea.value)
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
</script>
|
|
43
|
-
</body>
|
|
44
|
-
</html>
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
6
|
-
<meta charset="utf-8">
|
|
7
|
-
<title>Form support</title>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
|
|
15
|
-
<link rel="stylesheet" href="/assets/form.a7c56399.css">
|
|
16
|
-
</head>
|
|
17
|
-
|
|
18
|
-
<body class="form1auto">
|
|
19
|
-
|
|
20
|
-
<form method="get">
|
|
21
|
-
<h3> Input with suggestions</h3>
|
|
22
|
-
<ui5-input name="a" show-suggestions>
|
|
23
|
-
<ui5-li>Cozy</ui5-li>
|
|
24
|
-
<ui5-li>Compact</ui5-li>
|
|
25
|
-
<ui5-li>Condensed</ui5-li>
|
|
26
|
-
</ui5-input>
|
|
27
|
-
|
|
28
|
-
<h3> Input disabled</h3>
|
|
29
|
-
<ui5-input name="b_disabled" class="form2auto" disabled placeholder="Disabled one ...">
|
|
30
|
-
<ui5-icon slot="icon" name="appointment-2"></ui5-icon>
|
|
31
|
-
</ui5-input>
|
|
32
|
-
|
|
33
|
-
<h3> Input readonly</h3>
|
|
34
|
-
<ui5-input name="c" class="form2auto" value="readonly" readonly></ui5-input>
|
|
35
|
-
|
|
36
|
-
<h3> Input type 'Number'</h3>
|
|
37
|
-
<ui5-input name="d" class="form2auto" type="Number" placeholder="Numbers are allowed only ..."></ui5-input>
|
|
38
|
-
|
|
39
|
-
<h3> Input type 'Password'</h3>
|
|
40
|
-
<ui5-input name="e" class="form2auto" type="Password" placeholder="Typing in private ..."></ui5-input>
|
|
41
|
-
|
|
42
|
-
<h3> Input type 'Email'</h3>
|
|
43
|
-
<ui5-input class="form2auto" type="Email" name="my-input-email"></ui5-input>
|
|
44
|
-
|
|
45
|
-
<h3> Input type 'Tel'</h3>
|
|
46
|
-
<ui5-input class="form2auto" type="Tel" name="my-input-tel"></ui5-input>
|
|
47
|
-
|
|
48
|
-
<h3> Input type 'URL'</h3>
|
|
49
|
-
<ui5-input name="h" class="form2auto" type="URL"></ui5-input>
|
|
50
|
-
|
|
51
|
-
<ui5-input value="No name"></ui5-input>
|
|
52
|
-
|
|
53
|
-
<br>
|
|
54
|
-
<select name="sel">
|
|
55
|
-
<option value="1">test1</option>
|
|
56
|
-
<option value="2" selected="selected">test2</option>
|
|
57
|
-
<option value="3">test3</option>
|
|
58
|
-
</select>
|
|
59
|
-
|
|
60
|
-
<br>
|
|
61
|
-
<ui5-select name="sel2">
|
|
62
|
-
<ui5-option value="czy">Cozy</ui5-option>
|
|
63
|
-
<ui5-option value="cmp" selected>Compact</ui5-option>
|
|
64
|
-
<ui5-option value="cnd">Condensed</ui5-option>
|
|
65
|
-
</ui5-select>
|
|
66
|
-
|
|
67
|
-
<br />
|
|
68
|
-
<ui5-textarea name="ta" value="My text"></ui5-textarea>
|
|
69
|
-
|
|
70
|
-
<br>
|
|
71
|
-
<ui5-date-picker name="dp"></ui5-date-picker>
|
|
72
|
-
|
|
73
|
-
<br />
|
|
74
|
-
|
|
75
|
-
<br>
|
|
76
|
-
<input name="native_cb" type="checkbox" />
|
|
77
|
-
|
|
78
|
-
<br>
|
|
79
|
-
<ui5-checkbox name="cb"></ui5-checkbox>
|
|
80
|
-
|
|
81
|
-
<br><br>
|
|
82
|
-
|
|
83
|
-
<ui5-radio-button name="radio1" text="A" value="a" checked></ui5-radio-button>
|
|
84
|
-
<ui5-radio-button name="radio1" text="B" value="b"></ui5-radio-button>
|
|
85
|
-
<ui5-radio-button name="radio1" text="C" value="c"></ui5-radio-button>
|
|
86
|
-
|
|
87
|
-
<br><br>
|
|
88
|
-
|
|
89
|
-
<ui5-radio-button name="radio2" text="D" value="d" checked></ui5-radio-button>
|
|
90
|
-
<ui5-radio-button name="radio2" text="E" value="e"></ui5-radio-button>
|
|
91
|
-
<ui5-radio-button name="radio2" text="F" value="f"></ui5-radio-button>
|
|
92
|
-
|
|
93
|
-
<br><br>
|
|
94
|
-
|
|
95
|
-
<input type="radio" name="radio_native" value="o1">Option 1<br>
|
|
96
|
-
<input type="radio" name="radio_native" value="o2" selected>Option 2<br>
|
|
97
|
-
<input type="radio" name="radio_native" value="o3">Option 3
|
|
98
|
-
|
|
99
|
-
<br>
|
|
100
|
-
<ui5-button>Does not submit forms</ui5-button>
|
|
101
|
-
|
|
102
|
-
<ui5-button submits>Submits forms</ui5-button>
|
|
103
|
-
|
|
104
|
-
<ui5-panel>
|
|
105
|
-
<input type="hidden" name="new2" value="555555555555" />
|
|
106
|
-
</ui5-panel>
|
|
107
|
-
|
|
108
|
-
<input type="submit" />
|
|
109
|
-
</form>
|
|
110
|
-
|
|
111
|
-
<form method="get" id="form1">
|
|
112
|
-
|
|
113
|
-
<ui5-input required>
|
|
114
|
-
</ui5-input>
|
|
115
|
-
<input required>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<ui5-button submits>Submits forms</ui5-button>
|
|
119
|
-
<input type="submit" />
|
|
120
|
-
</form>
|
|
121
|
-
</body>
|
|
122
|
-
|
|
123
|
-
</html>
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html xmlns="http://www.w3.org/1999/html">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
|
|
7
|
-
<title>i18n default language test page</title>
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
9
|
-
<meta charset="utf-8">
|
|
10
|
-
|
|
11
|
-
<!-- The "fetchDefaultLanguage" is enabled,
|
|
12
|
-
the configured default language will be fetched over the network
|
|
13
|
-
-->
|
|
14
|
-
<script data-ui5-config type="application/json">{"fetchDefaultLanguage": true}</script>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
|
|
21
|
-
<link rel="stylesheet" href="/assets/i18n-defaultLang.a3cc4720.css">
|
|
22
|
-
</head>
|
|
23
|
-
<body class="i18n-defaultlang1auto">
|
|
24
|
-
|
|
25
|
-
<ui5-textarea
|
|
26
|
-
maxlength="20"
|
|
27
|
-
placeholder="Max length"
|
|
28
|
-
show-exceeded-text
|
|
29
|
-
></ui5-textarea>
|
|
30
|
-
</body>
|
|
31
|
-
</html>
|