@ui5/webcomponents 1.14.4 → 1.14.5
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/CHANGELOG.md +8 -0
- package/LICENSE.txt +201 -0
- package/dist/assets/test/pages/ComboBox.html.4b9001c1.js +1 -0
- package/dist/assets/test/pages/Icon.html.4eca8a7c.js +1 -0
- package/dist/assets/test/pages/Label.html.77c5407f.js +4 -0
- package/dist/assets/test/pages/Popups.html.72f0c0fb.js +1 -0
- package/dist/test/pages/72override.html +33 -0
- package/dist/test/pages/AnimanitionOff.html +52 -0
- package/dist/test/pages/Avatar.html +264 -0
- package/dist/test/pages/AvatarGroup.html +376 -0
- package/dist/test/pages/Badge.html +75 -0
- package/dist/test/pages/Breadcrumbs.html +239 -0
- package/dist/test/pages/BusyIndicator.html +278 -0
- package/dist/test/pages/Button.html +273 -0
- package/dist/test/pages/Calendar.html +103 -0
- package/dist/test/pages/Card.html +347 -0
- package/dist/test/pages/Carousel.html +613 -0
- package/dist/test/pages/CheckBox.html +90 -0
- package/dist/test/pages/ColorPalette.html +126 -0
- package/dist/test/pages/ColorPalettePopover.html +141 -0
- package/dist/test/pages/ColorPicker.html +66 -0
- package/dist/test/pages/ComboBox.html +292 -0
- package/dist/test/pages/Components.html +106 -0
- package/dist/test/pages/CoreControls.html +203 -0
- package/dist/test/pages/CoreControls_exp.html +203 -0
- package/dist/test/pages/CustomCSS.html +55 -0
- package/dist/test/pages/DatePicker.html +211 -0
- package/dist/test/pages/DatePicker_test_page.html +109 -0
- package/dist/test/pages/DateRangePicker.html +67 -0
- package/dist/test/pages/DateTimePicker.html +199 -0
- package/dist/test/pages/DateTimePicker_Timezone.html +72 -0
- package/dist/test/pages/DayPicker.html +37 -0
- package/dist/test/pages/Dialog.html +813 -0
- package/dist/test/pages/DialogLifecycle.html +62 -0
- package/dist/test/pages/DialogSemantic.html +58 -0
- package/dist/test/pages/Eventing.html +33 -0
- package/dist/test/pages/F6Test1.html +42 -0
- package/dist/test/pages/F6Test2.html +42 -0
- package/dist/test/pages/F6Test3.html +39 -0
- package/dist/test/pages/F6Test4.html +46 -0
- package/dist/test/pages/F6Test5.html +42 -0
- package/dist/test/pages/F6Test6.html +39 -0
- package/dist/test/pages/F6Test7.html +36 -0
- package/dist/test/pages/FileUploader.html +138 -0
- package/dist/test/pages/FormComponents.html +76 -0
- package/dist/test/pages/FormSupport.html +59 -0
- package/dist/test/pages/HCB.html +45 -0
- package/dist/test/pages/Icon.html +278 -0
- package/dist/test/pages/Icon_and_theming.html +67 -0
- package/dist/test/pages/Icon_custom.html +26 -0
- package/dist/test/pages/Input.html +731 -0
- package/dist/test/pages/InputFieldLabels.html +355 -0
- package/dist/test/pages/InputFieldMinWidth.html +230 -0
- package/dist/test/pages/InputIcons.html +80 -0
- package/dist/test/pages/Input_quickview.html +204 -0
- package/dist/test/pages/InputsAlignment.html +131 -0
- package/dist/test/pages/InputsLazyLoading.html +244 -0
- package/dist/test/pages/ItemNavigation.html +94 -0
- package/dist/test/pages/Kitchen.html +637 -0
- package/dist/test/pages/Kitchen.openui5.html +570 -0
- package/dist/test/pages/Label.html +192 -0
- package/dist/test/pages/Link.html +201 -0
- package/dist/test/pages/List.html +465 -0
- package/dist/test/pages/ListGrowing_Button.html +64 -0
- package/dist/test/pages/ListGrowing_Scroll.html +93 -0
- package/dist/test/pages/List_keyboard_support.html +130 -0
- package/dist/test/pages/List_test_page.html +395 -0
- package/dist/test/pages/LitKeyFunction.html +40 -0
- package/dist/test/pages/MemoryLeak.html +78 -0
- package/dist/test/pages/Menu.html +161 -0
- package/dist/test/pages/MessagePage.html +39 -0
- package/dist/test/pages/MessageStrip.html +55 -0
- package/dist/test/pages/MultiComboBox.html +489 -0
- package/dist/test/pages/MultiInput.html +451 -0
- package/dist/test/pages/MultiInput_Suggestions.html +161 -0
- package/dist/test/pages/OpenUI5-second.html +60 -0
- package/dist/test/pages/OpenUI5.html +83 -0
- package/dist/test/pages/OpenUI5Nightly.html +83 -0
- package/dist/test/pages/Panel.html +226 -0
- package/dist/test/pages/Popover.html +658 -0
- package/dist/test/pages/PopoverArrowBounds.html +52 -0
- package/dist/test/pages/Popups.html +131 -0
- package/dist/test/pages/ProgressIndicator.html +151 -0
- package/dist/test/pages/RTL.html +118 -0
- package/dist/test/pages/RadioButton.html +201 -0
- package/dist/test/pages/RangeSlider.html +96 -0
- package/dist/test/pages/RatingIndicator.html +97 -0
- package/dist/test/pages/ResizeHandler.html +74 -0
- package/dist/test/pages/ResponsivePopover.html +267 -0
- package/dist/test/pages/SegmentedButton.html +151 -0
- package/dist/test/pages/Select.html +272 -0
- package/dist/test/pages/Simple.html +25 -0
- package/dist/test/pages/Slider.html +79 -0
- package/dist/test/pages/SplitButton.html +101 -0
- package/dist/test/pages/StepInput.html +189 -0
- package/dist/test/pages/Switch.html +97 -0
- package/dist/test/pages/TabContainer.html +904 -0
- package/dist/test/pages/Table-perf-pure.html +73 -0
- package/dist/test/pages/Table-perf.html +76 -0
- package/dist/test/pages/Table.html +2808 -0
- package/dist/test/pages/Table2.html +53 -0
- package/dist/test/pages/TableAllPopin.html +228 -0
- package/dist/test/pages/TableCustomStyling.html +89 -0
- package/dist/test/pages/TableGrouping.html +109 -0
- package/dist/test/pages/TableGrowingWithButton.html +805 -0
- package/dist/test/pages/TableGrowingWithScroll.html +801 -0
- package/dist/test/pages/TableSelection.html +445 -0
- package/dist/test/pages/Test.html +15 -0
- package/dist/test/pages/TextArea.html +222 -0
- package/dist/test/pages/TimePicker.html +89 -0
- package/dist/test/pages/TimeSelection.html +31 -0
- package/dist/test/pages/Title.html +60 -0
- package/dist/test/pages/Toast.html +111 -0
- package/dist/test/pages/ToggleButton.html +71 -0
- package/dist/test/pages/Tokenizer.html +91 -0
- package/dist/test/pages/Tree.html +307 -0
- package/dist/test/pages/TreeDynamic.html +56 -0
- package/dist/test/pages/WheelSlider_Test_Page.html +26 -0
- package/dist/test/pages/base/AriaLabelHelper.html +334 -0
- package/dist/test/pages/base/DOMObserver.html +20 -0
- package/dist/test/pages/base/IconCollection.html +23 -0
- package/dist/test/pages/base/IconCollectionInCustomTheme.html +25 -0
- package/dist/test/pages/base/IgnoreCustomElements.html +26 -0
- package/dist/test/pages/base/InvisibleMessage.html +44 -0
- package/dist/test/pages/form.html +123 -0
- package/dist/test/pages/i18n-defaultLang.html +31 -0
- package/dist/test/pages/i18n-demo.html +79 -0
- package/package.json +8 -7
- package/.vscode/diff/vulsCount.txt +0 -1
- package/.vscode/settings.json +0 -3
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
|
|
7
|
+
<title>ui5-tree</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
|
+
<script>// delete Document.prototype.adoptedStyleSheets;</script>
|
|
12
|
+
|
|
13
|
+
<script data-ui5-config type="application/json">
|
|
14
|
+
{
|
|
15
|
+
"language": "EN"
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
<script type="module" crossorigin src="/assets/bundle.common.070dfc01.js"></script>
|
|
25
|
+
<link rel="stylesheet" href="/assets/Tree.e496f991.css">
|
|
26
|
+
</head>
|
|
27
|
+
|
|
28
|
+
<body class="tree1auto">
|
|
29
|
+
|
|
30
|
+
<ui5-segmented-button id="density">
|
|
31
|
+
<ui5-toggle-button pressed>Cozy</ui5-toggle-button>
|
|
32
|
+
<ui5-toggle-button>Compact</ui5-toggle-button>
|
|
33
|
+
</ui5-segmented-button>
|
|
34
|
+
|
|
35
|
+
<br><br>
|
|
36
|
+
<ui5-tree id="tree" no-data-text="No data" mode="MultiSelect" accessible-name="Tree with accessibleName">
|
|
37
|
+
<div slot="header" class="hdr">
|
|
38
|
+
<ui5-title>My tree</ui5-title>
|
|
39
|
+
<div class="spacer"></div>
|
|
40
|
+
<ui5-select id="modeSelect">
|
|
41
|
+
<ui5-option>None</ui5-option>
|
|
42
|
+
<ui5-option>SingleSelect</ui5-option>
|
|
43
|
+
<ui5-option>SingleSelectBegin</ui5-option>
|
|
44
|
+
<ui5-option>SingleSelectEnd</ui5-option>
|
|
45
|
+
<ui5-option selected>MultiSelect</ui5-option>
|
|
46
|
+
|
|
47
|
+
<ui5-option>Delete</ui5-option>
|
|
48
|
+
</ui5-select>
|
|
49
|
+
<ui5-button id="expandLevel1" icon="expand">Expand Level 1</ui5-button>
|
|
50
|
+
<ui5-button id="expandLevel2" icon="expand">Expand Level 2</ui5-button>
|
|
51
|
+
<ui5-button id="expandAll" icon="expand-all">Expand All</ui5-button>
|
|
52
|
+
<ui5-button id="collapseAll" icon="collapse-all">Collapse All</ui5-button>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<ui5-tree-item expanded text="Tree 1" icon="paste" additional-text="Available" indeterminate selected additional-text-state="Information" accessible-name="Tree item with accessibleName">
|
|
56
|
+
<ui5-title slot="content">
|
|
57
|
+
<ui5-label>Tree 1</ui5-label>
|
|
58
|
+
<ui5-label>Tree 1</ui5-label>
|
|
59
|
+
</ui5-title>
|
|
60
|
+
|
|
61
|
+
<ui5-tree-item expanded text="Tree 1.1" additional-text="Re-stock" additional-text-state="Error" indeterminate selected>
|
|
62
|
+
<ui5-tree-item text="Tree 1.1.1" additional-text="Required" additional-text-state="Warning" selected></ui5-tree-item>
|
|
63
|
+
<ui5-tree-item text="Tree 1.1.2" additional-text="Available" additional-text-state="Success"></ui5-tree-item>
|
|
64
|
+
</ui5-tree-item>
|
|
65
|
+
</ui5-tree-item>
|
|
66
|
+
|
|
67
|
+
<ui5-tree-item text="Tree 2" icon="copy">
|
|
68
|
+
<ui5-tree-item id="firstCollapsedItem" text="Tree 2.1">
|
|
69
|
+
<ui5-tree-item text="Tree 2.1.1"></ui5-tree-item>
|
|
70
|
+
<ui5-tree-item text="Tree 2.1.2">
|
|
71
|
+
<ui5-tree-item text="Tree 2.1.2.1"></ui5-tree-item>
|
|
72
|
+
<ui5-tree-item text="Tree 2.1.2.2"></ui5-tree-item>
|
|
73
|
+
<ui5-tree-item text="Tree 2.1.2.3"></ui5-tree-item>
|
|
74
|
+
<ui5-tree-item text="Tree 2.1.2.5"></ui5-tree-item>
|
|
75
|
+
</ui5-tree-item>
|
|
76
|
+
</ui5-tree-item>
|
|
77
|
+
<ui5-tree-item text="Tree 2.2"></ui5-tree-item>
|
|
78
|
+
</ui5-tree-item>
|
|
79
|
+
|
|
80
|
+
<ui5-tree-item expanded text="Tree 3 (no icon)">
|
|
81
|
+
</ui5-tree-item>
|
|
82
|
+
|
|
83
|
+
</ui5-tree>
|
|
84
|
+
Mouseover counter
|
|
85
|
+
<ui5-input id="mouseover-counter" value="0"></ui5-input>
|
|
86
|
+
Mouseout counter
|
|
87
|
+
<ui5-input id="mouseout-counter" value="0"></ui5-input>
|
|
88
|
+
|
|
89
|
+
<br><br>
|
|
90
|
+
|
|
91
|
+
<ui5-busy-indicator id="busy" class="full-width">
|
|
92
|
+
<ui5-tree id="treeDynamic" class="full-width">
|
|
93
|
+
<div slot="header" class="hdr">
|
|
94
|
+
<ui5-title>Dynamic tree</ui5-title>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<ui5-tree-item text="Has preloaded children">
|
|
98
|
+
<ui5-tree-item text="Child 1"></ui5-tree-item>
|
|
99
|
+
<ui5-tree-item text="Child 2"></ui5-tree-item>
|
|
100
|
+
</ui5-tree-item>
|
|
101
|
+
|
|
102
|
+
<ui5-tree-item text="Has no children at all"></ui5-tree-item>
|
|
103
|
+
|
|
104
|
+
<ui5-tree-item id="dynamicNode" text="Has children, but not yet loaded" has-children></ui5-tree-item>
|
|
105
|
+
</ui5-tree>
|
|
106
|
+
</ui5-busy-indicator>
|
|
107
|
+
|
|
108
|
+
<br><br>
|
|
109
|
+
|
|
110
|
+
<ui5-label id="tree-label">Tree with accessibleNameRef</ui5-label>
|
|
111
|
+
<ui5-tree id="preventable-click-event" class="full-width" mode="MultiSelect" accessible-name-ref="tree-label">
|
|
112
|
+
<div slot="header" class="hdr">
|
|
113
|
+
<ui5-title>Prevent item-click Events</ui5-title>
|
|
114
|
+
</div>
|
|
115
|
+
<ui5-tree-item expanded text="Tree 1" >
|
|
116
|
+
<ui5-tree-item text="Tree 1.1" ></ui5-tree-item>
|
|
117
|
+
</ui5-tree-item>
|
|
118
|
+
</ui5-tree>
|
|
119
|
+
Prevented events counter
|
|
120
|
+
<ui5-input id="prevented-counter" value="0"></ui5-input>
|
|
121
|
+
|
|
122
|
+
<ui5-tree id="treeIndeterminate" mode="MultiSelect">
|
|
123
|
+
<div slot="header" class="hdr">
|
|
124
|
+
<ui5-title>Tree with indeterminate items</ui5-title>
|
|
125
|
+
</div>
|
|
126
|
+
<ui5-tree-item id="item1" text="Item 1" indeterminate selected></ui5-tree-item>
|
|
127
|
+
<ui5-tree-item id="item2" text="Item 2" indeterminate selected></ui5-tree-item>
|
|
128
|
+
<ui5-tree-item id="item3" text="Item 3"></ui5-tree-item>
|
|
129
|
+
<ui5-tree-item id="item4" text="Item 4" indeterminate selected></ui5-tree-item>
|
|
130
|
+
</ui5-tree>
|
|
131
|
+
<ui5-input id="selectionChangeTargetItemResult" placeholder="selectionChange targetItem result"></ui5-input>
|
|
132
|
+
|
|
133
|
+
<br><br>
|
|
134
|
+
|
|
135
|
+
<ui5-label id="tree-navigated items">Tree with navigated items</ui5-label>
|
|
136
|
+
<ui5-tree>
|
|
137
|
+
<ui5-tree-item type="Navigation" navigated text="Tree 1 - this item is already navigated" >
|
|
138
|
+
<ui5-tree-item navigated text="Tree 1.1" ></ui5-tree-item>
|
|
139
|
+
</ui5-tree-item>
|
|
140
|
+
<ui5-tree-item navigated text="Tree 2 - this item is already navigated" >
|
|
141
|
+
<ui5-tree-item navigated text="Tree 2.1" ></ui5-tree-item>
|
|
142
|
+
</ui5-tree-item>
|
|
143
|
+
<ui5-tree-item text="Tree 3" >
|
|
144
|
+
<ui5-tree-item text="Tree 3.1" ></ui5-tree-item>
|
|
145
|
+
</ui5-tree-item>
|
|
146
|
+
</ui5-tree>
|
|
147
|
+
|
|
148
|
+
<ui5-tree mode="MultiSelect">
|
|
149
|
+
<div slot="header" class="hdr">
|
|
150
|
+
<ui5-title>Tree with custom items</ui5-title>
|
|
151
|
+
</div>
|
|
152
|
+
<ui5-tree-item-custom
|
|
153
|
+
expanded="true"
|
|
154
|
+
show-toggle-button
|
|
155
|
+
hide-selection-element
|
|
156
|
+
type="Active"
|
|
157
|
+
level="1"
|
|
158
|
+
>
|
|
159
|
+
<ui5-button slot="content">Level 1</ui5-button>
|
|
160
|
+
|
|
161
|
+
<ui5-tree-item-custom
|
|
162
|
+
type="Active"
|
|
163
|
+
show-toggle-button
|
|
164
|
+
level="2"
|
|
165
|
+
expanded="true"
|
|
166
|
+
>
|
|
167
|
+
<ui5-select slot="content">
|
|
168
|
+
<ui5-option>Level 2</ui5-option>
|
|
169
|
+
<ui5-option>Option 2.1</ui5-option>
|
|
170
|
+
<ui5-option>Option 2.3</ui5-option>
|
|
171
|
+
</ui5-select>
|
|
172
|
+
|
|
173
|
+
<ui5-tree-item-custom
|
|
174
|
+
hide-selection-element
|
|
175
|
+
type="Active"
|
|
176
|
+
level="3"
|
|
177
|
+
>
|
|
178
|
+
<ui5-button slot="content">Level 3</ui5-button>
|
|
179
|
+
</ui5-tree-item-custom>
|
|
180
|
+
</ui5-tree-item-custom>
|
|
181
|
+
</ui5-tree-item-custom>
|
|
182
|
+
</ui5-tree>
|
|
183
|
+
|
|
184
|
+
<ui5-tree mode="MultiSelect" id="allItemsMultiSelect">
|
|
185
|
+
<ui5-tree-item text="Should have checkbox">
|
|
186
|
+
<ui5-tree-item text="Should have checkbox">
|
|
187
|
+
<ui5-tree-item
|
|
188
|
+
class="lastItem"
|
|
189
|
+
text="Should have checkbox"
|
|
190
|
+
></ui5-tree-item>
|
|
191
|
+
<ui5-tree-item text="Should have checkbox"></ui5-tree-item>
|
|
192
|
+
</ui5-tree-item>
|
|
193
|
+
<ui5-tree-item text="Should have checkbox"></ui5-tree-item>
|
|
194
|
+
</ui5-tree-item>
|
|
195
|
+
</ui5-tree>
|
|
196
|
+
|
|
197
|
+
<script>
|
|
198
|
+
const mouseOverInput = document.getElementById("mouseover-counter");
|
|
199
|
+
const mouseOutInput = document.getElementById("mouseout-counter");
|
|
200
|
+
|
|
201
|
+
document.getElementById("density").addEventListener("ui5-selection-change", function(event) {
|
|
202
|
+
var selectedButton = event.detail.selectedButton;
|
|
203
|
+
if (selectedButton.textContent === "Compact") {
|
|
204
|
+
document.body.classList.add("sapUiSizeCompact");
|
|
205
|
+
} else {
|
|
206
|
+
document.body.classList.remove("sapUiSizeCompact");
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
document.getElementById("tree").addEventListener("ui5-item-mouseover", function(event) {
|
|
211
|
+
console.log("Item mouseover: ", event.detail.item);
|
|
212
|
+
mouseOverInput.value++;
|
|
213
|
+
});
|
|
214
|
+
document.getElementById("tree").addEventListener("ui5-item-mouseout", function(event) {
|
|
215
|
+
console.log("Item mouseout: ", event.detail.item);
|
|
216
|
+
mouseOutInput.value++;
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
document.getElementById("tree").addEventListener("ui5-item-click", function(event) {
|
|
220
|
+
console.log("Item clicked: ", event.detail.item);
|
|
221
|
+
});
|
|
222
|
+
|
|
223
|
+
document.getElementById("tree").addEventListener("ui5-item-toggle", function(event) {
|
|
224
|
+
console.log("Item toggled: ", event.detail.item);
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
document.getElementById("tree").addEventListener("ui5-item-delete", function(event) {
|
|
228
|
+
console.log("Item delete button pressed: ", event.detail.item);
|
|
229
|
+
var node = event.detail.item;
|
|
230
|
+
node.parentElement.removeChild(node);
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
document.getElementById("tree").addEventListener("ui5-selection-change", function(event) {
|
|
234
|
+
console.log("Selection changed from: ", event.detail.previouslySelectedItems, "to: ", event.detail.selectedItems);
|
|
235
|
+
console.log("Selection change target item is: ", event.detail.targetItem);
|
|
236
|
+
});
|
|
237
|
+
|
|
238
|
+
document.getElementById("modeSelect").addEventListener("ui5-change", function(event) {
|
|
239
|
+
var newMode = event.detail.selectedOption.textContent;
|
|
240
|
+
var tree = document.getElementById("tree");
|
|
241
|
+
tree.mode = newMode;
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
document.getElementById("expandAll").addEventListener("click", function(event) {
|
|
245
|
+
var trees = Array.prototype.slice.call(document.getElementsByTagName("ui5-tree"));
|
|
246
|
+
var tree = document.getElementById("tree");
|
|
247
|
+
tree.walk(function(node) {
|
|
248
|
+
node.expanded = true;
|
|
249
|
+
});
|
|
250
|
+
});
|
|
251
|
+
|
|
252
|
+
document.getElementById("collapseAll").addEventListener("click", function(event) {
|
|
253
|
+
var tree = document.getElementById("tree");
|
|
254
|
+
tree.walk(function(node) {
|
|
255
|
+
node.expanded = false;
|
|
256
|
+
});
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
document.getElementById("expandLevel1").addEventListener("click", function(event) {
|
|
260
|
+
var tree = document.getElementById("tree");
|
|
261
|
+
tree.walk(function(node, level) {
|
|
262
|
+
node.expanded = (level === 1);
|
|
263
|
+
});
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
document.getElementById("expandLevel2").addEventListener("click", function(event) {
|
|
267
|
+
var tree = document.getElementById("tree");
|
|
268
|
+
tree.walk(function(node, level) {
|
|
269
|
+
node.expanded = (level <= 2);
|
|
270
|
+
});
|
|
271
|
+
});
|
|
272
|
+
|
|
273
|
+
var dynamicTree = document.getElementById("treeDynamic");
|
|
274
|
+
var busyIndicator = document.getElementById("busy");
|
|
275
|
+
dynamicTree.addEventListener("ui5-item-toggle", function(event) {
|
|
276
|
+
var item = event.detail.item; // get the node that is toggled
|
|
277
|
+
|
|
278
|
+
// Only for the dynamic node, only when it's empty
|
|
279
|
+
if (item.id === "dynamicNode" && item.children.length === 0) {
|
|
280
|
+
busyIndicator.active = true;
|
|
281
|
+
event.preventDefault(); // do not let the toggle button switch yet
|
|
282
|
+
setTimeout(function() {
|
|
283
|
+
var newItem = document.createElement("ui5-tree-item"); // Fetching from db....
|
|
284
|
+
newItem.text = "Node fetched from DB after 2 sec";
|
|
285
|
+
item.appendChild(newItem);
|
|
286
|
+
item.toggle(); // now manually switch
|
|
287
|
+
busyIndicator.active = false;
|
|
288
|
+
}, 2000);
|
|
289
|
+
}
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
var preventableClickTree = document.getElementById("preventable-click-event");
|
|
293
|
+
var preventedCounter = document.getElementById("prevented-counter");
|
|
294
|
+
preventableClickTree.addEventListener("ui5-item-click", function (event) {
|
|
295
|
+
event.preventDefault();
|
|
296
|
+
preventedCounter.value++;
|
|
297
|
+
});
|
|
298
|
+
|
|
299
|
+
var indetereminateTree = document.getElementById("treeIndeterminate");
|
|
300
|
+
indetereminateTree.addEventListener("ui5-selection-change", function(event) {
|
|
301
|
+
selectionChangeTargetItemResult.value = event.detail.targetItem.id;
|
|
302
|
+
});
|
|
303
|
+
|
|
304
|
+
</script>
|
|
305
|
+
</body>
|
|
306
|
+
|
|
307
|
+
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
|
|
7
|
+
<title>ui5-tree</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
|
+
<script>// delete Document.prototype.adoptedStyleSheets;</script>
|
|
12
|
+
|
|
13
|
+
<script data-ui5-config type="application/json">
|
|
14
|
+
{
|
|
15
|
+
"language": "EN"
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
<script type="module" crossorigin src="/assets/bundle.common.070dfc01.js"></script>
|
|
25
|
+
<link rel="stylesheet" href="/assets/Tree.e496f991.css">
|
|
26
|
+
</head>
|
|
27
|
+
|
|
28
|
+
<body class="tree1auto">
|
|
29
|
+
|
|
30
|
+
<ui5-tree id="tree" mode="MultiSelect">
|
|
31
|
+
<ui5-tree-item text="Tree 2" id="item" has-children></ui5-tree-item>
|
|
32
|
+
</ui5-tree>
|
|
33
|
+
|
|
34
|
+
<script>
|
|
35
|
+
const tree = document.getElementById("tree");
|
|
36
|
+
|
|
37
|
+
const template = `<ui5-tree-item text="Tree 2.1">
|
|
38
|
+
<ui5-tree-item text="Tree 2.1.1"></ui5-tree-item>
|
|
39
|
+
<ui5-tree-item text="Tree 2.1.2">
|
|
40
|
+
<ui5-tree-item text="Tree 2.1.2.1"></ui5-tree-item>
|
|
41
|
+
<ui5-tree-item text="Tree 2.1.2.2"></ui5-tree-item>
|
|
42
|
+
<ui5-tree-item text="Tree 2.1.2.3"></ui5-tree-item>
|
|
43
|
+
<ui5-tree-item text="Tree 2.1.2.5"></ui5-tree-item>
|
|
44
|
+
</ui5-tree-item>
|
|
45
|
+
</ui5-tree-item>
|
|
46
|
+
<ui5-tree-item text="Tree 2.2"></ui5-tree-item>`;
|
|
47
|
+
|
|
48
|
+
tree.addEventListener("item-toggle", (e) => {
|
|
49
|
+
if (e.detail.item.getAttribute("text") === "Tree 2") {
|
|
50
|
+
e.detail.item.innerHTML = template;
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
</body>
|
|
55
|
+
|
|
56
|
+
</html>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
// delete Document.prototype.adoptedStyleSheets;
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
<script
|
|
16
|
+
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
|
17
|
+
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="></script>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<script type="module" crossorigin src="/assets/bundle.common.070dfc01.js"></script>
|
|
21
|
+
<link rel="stylesheet" href="/assets/WheelSlider_Test_Page.e2918081.css">
|
|
22
|
+
</head>
|
|
23
|
+
<body class="wheelslider_test_page1auto">
|
|
24
|
+
<ui5-wheelslider id="wheelslider" expanded="true" label="Test"></ui5-wheelslider>
|
|
25
|
+
</body>
|
|
26
|
+
</html>
|