@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/PopoverArrowBounds.html DELETED
@@ -1,52 +0,0 @@
1
- <!DOCTYPE html>
2
- <html class="popover1auto">
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>PopoverArrowBounds</title>
8
-
9
- <script data-ui5-config type="application/json">
10
- {
11
- "language": "EN"
12
- }
13
- </script>
14
-
15
-
16
-
17
-
18
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
19
- <link rel="stylesheet" href="/assets/PopoverArrowBounds.32856f40.css">
20
- </head>
21
-
22
- <body class="sapUiSizeCompact">
23
- <ui5-button id="myBtn1" data-placement-type="Left" class="myBtn">1</ui5-button>
24
- <ui5-button id="myBtn2" data-placement-type="Left" data-vertical-align="Top" class="myBtn">2</ui5-button>
25
- <ui5-button id="myBtn3" data-placement-type="Bottom" class="myBtn">3</ui5-button>
26
- <ui5-button id="myBtn4" data-placement-type="Top" class="myBtn">4</ui5-button>
27
- <ui5-button id="myBtn5" data-placement-type="Left" class="myBtn">5</ui5-button>
28
- <ui5-button id="myBtn6" data-placement-type="Left" class="myBtn">6</ui5-button>
29
-
30
- <ui5-toggle-button id="customSizeBtn">Bigger Popover</ui5-toggle-button>
31
-
32
- <ui5-popover id="myPopover">My Popover</ui5-popover>
33
-
34
- <script>
35
- var myPopover = document.getElementById("myPopover");
36
-
37
- Array.from(document.querySelectorAll(".myBtn")).forEach(function (btn) {
38
- btn.addEventListener("click", function() {
39
- myPopover.placementType = btn.dataset.placementType;
40
- myPopover.verticalAlign = btn.dataset.verticalAlign;
41
- myPopover.showAt(btn);
42
- });
43
- });
44
-
45
- var customSizeBtn = document.getElementById("customSizeBtn");
46
- customSizeBtn.addEventListener("click", function (event) {
47
- myPopover.classList.toggle("customSize");
48
- })
49
- </script>
50
- </body>
51
-
52
- </html>
package/dist/test/pages/Popups.html DELETED
@@ -1,131 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
- <title>Popups</title>
7
-
8
- <script>
9
- // delete Document.prototype.adoptedStyleSheets
10
- </script>
11
-
12
- <script data-ui5-config type="application/json">
13
- {
14
- "language": "EN"
15
- }
16
- </script>
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
- <script type="module" crossorigin src="/assets/test/pages/Popups.html.c29d144e.js"></script>
25
- <link rel="modulepreload" crossorigin href="/assets/bundle.common.fa62259e.js">
26
- <link rel="stylesheet" href="/assets/Popups.134655f2.css">
27
- </head>
28
- <body class="popups1auto">
29
-
30
- <div class="popups2auto">
31
- <content id="popover"></content>
32
- </div>
33
-
34
- <ui5-popover placement-type="Bottom" horizontal-align="Stretch" hide-arrow initial-focus="input1" class="wcPopoverWithList">
35
- <ui5-list id="myList" indent separators="Inner" mode="MultiSelect" footer-text="Copyright" no-data-text="No data">
36
- <!-- Header -->
37
- <div class="popups3auto" slot="header">
38
- <ui5-title>Countries:</ui5-title>
39
- <ui5-button design="Accept">OK</ui5-button>
40
- </div>
41
- <!-- Items -->
42
- <ui5-li>Argentina</ui5-li>
43
- <ui5-li>Bulgaria</ui5-li>
44
- <ui5-li-custom><ui5-label>China</ui5-label><ui5-checkbox text="Checkbox"></ui5-checkbox></ui5-li-custom>
45
- <ui5-li-custom><ui5-button>Click me</ui5-button></ui5-li-custom>
46
- </ui5-list>
47
- </ui5-popover>
48
-
49
- <header class="header">
50
- <h2 class="header-title">Popups</h2>
51
- </header>
52
-
53
- <!-- Input with Popover -->
54
- <section class="group_colored">
55
- <h3 class="group-title">Popover</h3>
56
- <h5>JS Components</h5>
57
- <!--<content id="input1"></content>-->
58
- <!--<content id="inputPopover"></content>-->
59
- <h5>Web Component</h5>
60
- </section>
61
-
62
- <!-- Dialog -->
63
- <section class="group">
64
- <h3 class="group-title">Dialog</h3>
65
- <h5>JS Components</h5>
66
- <!--<content id="btnOpenDialog"></content>-->
67
- <!--<content id="dialog"></content>-->
68
- <h5>Web Component</h5>
69
-
70
- <ui5-button class="wcBtnOpenDialog">Open Dialog</ui5-button>
71
-
72
- <ui5-dialog class="wcDialog" initial-focus="focusButton" header-text="Web Component Dialog">
73
-
74
- <div slot="header" id="head1" class="popups4auto">
75
- <div class="popups5auto">Custom Header</div>
76
- <ui5-button icon="decline"></ui5-button>
77
- </div>
78
-
79
- <div slot="footer" class="popups4auto">
80
- <div class="popups5auto">Custom Footer</div>
81
- <ui5-button id="focusButton">Accept</ui5-button>
82
- </div>
83
- <ui5-date-picker></ui5-date-picker>
84
- <ui5-button class="wcBtnOpenNewDialog">Open New Dialog</ui5-button>
85
- <ui5-button class="wcBtnCloseDialog">Close Dialog</ui5-button>
86
-
87
- <ui5-popover placement-type="Right" class="wcNewDialogPopover" header-text="Second Popover">
88
- <ui5-button class="wcBtnOpenNewPopoverDialog1">Open New Popover </ui5-button>
89
- <ui5-button class="wcBtnClosePopoverDialog1">Popover Button</ui5-button>
90
- </ui5-popover>
91
- <ui5-button class="wcBtnOpenNewDialogPopover">Open New Popover</ui5-button>
92
- <ui5-dialog class="wcNewDialog" header-text="Second Dialog">
93
- <ui5-button class="wcNewDialog1">Open New Dialog</ui5-button>
94
- <ui5-button class="wcBtnCloseDialog1">Dialog Button</ui5-button>
95
- </ui5-dialog>
96
- </ui5-dialog>
97
- </section>
98
- <!-- Popover -->
99
- <section class="group group_colored">
100
- <h3 class="group-title">Popover</h3>
101
- <h5>JS Components</h5>
102
- <!--<div class="popups6auto">-->
103
- <!--<content class="popups7auto" id="btnOpenPopover"></content>-->
104
- <!--</div>-->
105
- <h5>Web Component</h5>
106
- <ui5-button class="wcBtnOpenPopover">Open Popover</ui5-button>
107
- <ui5-popover placement-type="Top" class="wcPopover" header-text="Web Component Popover">
108
- <div slot="header" class="popups4auto">
109
- <div class="popups5auto">Custom Header</div>
110
- <ui5-button icon="decline"></ui5-button>
111
- </div>
112
- <div slot="footer" class="popups4auto">
113
- <div class="popups5auto">Custom Footer</div>
114
- <ui5-button>Accept</ui5-button>
115
- </div>
116
- <ui5-date-picker></ui5-date-picker>
117
- <ui5-popover placement-type="Right" class="wcNewPopover" header-text="Second Popover">
118
- <ui5-button class="wcBtnOpenNewPopover1">Open New Popover </ui5-button>
119
- <ui5-button class="wcBtnClosePopover1">Popover Button</ui5-button>
120
- </ui5-popover>
121
- <ui5-button class="wcBtnOpenNewPopover">Open New Popover </ui5-button>
122
- <ui5-button class="wcBtnClosePopover">Close Popover</ui5-button>
123
- <ui5-button class="wcBtnOpenNewPopoverDialog11">Open New Dialog</ui5-button>
124
- <ui5-dialog class="wcNewPopoverDialog11" header-text="Second Dialog">
125
- <ui5-button class="wcNewPopoverDialog1">Open New Dialog</ui5-button>
126
- <ui5-button class="wcBtnClosePopoverDialog1">Dialog Button</ui5-button>
127
- </ui5-dialog>
128
- </ui5-popover>
129
- </section>
130
- </body>
131
- </html>
package/dist/test/pages/ProgressIndicator.html DELETED
@@ -1,151 +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
-
8
- <title>Progress Indicator</title>
9
- <script>
10
- // delete Document.prototype.adoptedStyleSheets
11
- </script>
12
-
13
-
14
-
15
-
16
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
17
- <link rel="stylesheet" href="/assets/ProgressIndicator.bce2138a.css">
18
- </head>
19
-
20
- <body class="progressindicator1auto">
21
- <br />
22
- Value is 0
23
- <br />
24
- <ui5-progress-indicator value="0"></ui5-progress-indicator>
25
- <br />
26
- Value is 100
27
- <br />
28
- <ui5-progress-indicator value="100"></ui5-progress-indicator>
29
- <br />
30
- Value less than 50
31
- <br />
32
- <ui5-progress-indicator value="25"></ui5-progress-indicator>
33
- <br />
34
- Value greater than 50
35
- <br />
36
- <ui5-progress-indicator value="75"></ui5-progress-indicator>
37
- <br />
38
- Value less than 50 without value
39
- <br />
40
- <ui5-progress-indicator value="25" hide-value></ui5-progress-indicator>
41
- <br />
42
- Value greater than 50 without value
43
- <br />
44
- <ui5-progress-indicator value="75" hide-value></ui5-progress-indicator>
45
- <br />
46
- ValueState.None
47
- <br />
48
- <ui5-progress-indicator value-state="None" value="25"></ui5-progress-indicator>
49
- <br />
50
- ValueState.Error
51
- <br />
52
- <ui5-progress-indicator value-state="Error" value="25"></ui5-progress-indicator>
53
- <br />
54
- ValueState.Warning
55
- <br />
56
- <ui5-progress-indicator value-state="Warning" value="25"></ui5-progress-indicator>
57
- <br />
58
- ValueState.Success
59
- <br />
60
- <ui5-progress-indicator value-state="Success" value="25"></ui5-progress-indicator>
61
- <br />
62
- ValueState.Information
63
- <br />
64
- <ui5-progress-indicator value-state="Information" value="25"></ui5-progress-indicator>
65
- <br />
66
- Disabled
67
- <br />
68
- <ui5-progress-indicator disabled value="25"></ui5-progress-indicator>
69
- <br />
70
- ValueState.None
71
- <br />
72
- <ui5-progress-indicator value-state="None" value="60"></ui5-progress-indicator>
73
- <br />
74
- ValueState.Error
75
- <br />
76
- <ui5-progress-indicator value-state="Error" value="60"></ui5-progress-indicator>
77
- <br />
78
- ValueState.Warning
79
- <br />
80
- <ui5-progress-indicator value-state="Warning" value="60"></ui5-progress-indicator>
81
- <br />
82
- ValueState.Success
83
- <br />
84
- <ui5-progress-indicator value-state="Success" value="60"></ui5-progress-indicator>
85
- <br />
86
- ValueState.Information
87
- <br />
88
- <ui5-progress-indicator value-state="Information" value="60"></ui5-progress-indicator>
89
- <br />
90
- Disabled
91
- <br />
92
- <ui5-progress-indicator disabled value="60"></ui5-progress-indicator>
93
- <br />
94
- Custom Display Value
95
- <br />
96
- <ui5-progress-indicator value="25" display-value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."></ui5-progress-indicator>
97
- <br />
98
- Custom Size 1
99
- <br />
100
- <ui5-progress-indicator value="25" class="progressindicator2auto"></ui5-progress-indicator>
101
- <br />
102
- Custom Size 2
103
- <br />
104
- <ui5-progress-indicator value="25" class="progressindicator2auto"></ui5-progress-indicator>
105
- <br />
106
- Test progress indicator
107
- <br />
108
- <ui5-progress-indicator id="test-progress-indicator"></ui5-progress-indicator>
109
- <ui5-button id="firstBtn">Set 0 value</ui5-button>
110
- <ui5-button id="secondBtn">Set 25 value</ui5-button>
111
- <ui5-button id="thirdBtn">Set 50 value</ui5-button>
112
- <ui5-button id="fourthBtn">Set 75 value</ui5-button>
113
- <ui5-button id="fifthBtn">Set 100 value</ui5-button>
114
- <ui5-button id="sixthBtn">Set negative value</ui5-button>
115
- <ui5-button id="seventhBtn">Set larger than 100 value</ui5-button>
116
-
117
- <script>
118
- var progressIndicator = document.getElementById("test-progress-indicator");
119
- var button1 = document.getElementById("firstBtn");
120
- var button2 = document.getElementById("secondBtn");
121
- var button3 = document.getElementById("thirdBtn");
122
- var button4 = document.getElementById("fourthBtn");
123
- var button5 = document.getElementById("fifthBtn");
124
- var button6 = document.getElementById("sixthBtn");
125
- var button7 = document.getElementById("seventhBtn");
126
-
127
- button1.addEventListener("click", function (event) {
128
- progressIndicator.value = 0;
129
- });
130
- button2.addEventListener("click", function (event) {
131
- progressIndicator.value = 25;
132
- });
133
- button3.addEventListener("click", function (event) {
134
- progressIndicator.value = 50;
135
- });
136
- button4.addEventListener("click", function (event) {
137
- progressIndicator.value = 75;
138
- });
139
- button5.addEventListener("click", function (event) {
140
- progressIndicator.value = 100;
141
- });
142
- button6.addEventListener("click", function (event) {
143
- progressIndicator.value = -10;
144
- });
145
- button7.addEventListener("click", function (event) {
146
- progressIndicator.value = 110;
147
- });
148
- </script>
149
- </body>
150
-
151
- </html>
package/dist/test/pages/RTL.html DELETED
@@ -1,118 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
5
- <meta charset="utf-8">
6
-
7
- <title>RTL and Language</title>
8
- <script>
9
- // delete Document.prototype.adoptedStyleSheets
10
- </script>
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
19
- <link rel="stylesheet" href="/assets/RTL.63030fdf.css">
20
- </head>
21
-
22
- <body class="rtl1auto">
23
-
24
-
25
- <div class="rtl2auto">
26
- <ui5-segmented-button id="tb">
27
- <ui5-toggle-button pressed>EN</ui5-toggle-button>
28
- <ui5-toggle-button>DE</ui5-toggle-button>
29
- <ui5-toggle-button>BG</ui5-toggle-button>
30
- <ui5-toggle-button>ES</ui5-toggle-button>
31
- <ui5-toggle-button>HE</ui5-toggle-button>
32
- <ui5-toggle-button>AR</ui5-toggle-button>
33
- </ui5-segmented-button>
34
- <div class="rtl3auto"></div>
35
- <ui5-label class="rtl4auto">Manually switch RTL:</ui5-label>
36
- <ui5-switch id="sw"></ui5-switch>
37
- </div>
38
-
39
- <section>
40
- <ui5-textarea maxlength="20" show-exceeded-text class="rtl5auto"></ui5-textarea>
41
- </section>
42
-
43
- <section>
44
- <ui5-title>This section does not define dir</ui5-title>
45
- <br>
46
- <ui5-checkbox text="Click me"></ui5-checkbox>
47
- <br>
48
- <ui5-checkbox text="Click me"></ui5-checkbox>
49
- <br>
50
- <ui5-checkbox text="Click me"></ui5-checkbox>
51
- </section>
52
-
53
- <section dir="ltr">
54
- <ui5-title>This section defines dir=LTR</ui5-title>
55
- <br>
56
- <ui5-checkbox text="Click me"></ui5-checkbox>
57
- <br>
58
- <ui5-checkbox text="Click me"></ui5-checkbox>
59
- <br>
60
- <ui5-checkbox text="This checkbox however defines dir=rtl" dir="rtl"></ui5-checkbox>
61
- </section>
62
-
63
- <section dir="rtl">
64
- <ui5-title>This section defines dir=RTL</ui5-title>
65
- <br>
66
- <ui5-checkbox text="Click me"></ui5-checkbox>
67
- <br>
68
- <ui5-checkbox text="Click me"></ui5-checkbox>
69
- <br>
70
- <ui5-checkbox text="This checkbox however defines dir=ltr" dir="ltr"></ui5-checkbox>
71
- </section>
72
-
73
- <ui5-date-picker></ui5-date-picker>
74
- <script>
75
-
76
- setTimeout(function() {
77
- window['sap-ui-webcomponents-bundle'].attachDirectionChange(function() {
78
- console.log("Direction changed");
79
- });
80
- }, 1000);
81
-
82
- // Utility function to change RTL and apply the changes
83
- function setDir(dir) {
84
- document.body.dir = dir;
85
- window['sap-ui-webcomponents-bundle'].applyDirection();
86
- }
87
-
88
- function setDirByLang(lang) {
89
- if (lang === "he" || lang === "ar") {
90
- setDir("rtl");
91
- } else {
92
- setDir("ltr");
93
- }
94
- }
95
-
96
- function setLanguage(lang) {
97
- return window['sap-ui-webcomponents-bundle'].configuration.setLanguage(lang);
98
- }
99
-
100
- document.getElementById("sw").addEventListener("ui5-click", function(e) {
101
- if (e.target.checked) {
102
- setDir("rtl");
103
- } else {
104
- setDir("ltr");
105
- }
106
- });
107
-
108
- document.getElementById("tb").addEventListener("ui5-selection-change", function(e) {
109
- var lang = e.detail.selectedButton.textContent.toLowerCase();
110
-
111
- setLanguage(lang).then(function() {
112
- setDirByLang(lang);
113
- });
114
- });
115
- </script>
116
-
117
- </body>
118
- </html>
package/dist/test/pages/RadioButton.html DELETED
@@ -1,201 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
5
- <meta charset="utf-8">
6
- <title>ui5-radio-button</title>
7
-
8
-
9
- <script type="module" crossorigin src="/assets/bundle.common.fa62259e.js"></script>
10
- <link rel="stylesheet" href="/assets/RadioButton.2216f159.css">
11
- </head>
12
-
13
- <body class="radiobutton1auto">
14
-
15
- <ui5-radio-button name="simple" text="Option A"></ui5-radio-button>
16
- <ui5-radio-button checked name="simple" text="Option B"></ui5-radio-button>
17
- <ui5-radio-button name="simple" text="Option C"></ui5-radio-button>
18
-
19
- <ui5-title level="H1">Radios within a group</ui5-title><br>
20
- <div aria-labelledby="radioGroupTitle1" role="radiogroup" class="radio-section">
21
- <ui5-title id="radioGroupTitle1">Group1 - None pre-selection</ui5-title>
22
- <ui5-radio-button id="testRbtn" text="N/A" disabled name="test"></ui5-radio-button>
23
- <ui5-radio-button id="testRbtn1" text="Male" name="test"></ui5-radio-button>
24
- <ui5-radio-button id="testRbtn2" text="Female" name="test"></ui5-radio-button>
25
- </div>
26
-
27
- <div aria-labelledby="radioGroupTitle2" role="radiogroup" class="radio-section">
28
- <ui5-title id="radioGroupTitle2">Group 2</ui5-title>
29
- <ui5-radio-button id="testRbtn11" name="test2" checked text="Selected A"></ui5-radio-button>
30
- <ui5-radio-button id="testRbtn12" name="test2" disabled text="Disabled B"></ui5-radio-button>
31
- <ui5-radio-button id="testRbtn13" name="test2" text="Standard C"></ui5-radio-button>
32
- </div>
33
-
34
- <div aria-labelledby="radioGroupTitle3" role="radiogroup" class="radio-section">
35
- <ui5-title id="radioGroupTitle3">Group 3</ui5-title>
36
- <ui5-input id="tabField"></ui5-input>
37
- <ui5-radio-button id="groupRb1" name="a" checked text="Option A long long should shrink long long text text text text text text text text"></ui5-radio-button>
38
- <ui5-radio-button id="groupRb2" name="a" disabled text="Option C"></ui5-radio-button>
39
- <ui5-radio-button id="groupRb3" name="a" text="Option D"></ui5-radio-button>
40
- <ui5-radio-button id="groupRbReadOnly" name="a" readonly text="Option E"></ui5-radio-button>
41
- </div>
42
-
43
- <div aria-labelledby="radioGroupTitle4" role="radiogroup" class="radio-section">
44
- <ui5-title id="radioGroupTitle4">Group 4</ui5-title>
45
- <ui5-radio-button id="groupRb4" name="b" checked text="Option A long long should shrink long long text text text text text text text text"></ui5-radio-button>
46
- <ui5-radio-button id="groupRb5" name="b" disabled text="Option C"></ui5-radio-button>
47
- <ui5-radio-button id="groupRb6" name="b" text="Option D"></ui5-radio-button>
48
- </div>
49
-
50
- <div aria-labelledby="radioGroupTitle5" role="radiogroup" id="radioGroup" class="radio-section">
51
- <ui5-title id="radioGroupTitle5">Group 5 - Value states</ui5-title>
52
- <ui5-label id="lblRadioGroup">N/A</ui5-label>
53
- <ui5-label id="lblEventCounter">0</ui5-label>
54
- <ui5-radio-button id="groupRb7" text="None selected" value-state="None" name="GroupB"></ui5-radio-button>
55
- <ui5-radio-button id="groupRb8" text="Warning" value-state="Warning" checked name="GroupB"></ui5-radio-button>
56
- <ui5-radio-button id="groupRb9" text="Error" value-state="Error" checked name="GroupB"></ui5-radio-button>
57
- <ui5-radio-button text="Success" value-state="Success" checked name="GroupB"></ui5-radio-button>
58
- <ui5-radio-button text="Information" value-state="Information" checked name="GroupB"></ui5-radio-button>
59
- <ui5-radio-button id="groupRb10" text="Default selected" value-state="None" checked name="GroupB"></ui5-radio-button>
60
- <ui5-radio-button id="groupRb11" text="Radio From Another Group" value-state="None" checked name="GroupBB"></ui5-radio-button>
61
- </div>
62
-
63
- <ui5-title level="H1">Standalone Radios Not Grouped</ui5-title>
64
- <div>
65
- <ui5-radio-button id="myRb6" checked text="Default"></ui5-radio-button>
66
- <ui5-radio-button id="myRb7" readonly text="read only"></ui5-radio-button>
67
- <ui5-radio-button id="myRb8" disabled text="disabled"></ui5-radio-button>
68
- <ui5-radio-button id="myRb9" readonly text="read only" checked></ui5-radio-button>
69
- <ui5-radio-button id="myRb10" disabled text="disabled" checked></ui5-radio-button>
70
- <ui5-radio-button id="myRb11" value-state="Warning" text="warning"></ui5-radio-button>
71
- <ui5-radio-button id="myRb12" value-state="Error" text="error"></ui5-radio-button>
72
- <ui5-radio-button id="myRb11" value-state="Success" text="success"></ui5-radio-button>
73
- <ui5-radio-button id="myRb12" value-state="Information" text="information"></ui5-radio-button>
74
- <ui5-radio-button id="myRb13" value-state="Warning" checked text="warning"></ui5-radio-button>
75
- <ui5-radio-button id="myRb14" value-state="Error" checked text="error"></ui5-radio-button>
76
- <ui5-radio-button id="myRb13" value-state="Success" checked text="success"></ui5-radio-button>
77
- <ui5-radio-button id="myRb14" value-state="Information" checked text="information"></ui5-radio-button>
78
- </div>
79
-
80
-
81
- <div class="radio-section">
82
- <ui5-radio-button id="rb1"></ui5-radio-button>
83
- <ui5-radio-button id="rb2" text="Option B"></ui5-radio-button>
84
- <ui5-radio-button id="rb3" wrapping-type="Normal" text="Option C"></ui5-radio-button>
85
- <ui5-radio-button id="rb4" disabled text="Option D"></ui5-radio-button>
86
- <ui5-radio-button id="truncatingRb" text="Long long long long long long long long long long text that should truncate at some point"></ui5-radio-button>
87
- <br/>
88
- <ui5-radio-button id="wrappingRb" wrapping-type="Normal" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." class="radiobutton2auto"></ui5-radio-button>
89
- <ui5-input id="field"></ui5-input>
90
- </div>
91
-
92
- <ui5-title level="H2">accessibleName</ui5-title>
93
- <div>
94
- <ui5-radio-button id="rb-acc-name" accessible-name="Sample Label"></ui5-radio-button>
95
- <ui5-radio-button id="rb-acc-name-text" text="Sample Text" accessible-name="Sample Label"></ui5-radio-button>
96
- </div>
97
-
98
- <ui5-title level="H2">accessibleNameRef</ui5-title>
99
- <div>
100
- <div class="radio-section-horizontal">
101
- <ui5-label id="lbl-rb-acc-name-ref">Label for this radio button:</ui5-label>
102
- <ui5-radio-button id="rb-acc-name-ref" accessible-name-ref="lbl-rb-acc-name-ref"></ui5-radio-button>
103
- </div>
104
- <div class="radio-section-horizontal">
105
- <ui5-label id="lbl-rb-acc-name-ref-with-text">Label for this radio button:</ui5-label>
106
- <ui5-radio-button id="rb-acc-name-ref-with-text" accessible-name-ref="lbl-rb-acc-name-ref-with-text" text="Sample Text"></ui5-radio-button>
107
- </div>
108
- <div class="radio-section-horizontal">
109
- <ui5-list>
110
- <ui5-li-custom>
111
- <ui5-radio-button id="rb-acc-name-ref-wrapped" accessible-name-ref="lbl-rb-acc-name-ref"></ui5-radio-button>
112
- </ui5-li-custom>
113
- </ui5-list>
114
- </div>
115
- </div>
116
-
117
- <p>*Params</p>
118
- <p>
119
- <ui5-label>- for compact add 'ui5-content-density-compact' class to any dom element</ui5-label>
120
- </p>
121
- <p>
122
- <ui5-label>- for belize use 'sap-ui-theme=sap_belize'</ui5-label>
123
- </p>
124
-
125
- <ui5-title level="H2">Navigation in RTL</ui5-title><br>
126
- <div dir="rtl">
127
- <ui5-radio-button id="rtlOptionA" name="rtlGroup" text="Option A" checked></ui5-radio-button>
128
- <ui5-radio-button id="rtlOptionB" name="rtlGroup" text="Option B"></ui5-radio-button>
129
- <ui5-radio-button id="rtlOptionC" name="rtlGroup" text="Option C"></ui5-radio-button>
130
- </div>
131
-
132
- <ui5-label>add/remove radio buttons in DOM</ui5-label>
133
- <ui5-switch id="rbGroupSwitch"></ui5-switch>
134
-
135
- <div id="rbGroupContainer"></div>
136
-
137
- <ui5-title level="H2">Form Support</ui5-title><br>
138
- <form>
139
- <div aria-labelledby="formRadioGroupTitle1" aria-required="true" role="radiogroup" class="radio-section">
140
- <ui5-title id="formRadioGroupTitle1">Select:</ui5-title>
141
- <ui5-radio-button id="formRadioBtnRequired" value="optionA" name="formGroup" text="Option A" required></ui5-radio-button>
142
- <ui5-radio-button value="optionB" name="formGroup" text="Option B"></ui5-radio-button>
143
- <ui5-radio-button value="optionC" name="formGroup" text="Option C"></ui5-radio-button>
144
- </div>
145
- <input type="submit">
146
- </form>
147
-
148
- <ui5-title level="H2">Form Support - native HTML</ui5-title><br>
149
- <form>
150
- Select:
151
- <br/>
152
- <label>
153
- <input type="radio" name="nativeFormGroup" value="optionA" required>Option A
154
- </label>
155
- <br/>
156
- <label>
157
- <input type="radio" name="nativeFormGroup" value="optionB">Option B
158
- </label>
159
- <br/>
160
- <label>
161
- <input type="radio" name="nativeFormGroup" value="optionC">Option C
162
- </label>
163
- <br/>
164
- <input type="submit">
165
- </form>
166
-
167
- <script>
168
- var counter = 0;
169
- var groupEventCounter = 0;
170
-
171
- [window["rb1"], window["rb2"], window["rb3"], window["rb4"]].forEach(function (radio) {
172
- radio.addEventListener("ui5-change", function (event) {
173
- counter += 1;
174
- window["field"].value = counter;
175
- });
176
- })
177
-
178
- radioGroup.addEventListener("ui5-change", function (e) {
179
- var radio = e.target;
180
- lblRadioGroup.innerHTML = radio.text;
181
- lblEventCounter.innerHTML = ++groupEventCounter;
182
- });
183
-
184
- var rbGroupSwitch = document.getElementById("rbGroupSwitch");
185
- var rbGroupContainer = document.getElementById("rbGroupContainer");
186
-
187
- rbGroupSwitch.addEventListener("ui5-change", function (e) {
188
- rbGroupContainer.innerHTML = e.target.checked ? createRbGroup() : "";
189
- });
190
-
191
- function createRbGroup() {
192
- return `
193
- <ui5-radio-button name="sameGroup" text="A"></ui5-radio-button>
194
- <ui5-radio-button name="sameGroup" text="B"></ui5-radio-button>
195
- <ui5-radio-button name="sameGroup" text="C"></ui5-radio-button>
196
- `;
197
- }
198
-
199
- </script>
200
- </body>
201
- </html>