@ui5/webcomponents-fiori 1.9.2 → 1.9.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 (142) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/LICENSE.txt +201 -0
  3. package/dist/SideNavigation.js +8 -8
  4. package/dist/api.json +1 -1
  5. package/dist/assets/{AddColumn.1017717d.js → AddColumn.f98dfabf.js} +1 -1
  6. package/dist/assets/{AddPeople.a4884713.js → AddPeople.c97e9e39.js} +1 -1
  7. package/dist/assets/{BalloonSky.4b8e41c6.js → BalloonSky.6386fcca.js} +1 -1
  8. package/dist/assets/{ChartArea.a3a9cd78.js → ChartArea.e65df226.js} +1 -1
  9. package/dist/assets/{ChartArea2.e5eac93d.js → ChartArea2.37c40650.js} +1 -1
  10. package/dist/assets/{ChartBPMNFlow.4ee01002.js → ChartBPMNFlow.b66d6bad.js} +1 -1
  11. package/dist/assets/{ChartBar.b9ff195d.js → ChartBar.029b560b.js} +1 -1
  12. package/dist/assets/{ChartBullet.9458dd5d.js → ChartBullet.3904954d.js} +1 -1
  13. package/dist/assets/{ChartDoughnut.2b489405.js → ChartDoughnut.0266fc12.js} +1 -1
  14. package/dist/assets/{ChartFlow.e4c7ca12.js → ChartFlow.dddf651d.js} +1 -1
  15. package/dist/assets/{ChartGantt.8a6f24b1.js → ChartGantt.e77088ee.js} +1 -1
  16. package/dist/assets/{ChartOrg.8e0b53ac.js → ChartOrg.ad40ccb4.js} +1 -1
  17. package/dist/assets/{ChartPie.ba2dd3f0.js → ChartPie.8ceb30a9.js} +1 -1
  18. package/dist/assets/{CodePlaceholder.94e8e64e.js → CodePlaceholder.4e261fbc.js} +1 -1
  19. package/dist/assets/{Company.b367b141.js → Company.5fee3c89.js} +1 -1
  20. package/dist/assets/{Components.a5a28858.js → Components.af3cd8d2.js} +1 -1
  21. package/dist/assets/{Connection.0e3380e0.js → Connection.18f64904.js} +1 -1
  22. package/dist/assets/{EmptyCalendar.05ebfcd0.js → EmptyCalendar.b9d6292c.js} +1 -1
  23. package/dist/assets/{EmptyList.4f1dffd8.js → EmptyList.37984127.js} +1 -1
  24. package/dist/assets/{EmptyPlanningCalendar.d3ce99a7.js → EmptyPlanningCalendar.3b517245.js} +1 -1
  25. package/dist/assets/{ErrorScreen.76a8d6d7.js → ErrorScreen.2cbabea0.js} +1 -1
  26. package/dist/assets/{ExternalLink.6faa7e8c.js → ExternalLink.82648410.js} +1 -1
  27. package/dist/assets/{FaceID.a0d65f91.js → FaceID.987062c7.js} +1 -1
  28. package/dist/assets/{FilterTable.c1a374cc.js → FilterTable.3d65c224.js} +1 -1
  29. package/dist/assets/{Fingerprint.b942472b.js → Fingerprint.963a73c5.js} +1 -1
  30. package/dist/assets/{GroupTable.30cad174.js → GroupTable.b3f7ca19.js} +1 -1
  31. package/dist/assets/{Lock.3d66b4df.js → Lock.19a2e57f.js} +1 -1
  32. package/dist/assets/{Mission.c5c8c308.js → Mission.f2ca8f3c.js} +1 -1
  33. package/dist/assets/{NoActivities.9e825452.js → NoActivities.fa70f44e.js} +1 -1
  34. package/dist/assets/{NoApplications.00651e4d.js → NoApplications.c46e2c4a.js} +1 -1
  35. package/dist/assets/{NoData.ab8d449e.js → NoData.dffb27db.js} +1 -1
  36. package/dist/assets/{NoEntries.7844dc13.js → NoEntries.90e5f217.js} +1 -1
  37. package/dist/assets/{NoFilterResults.4658936f.js → NoFilterResults.198eca38.js} +1 -1
  38. package/dist/assets/{NoFlows.f2bfa19a.js → NoFlows.f0f6eab2.js} +1 -1
  39. package/dist/assets/{NoMail.ab618a7a.js → NoMail.114c6bb3.js} +1 -1
  40. package/dist/assets/{NoMail_v1.467894ba.js → NoMail_v1.d8801574.js} +1 -1
  41. package/dist/assets/{NoNotifications.c73219e6.js → NoNotifications.802753ac.js} +1 -1
  42. package/dist/assets/{NoSavedItems.1c65783f.js → NoSavedItems.2ff23ae7.js} +1 -1
  43. package/dist/assets/{NoSavedItems_v1.3d73b0be.js → NoSavedItems_v1.6c33b3e8.js} +1 -1
  44. package/dist/assets/{NoSearchResults.6244134c.js → NoSearchResults.fbda1574.js} +1 -1
  45. package/dist/assets/{NoTasks.43acb013.js → NoTasks.17ffd1e7.js} +1 -1
  46. package/dist/assets/{NoTasks_v1.6fd13753.js → NoTasks_v1.7a8c77c8.js} +1 -1
  47. package/dist/assets/{NoUsers.84789cb7.js → NoUsers.d1576efa.js} +1 -1
  48. package/dist/assets/{PageNotFound.1723a0d9.js → PageNotFound.ea74d121.js} +1 -1
  49. package/dist/assets/{Radar.42b57e60.js → Radar.c1aac31b.js} +1 -1
  50. package/dist/assets/{ReloadScreen.02435eb9.js → ReloadScreen.a8b2b253.js} +1 -1
  51. package/dist/assets/{ResizeColumn.210743d2.js → ResizeColumn.8899d9c1.js} +1 -1
  52. package/dist/assets/{SearchEarth.46446ffa.js → SearchEarth.cc257ef1.js} +1 -1
  53. package/dist/assets/{SearchFolder.d2aa935b.js → SearchFolder.351f451f.js} +1 -1
  54. package/dist/assets/{Secrets.0f54b37c.js → Secrets.7129217e.js} +1 -1
  55. package/dist/assets/{Services.2ae75436.js → Services.13233f44.js} +1 -1
  56. package/dist/assets/{SessionExpired.2fad89c5.js → SessionExpired.4f80d36c.js} +1 -1
  57. package/dist/assets/{SessionExpiring.61d3fc1f.js → SessionExpiring.85576a93.js} +1 -1
  58. package/dist/assets/{SimpleBalloon.40b2b3d6.js → SimpleBalloon.b72ff8e4.js} +1 -1
  59. package/dist/assets/{SimpleBell.880a178d.js → SimpleBell.2d47a1a6.js} +1 -1
  60. package/dist/assets/{SimpleCalendar.776609c7.js → SimpleCalendar.4278bcde.js} +1 -1
  61. package/dist/assets/{SimpleCheckMark.d802c954.js → SimpleCheckMark.40bdd115.js} +1 -1
  62. package/dist/assets/{SimpleConnection.684ec9f6.js → SimpleConnection.cdd46b62.js} +1 -1
  63. package/dist/assets/{SimpleEmptyDoc.d47b21eb.js → SimpleEmptyDoc.632818f6.js} +1 -1
  64. package/dist/assets/{SimpleEmptyList.c6e428e6.js → SimpleEmptyList.03db0716.js} +1 -1
  65. package/dist/assets/{SimpleError.c60af702.js → SimpleError.18660b33.js} +1 -1
  66. package/dist/assets/{SimpleMagnifier.2090738a.js → SimpleMagnifier.6edd1611.js} +1 -1
  67. package/dist/assets/{SimpleMail.ba34adf7.js → SimpleMail.20217019.js} +1 -1
  68. package/dist/assets/{SimpleNoSavedItems.2363d3d3.js → SimpleNoSavedItems.a51282df.js} +1 -1
  69. package/dist/assets/{SimpleNotFoundMagnifier.87b8df3b.js → SimpleNotFoundMagnifier.c0d99f6b.js} +1 -1
  70. package/dist/assets/{SimpleReload.8f8d8518.js → SimpleReload.273a01c6.js} +1 -1
  71. package/dist/assets/{SimpleTask.fb32343c.js → SimpleTask.b1ce6c5c.js} +1 -1
  72. package/dist/assets/{SleepingBell.af45e043.js → SleepingBell.0614098e.js} +1 -1
  73. package/dist/assets/{SortColumn.7943b070.js → SortColumn.839a9207.js} +1 -1
  74. package/dist/assets/{Success.f81517eb.js → Success.5d008401.js} +1 -1
  75. package/dist/assets/{SuccessBalloon.8aa70886.js → SuccessBalloon.fc0f73d3.js} +1 -1
  76. package/dist/assets/{SuccessCheckMark.9e6bd8db.js → SuccessCheckMark.dc899de4.js} +1 -1
  77. package/dist/assets/{SuccessHighFive.065142df.js → SuccessHighFive.b4b8b363.js} +1 -1
  78. package/dist/assets/{SuccessScreen.75b0bf38.js → SuccessScreen.d650f222.js} +1 -1
  79. package/dist/assets/{SuccessfulAuth.ffdb478f.js → SuccessfulAuth.eed4cccb.js} +1 -1
  80. package/dist/assets/{Systems.b11a24c8.js → Systems.5d19c5a7.js} +1 -1
  81. package/dist/assets/{Teams.f03ef3ad.js → Teams.fba6ec80.js} +1 -1
  82. package/dist/assets/{Tent.25751bd5.js → Tent.05104a22.js} +1 -1
  83. package/dist/assets/{Tools.105970f3.js → Tools.b8d019ff.js} +1 -1
  84. package/dist/assets/{UnableToLoad.f20d5247.js → UnableToLoad.36959711.js} +1 -1
  85. package/dist/assets/{UnableToLoad.4de4df9c.js → UnableToLoad.c4dc754c.js} +1 -1
  86. package/dist/assets/{UnableToLoadImage.05f55727.js → UnableToLoadImage.93216556.js} +1 -1
  87. package/dist/assets/{UnableToUpload.94a9996b.js → UnableToUpload.b2ee4514.js} +1 -1
  88. package/dist/assets/{Unlock.61642965.js → Unlock.8b9a4fff.js} +1 -1
  89. package/dist/assets/{UnsuccessfulAuth.df26cafc.js → UnsuccessfulAuth.b70b66c5.js} +1 -1
  90. package/dist/assets/{UploadCollection.16113a6b.js → UploadCollection.cc2f2b30.js} +1 -1
  91. package/dist/assets/{User2.7266a50e.js → User2.15031d00.js} +1 -1
  92. package/dist/assets/test/pages/Bar.html.a5046c13.css +1 -0
  93. package/dist/assets/test/pages/BarcodeScannerDialog.html.b8919118.css +1 -0
  94. package/dist/assets/test/pages/Components.html.b41617c5.css +1 -0
  95. package/dist/assets/test/pages/DynamicSideContent.html.9b81aa24.css +1 -0
  96. package/dist/assets/test/pages/FCL.html.6763e066.css +1 -0
  97. package/dist/assets/test/pages/FCLApp.html.4d2da1a7.css +1 -0
  98. package/dist/assets/test/pages/FCLCustom.html.1af2df31.css +1 -0
  99. package/dist/assets/test/pages/IllustratedMessage.html.ebec5a1c.css +1 -0
  100. package/dist/assets/test/pages/MediaGallery.html.dee36218.css +1 -0
  101. package/dist/assets/test/pages/NotificationListGroupItem.html.5c7fb00c.css +1 -0
  102. package/dist/assets/test/pages/NotificationListItem.html.01df347d.css +1 -0
  103. package/dist/assets/test/pages/NotificationList_test_page.html.883d5b51.css +1 -0
  104. package/dist/assets/test/pages/Page.html.b165889d.css +1 -0
  105. package/dist/assets/test/pages/ProductSwitch.html.6253dac2.css +1 -0
  106. package/dist/assets/test/pages/ProductSwitchItem.html.51a96d28.css +1 -0
  107. package/dist/assets/test/pages/ShellBar.html.a08df365.css +1 -0
  108. package/dist/assets/test/pages/SideNavigation.html.835d71ad.css +1 -0
  109. package/dist/assets/test/pages/Timeline.html.aa1e8833.css +1 -0
  110. package/dist/assets/test/pages/UploadCollection.html.078191be.css +1 -0
  111. package/dist/assets/test/pages/UploadCollection.html.86a22ac1.js +1 -0
  112. package/dist/assets/test/pages/ViewSettingsDialog.html.1d108f2f.css +1 -0
  113. package/dist/assets/test/pages/Wizard.html.929fda0f.css +1 -0
  114. package/dist/assets/test/pages/Wizard_test.html.3d4fc1a9.css +1 -0
  115. package/dist/assets/test/pages/Wizard_test_mobile.html.9216347a.css +1 -0
  116. package/dist/test/pages/Bar.html +88 -0
  117. package/dist/test/pages/BarcodeScannerDialog.html +51 -0
  118. package/dist/test/pages/Components.html +29 -0
  119. package/dist/test/pages/DynamicSideContent.html +134 -0
  120. package/dist/test/pages/F6TestPage.html +475 -0
  121. package/dist/test/pages/F6TestPage_2.html +43 -0
  122. package/dist/test/pages/FCL.html +965 -0
  123. package/dist/test/pages/FCLApp.html +238 -0
  124. package/dist/test/pages/FCLCustom.html +293 -0
  125. package/dist/test/pages/IllustratedMessage.html +174 -0
  126. package/dist/test/pages/MediaGallery.html +278 -0
  127. package/dist/test/pages/NotificationListGroupItem.html +315 -0
  128. package/dist/test/pages/NotificationListItem.html +277 -0
  129. package/dist/test/pages/NotificationList_test_page.html +195 -0
  130. package/dist/test/pages/Page.html +67 -0
  131. package/dist/test/pages/ProductSwitch.html +67 -0
  132. package/dist/test/pages/ProductSwitchItem.html +32 -0
  133. package/dist/test/pages/ShellBar.html +319 -0
  134. package/dist/test/pages/SideNavigation.html +115 -0
  135. package/dist/test/pages/Timeline.html +146 -0
  136. package/dist/test/pages/UploadCollection.html +208 -0
  137. package/dist/test/pages/ViewSettingsDialog.html +128 -0
  138. package/dist/test/pages/Wizard.html +774 -0
  139. package/dist/test/pages/Wizard_test.html +382 -0
  140. package/dist/test/pages/Wizard_test_mobile.html +104 -0
  141. package/package.json +9 -8
  142. package/src/SideNavigation.js +8 -8
package/dist/test/pages/Wizard.html ADDED
@@ -0,0 +1,774 @@
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>Wizard</title>
8
+
9
+ <script data-ui5-config type="application/json">
10
+ {
11
+ "theme": "sap_fiori_3",
12
+ "language": "EN"
13
+ }
14
+ </script>
15
+
16
+
17
+
18
+
19
+
20
+ <script>// delete Document.prototype.adoptedStyleSheets;</script>
21
+
22
+
23
+ <script type="module" crossorigin src="/assets/bundle.esm.6bf68e9d.js"></script>
24
+ <link rel="stylesheet" href="/assets/test/pages/Wizard.html.929fda0f.css">
25
+ </head>
26
+
27
+ <body class="wizard1auto">
28
+ <h2>Wizard</h2>
29
+ <ui5-wizard id="wiz" class="wizard2auto">
30
+ <ui5-wizard-step title-text="Product type" icon="sap-icon://product" disabled>
31
+ <div class="wizard3auto">
32
+ <ui5-title>1. Product Type</ui5-title><br>
33
+
34
+ <ui5-message-strip>
35
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
36
+ </ui5-message-strip><br>
37
+
38
+ <ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
39
+ </ui5-label>
40
+ <ui5-button id="btnOpenDialog" class="wizard4auto">Open Wizard Dialog</ui5-button>
41
+ </div>
42
+
43
+ <ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
44
+ </ui5-wizard-step>
45
+
46
+ <ui5-wizard-step title-text="Product Information" subtitle-text="(Optional)" disabled>
47
+ <div class="wizard5auto">
48
+ <ui5-title>2. Product Information</ui5-title><br>
49
+ <ui5-label wrapping-type="Normal">
50
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
51
+ </ui5-label>
52
+
53
+ <div class="wizard6auto">
54
+ <div class="wizard7auto">
55
+ <ui5-label>Name</ui5-label>
56
+ <ui5-input placeholder="product name..."></ui5-input>
57
+ </div>
58
+
59
+ <div class="wizard8auto">
60
+ <ui5-label>Weight</ui5-label>
61
+ <ui5-input value="3.65"></ui5-input>
62
+ </div>
63
+
64
+ <div class="wizard8auto">
65
+ <ui5-label>Manifacturer</ui5-label>
66
+ <ui5-select>
67
+ <ui5-option selected>Apple</ui5-option>
68
+ <ui5-option>Samsung</ui5-option>
69
+ <ui5-option>Huawei</ui5-option>
70
+ </ui5-select>
71
+ </div>
72
+
73
+ <div class="wizard8auto">
74
+ <ui5-label>5 years guarantee included</ui5-label>
75
+ <ui5-switch id="sw"></ui5-switch>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <ui5-button id="toStep3" design="Emphasized" hidden>Step 3</ui5-button>
81
+ </ui5-wizard-step>
82
+
83
+ <ui5-wizard-step title-text="Options" disabled>
84
+ <div class="wizard6auto">
85
+ <ui5-title>3. Options</ui5-title><br>
86
+
87
+ <ui5-label wrapping-type="Normal">
88
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
89
+ </ui5-label>
90
+ <ui5-message-strip>
91
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
92
+ </ui5-message-strip><br>
93
+
94
+ <div class="wizard6auto">
95
+ <div class="wizard7auto">
96
+ <ui5-label>Manifacture date</ui5-label>
97
+ <ui5-date-picker></ui5-date-picker>
98
+ </div>
99
+
100
+ <div class="wizard7auto">
101
+ <ui5-label>Availability</ui5-label>
102
+ <ui5-segmented-button>
103
+ <ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
104
+ <ui5-toggle-button>In depot</ui5-toggle-button>
105
+ <ui5-toggle-button>Damaged</ui5-toggle-button>
106
+ <ui5-toggle-button>Out of stock</ui5-toggle-button>
107
+ </ui5-segmented-button>
108
+ </div>
109
+
110
+ <div class="wizard7auto">
111
+ <ui5-label>Size</ui5-label>
112
+ <ui5-segmented-button id="sb">
113
+ <ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
114
+ <ui5-toggle-button>Medium</ui5-toggle-button>
115
+ <ui5-toggle-button>Large</ui5-toggle-button>
116
+ </ui5-segmented-button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <ui5-button id="toStep4" design="Emphasized" hidden>Step 4</ui5-button>
122
+ </ui5-wizard-step>
123
+
124
+ <ui5-wizard-step title-text="Pricing" selected>
125
+ <div class="wizard6auto">
126
+ <ui5-title>4. Pricing</ui5-title><br>
127
+ <ui5-label wrapping-type="Normal">
128
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
129
+ </ui5-label>
130
+ <ui5-message-strip>
131
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
132
+ </ui5-message-strip><br>
133
+
134
+ <div class="wizard6auto">
135
+ <div class="wizard7auto">
136
+ <ui5-label>Price</ui5-label>
137
+ <ui5-input placeholder="product price..."></ui5-input>
138
+ </div>
139
+
140
+ <div class="wizard7auto">
141
+ <ui5-label>Quantity</ui5-label>
142
+ <ui5-input placeholder="product quantity..."></ui5-input>
143
+ </div>
144
+
145
+ <div class="wizard8auto">
146
+ <ui5-label>Vat included</ui5-label>
147
+ <ui5-switch checked></ui5-switch>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <ui5-button id="finalize" design="Emphasized">Finalize</ui5-button>
153
+ </ui5-wizard-step>
154
+ </ui5-wizard>
155
+
156
+ <h2>Wizard non-standard</h2>
157
+ <ui5-wizard class="wizard2auto">
158
+ <ui5-wizard-step title-text="Product type" icon="sap-icon://product" selected>
159
+ <div class="wizard3auto">
160
+ <ui5-title>1. Product Type</ui5-title><br>
161
+
162
+ <ui5-message-strip>
163
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
164
+ </ui5-message-strip><br>
165
+
166
+ <ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
167
+ </ui5-label>
168
+ <ui5-button class="wizard4auto">Open Wizard Dialog</ui5-button>
169
+ </div>
170
+ </ui5-wizard-step>
171
+
172
+ <ui5-wizard-step title-text="Product Information" subtitle-text="(Optional)" disabled>
173
+ <div class="wizard5auto">
174
+ <ui5-title>2. Product Information</ui5-title><br>
175
+ <ui5-label wrapping-type="Normal">
176
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
177
+ </ui5-label>
178
+
179
+ <div class="wizard6auto">
180
+ <div class="wizard7auto">
181
+ <ui5-label>Name</ui5-label>
182
+ <ui5-input placeholder="product name..."></ui5-input>
183
+ </div>
184
+
185
+ <div class="wizard8auto">
186
+ <ui5-label>Weight</ui5-label>
187
+ <ui5-input value="3.65"></ui5-input>
188
+ </div>
189
+
190
+ <div class="wizard8auto">
191
+ <ui5-label>Manifacturer</ui5-label>
192
+ <ui5-select>
193
+ <ui5-option selected>Apple</ui5-option>
194
+ <ui5-option>Samsung</ui5-option>
195
+ <ui5-option>Huawei</ui5-option>
196
+ </ui5-select>
197
+ </div>
198
+
199
+ <div class="wizard8auto">
200
+ <ui5-label>5 years guarantee included</ui5-label>
201
+ <ui5-switch></ui5-switch>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ </ui5-wizard-step>
207
+
208
+ <ui5-wizard-step title-text="Options" selected>
209
+ <div class="wizard6auto">
210
+ <ui5-title>3. Options</ui5-title><br>
211
+
212
+ <ui5-label wrapping-type="Normal">
213
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
214
+ </ui5-label>
215
+ <ui5-message-strip>
216
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
217
+ </ui5-message-strip><br>
218
+
219
+ <div class="wizard6auto">
220
+ <div class="wizard7auto">
221
+ <ui5-label>Manifacture date</ui5-label>
222
+ <ui5-date-picker></ui5-date-picker>
223
+ </div>
224
+
225
+ <div class="wizard7auto">
226
+ <ui5-label>Availability</ui5-label>
227
+ <ui5-segmented-button>
228
+ <ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
229
+ <ui5-toggle-button>In depot</ui5-toggle-button>
230
+ <ui5-toggle-button>Damaged</ui5-toggle-button>
231
+ <ui5-toggle-button>Out of stock</ui5-toggle-button>
232
+ </ui5-segmented-button>
233
+ </div>
234
+
235
+ <div class="wizard7auto">
236
+ <ui5-label>Size</ui5-label>
237
+ <ui5-segmented-button>
238
+ <ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
239
+ <ui5-toggle-button>Medium</ui5-toggle-button>
240
+ <ui5-toggle-button>Large</ui5-toggle-button>
241
+ </ui5-segmented-button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <ui5-button design="Emphasized" hidden>Step 4</ui5-button>
247
+ </ui5-wizard-step>
248
+
249
+ <ui5-wizard-step title-text="Pricing" disabled>
250
+ <div class="wizard6auto">
251
+ <ui5-title>4. Pricing</ui5-title><br>
252
+ <ui5-label wrapping-type="Normal">
253
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
254
+ </ui5-label>
255
+ <ui5-message-strip>
256
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
257
+ </ui5-message-strip><br>
258
+
259
+ <div class="wizard6auto">
260
+ <div class="wizard7auto">
261
+ <ui5-label>Price</ui5-label>
262
+ <ui5-input placeholder="product price..."></ui5-input>
263
+ </div>
264
+
265
+ <div class="wizard7auto">
266
+ <ui5-label>Quantity</ui5-label>
267
+ <ui5-input placeholder="product quantity..."></ui5-input>
268
+ </div>
269
+
270
+ <div class="wizard8auto">
271
+ <ui5-label>Vat included</ui5-label>
272
+ <ui5-switch checked></ui5-switch>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ </ui5-wizard-step>
278
+
279
+ <ui5-wizard-step title-text="Final" selected disabled>
280
+ <div class="wizard6auto">
281
+ <ui5-title>5. Final</ui5-title><br>
282
+ <ui5-label wrapping-type="Normal">
283
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
284
+ </ui5-label>
285
+ <ui5-message-strip>
286
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
287
+ </ui5-message-strip><br>
288
+
289
+ <div class="wizard6auto">
290
+ <div class="wizard7auto">
291
+ <ui5-label>Price</ui5-label>
292
+ <ui5-input placeholder="product price..."></ui5-input>
293
+ </div>
294
+
295
+ <div class="wizard7auto">
296
+ <ui5-label>Quantity</ui5-label>
297
+ <ui5-input placeholder="product quantity..."></ui5-input>
298
+ </div>
299
+
300
+ <div class="wizard8auto">
301
+ <ui5-label>Vat included</ui5-label>
302
+ <ui5-switch checked></ui5-switch>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ </ui5-wizard-step>
308
+ </ui5-wizard>
309
+
310
+ <h2>Wizard non-standard 2</h2>
311
+ <ui5-wizard class="wizard2auto">
312
+ <ui5-wizard-step title-text="Product type" icon="sap-icon://product" selected disabled>
313
+ <div class="wizard3auto">
314
+ <ui5-title>1. Product Type</ui5-title><br>
315
+
316
+ <ui5-message-strip>
317
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
318
+ </ui5-message-strip><br>
319
+
320
+ <ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
321
+ </ui5-label>
322
+ <ui5-button class="wizard4auto">Open Wizard Dialog</ui5-button>
323
+ </div>
324
+ </ui5-wizard-step>
325
+
326
+ <ui5-wizard-step title-text="Product Information" subtitle-text="(Optional)" selected disabled>
327
+ <div class="wizard5auto">
328
+ <ui5-title>2. Product Information</ui5-title><br>
329
+ <ui5-label wrapping-type="Normal">
330
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
331
+ </ui5-label>
332
+
333
+ <div class="wizard6auto">
334
+ <div class="wizard7auto">
335
+ <ui5-label>Name</ui5-label>
336
+ <ui5-input placeholder="product name..."></ui5-input>
337
+ </div>
338
+
339
+ <div class="wizard8auto">
340
+ <ui5-label>Weight</ui5-label>
341
+ <ui5-input value="3.65"></ui5-input>
342
+ </div>
343
+
344
+ <div class="wizard8auto">
345
+ <ui5-label>Manifacturer</ui5-label>
346
+ <ui5-select>
347
+ <ui5-option selected>Apple</ui5-option>
348
+ <ui5-option>Samsung</ui5-option>
349
+ <ui5-option>Huawei</ui5-option>
350
+ </ui5-select>
351
+ </div>
352
+
353
+ <div class="wizard8auto">
354
+ <ui5-label>5 years guarantee included</ui5-label>
355
+ <ui5-switch></ui5-switch>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <ui5-button design="Emphasized" hidden>Step 3</ui5-button>
361
+ </ui5-wizard-step>
362
+
363
+ <ui5-wizard-step title-text="Options" selected>
364
+ <div class="wizard6auto">
365
+ <ui5-title>3. Options</ui5-title><br>
366
+
367
+ <ui5-label wrapping-type="Normal">
368
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
369
+ </ui5-label>
370
+
371
+ <div class="wizard6auto">
372
+ <div class="wizard7auto">
373
+ <ui5-label>Manifacture date</ui5-label>
374
+ <ui5-date-picker></ui5-date-picker>
375
+ </div>
376
+
377
+ <div class="wizard7auto">
378
+ <ui5-label>Availability</ui5-label>
379
+ <ui5-segmented-button>
380
+ <ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
381
+ <ui5-toggle-button>In depot</ui5-toggle-button>
382
+ <ui5-toggle-button>Damaged</ui5-toggle-button>
383
+ <ui5-toggle-button>Out of stock</ui5-toggle-button>
384
+ </ui5-segmented-button>
385
+ </div>
386
+
387
+ <div class="wizard7auto">
388
+ <ui5-label>Size</ui5-label>
389
+ <ui5-segmented-button>
390
+ <ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
391
+ <ui5-toggle-button>Medium</ui5-toggle-button>
392
+ <ui5-toggle-button>Large</ui5-toggle-button>
393
+ </ui5-segmented-button>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <ui5-button design="Emphasized" hidden>Step 4</ui5-button>
399
+ </ui5-wizard-step>
400
+
401
+ <ui5-wizard-step title-text="Pricing" selected disabled>
402
+ <div class="wizard6auto">
403
+ <ui5-title>4. Pricing</ui5-title><br>
404
+ <ui5-label wrapping-type="Normal">
405
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
406
+ </ui5-label>
407
+ <ui5-message-strip>
408
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
409
+ </ui5-message-strip><br>
410
+
411
+ <div class="wizard6auto">
412
+ <div class="wizard7auto">
413
+ <ui5-label>Price</ui5-label>
414
+ <ui5-input placeholder="product price..."></ui5-input>
415
+ </div>
416
+
417
+ <div class="wizard7auto">
418
+ <ui5-label>Quantity</ui5-label>
419
+ <ui5-input placeholder="product quantity..."></ui5-input>
420
+ </div>
421
+
422
+ <div class="wizard8auto">
423
+ <ui5-label>Vat included</ui5-label>
424
+ <ui5-switch checked></ui5-switch>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ </ui5-wizard-step>
430
+ </ui5-wizard>
431
+
432
+ <h2>Wizard non-standard 3</h2>
433
+ <ui5-wizard class="wizard2auto">
434
+ <ui5-wizard-step title-text="Product type" icon="sap-icon://product" selected disabled>
435
+ <div class="wizard3auto">
436
+ <ui5-title>1. Product Type</ui5-title><br>
437
+
438
+ <ui5-message-strip>
439
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
440
+ </ui5-message-strip><br>
441
+
442
+ <ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
443
+ </ui5-label>
444
+ </div>
445
+ </ui5-wizard-step>
446
+
447
+ <ui5-wizard-step title-text="Product Information" subtitle-text="(Optional)" selected>
448
+ <div class="wizard5auto">
449
+ <ui5-title>2. Product Information</ui5-title><br>
450
+ <ui5-label wrapping-type="Normal">
451
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
452
+ </ui5-label>
453
+
454
+ <div class="wizard6auto">
455
+ <div class="wizard7auto">
456
+ <ui5-label>Name</ui5-label>
457
+ <ui5-input placeholder="product name..."></ui5-input>
458
+ </div>
459
+
460
+ <div class="wizard8auto">
461
+ <ui5-label>Weight</ui5-label>
462
+ <ui5-input value="3.65"></ui5-input>
463
+ </div>
464
+
465
+ <div class="wizard8auto">
466
+ <ui5-label>Manifacturer</ui5-label>
467
+ <ui5-select>
468
+ <ui5-option selected>Apple</ui5-option>
469
+ <ui5-option>Samsung</ui5-option>
470
+ <ui5-option>Huawei</ui5-option>
471
+ </ui5-select>
472
+ </div>
473
+
474
+ <div class="wizard8auto">
475
+ <ui5-label>5 years guarantee included</ui5-label>
476
+ <ui5-switch></ui5-switch>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <ui5-button design="Emphasized" hidden>Step 3</ui5-button>
482
+ </ui5-wizard-step>
483
+
484
+ <ui5-wizard-step title-text="Options" selected disabled>
485
+ <div class="wizard6auto">
486
+ <ui5-title>3. Options</ui5-title><br>
487
+
488
+ <ui5-label wrapping-type="Normal">
489
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
490
+ </ui5-label>
491
+
492
+ <div class="wizard6auto">
493
+ <div class="wizard7auto">
494
+ <ui5-label>Manifacture date</ui5-label>
495
+ <ui5-date-picker></ui5-date-picker>
496
+ </div>
497
+
498
+ <div class="wizard7auto">
499
+ <ui5-label>Availability</ui5-label>
500
+ <ui5-segmented-button>
501
+ <ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
502
+ <ui5-toggle-button>In depot</ui5-toggle-button>
503
+ <ui5-toggle-button>Damaged</ui5-toggle-button>
504
+ <ui5-toggle-button>Out of stock</ui5-toggle-button>
505
+ </ui5-segmented-button>
506
+ </div>
507
+
508
+ <div class="wizard7auto">
509
+ <ui5-label>Size</ui5-label>
510
+ <ui5-segmented-button>
511
+ <ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
512
+ <ui5-toggle-button>Medium</ui5-toggle-button>
513
+ <ui5-toggle-button>Large</ui5-toggle-button>
514
+ </ui5-segmented-button>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <ui5-button design="Emphasized" hidden>Step 4</ui5-button>
520
+ </ui5-wizard-step>
521
+
522
+ <ui5-wizard-step title-text="Pricing" selected disabled>
523
+ <div class="wizard6auto">
524
+ <ui5-title>4. Pricing</ui5-title><br>
525
+ <ui5-label wrapping-type="Normal">
526
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
527
+ </ui5-label>
528
+
529
+ <div class="wizard6auto">
530
+ <div class="wizard7auto">
531
+ <ui5-label>Price</ui5-label>
532
+ <ui5-input placeholder="product price..."></ui5-input>
533
+ </div>
534
+
535
+ <div class="wizard7auto">
536
+ <ui5-label>Quantity</ui5-label>
537
+ <ui5-input placeholder="product quantity..."></ui5-input>
538
+ </div>
539
+
540
+ <div class="wizard8auto">
541
+ <ui5-label>Vat included</ui5-label>
542
+ <ui5-switch checked></ui5-switch>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ </ui5-wizard-step>
548
+ </ui5-wizard>
549
+
550
+ <ui5-dialog id="dialog" stretch header-heading="Wizard">
551
+ <ui5-wizard id="wiz2">
552
+ <ui5-wizard-step icon="sap-icon://home" title-text="Product type">
553
+ <div class="wizard3auto">
554
+ <ui5-title>1. Product Type</ui5-title><br>
555
+
556
+ <ui5-message-strip>
557
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
558
+ </ui5-message-strip><br>
559
+
560
+ <ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
561
+ </ui5-label>
562
+ </div>
563
+
564
+ <ui5-button id="toStep22" design="Emphasized">Step 2</ui5-button>
565
+ </ui5-wizard-step>
566
+
567
+ <ui5-wizard-step title-text="Product Information" selected>
568
+ <div class="wizard5auto">
569
+ <ui5-title>2. Product Information</ui5-title><br>
570
+ <ui5-label wrapping-type="Normal">
571
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
572
+ </ui5-label>
573
+
574
+ <div class="wizard6auto">
575
+ <div class="wizard7auto">
576
+ <ui5-label>Name</ui5-label>
577
+ <ui5-input placeholder="product name..."></ui5-input>
578
+ </div>
579
+
580
+ <div class="wizard8auto">
581
+ <ui5-label>Weight</ui5-label>
582
+ <ui5-input value="3.65"></ui5-input>
583
+ </div>
584
+
585
+ <div class="wizard8auto">
586
+ <ui5-label>Manifacturer</ui5-label>
587
+ <ui5-select>
588
+ <ui5-option selected>Apple</ui5-option>
589
+ <ui5-option>Samsung</ui5-option>
590
+ <ui5-option>Huawei</ui5-option>
591
+ </ui5-select>
592
+ </div>
593
+
594
+ <div class="wizard8auto">
595
+ <ui5-label>5 years guarantee included</ui5-label>
596
+ <ui5-switch id="sw2"></ui5-switch>
597
+ </div>
598
+ </div>
599
+ </div>
600
+
601
+ <ui5-button id="toStep32" design="Emphasized" hidden>Step 3</ui5-button>
602
+ </ui5-wizard-step>
603
+
604
+ <ui5-wizard-step title-text="Options" disabled>
605
+ <div class="wizard6auto">
606
+ <ui5-title>3. Options</ui5-title><br>
607
+
608
+ <ui5-label wrapping-type="Normal">
609
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
610
+ </ui5-label>
611
+ <ui5-message-strip>
612
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
613
+ </ui5-message-strip><br>
614
+
615
+ <div class="wizard6auto">
616
+ <div class="wizard7auto">
617
+ <ui5-label>Manifacture date</ui5-label>
618
+ <ui5-date-picker></ui5-date-picker>
619
+ </div>
620
+
621
+ <div class="wizard7auto">
622
+ <ui5-label>Availability</ui5-label>
623
+ <ui5-segmented-button>
624
+ <ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
625
+ <ui5-toggle-button>In depot</ui5-toggle-button>
626
+ <ui5-toggle-button>Damaged</ui5-toggle-button>
627
+ <ui5-toggle-button>Out of stock</ui5-toggle-button>
628
+ </ui5-segmented-button>
629
+ </div>
630
+
631
+ <div class="wizard7auto">
632
+ <ui5-label>Size</ui5-label>
633
+ <ui5-segmented-button id="sb2">
634
+ <ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
635
+ <ui5-toggle-button>Medium</ui5-toggle-button>
636
+ <ui5-toggle-button>Largr</ui5-toggle-button>
637
+ </ui5-segmented-button>
638
+ </div>
639
+ </div>
640
+ </div>
641
+
642
+ <ui5-button id="toStep42" design="Emphasized" hidden>Step 4</ui5-button>
643
+ </ui5-wizard-step>
644
+
645
+ <ui5-wizard-step title-text="Pricing" disabled>
646
+ <div class="wizard6auto">
647
+ <ui5-title>4. Pricing</ui5-title><br>
648
+ <ui5-label wrapping-type="Normal">
649
+ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
650
+ </ui5-label>
651
+ <ui5-message-strip>
652
+ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
653
+ </ui5-message-strip><br>
654
+
655
+ <div class="wizard6auto">
656
+ <div class="wizard7auto">
657
+ <ui5-label>Price</ui5-label>
658
+ <ui5-input placeholder="product price..."></ui5-input>
659
+ </div>
660
+
661
+ <div class="wizard7auto">
662
+ <ui5-label>Quantity</ui5-label>
663
+ <ui5-input placeholder="product quantity..."></ui5-input>
664
+ </div>
665
+
666
+ <div class="wizard8auto">
667
+ <ui5-label>Vat included</ui5-label>
668
+ <ui5-switch checked></ui5-switch>
669
+ </div>
670
+ </div>
671
+ </div>
672
+
673
+ <ui5-button id="finalize2" design="Emphasized">Finalize</ui5-button>
674
+ </ui5-wizard-step>
675
+ </ui5-wizard>
676
+ </ui5-dialog>
677
+
678
+ <script>
679
+ var wiz = document.getElementById("wiz");
680
+
681
+ wiz.addEventListener("step-change", function () {
682
+ console.log(event.detail.step);
683
+ });
684
+
685
+ sw.addEventListener("change", function () {
686
+ toStep3.removeAttribute("hidden");
687
+ });
688
+
689
+ sb.addEventListener("step-change", function () {
690
+ toStep4.removeAttribute("hidden");
691
+ });
692
+
693
+ toStep2.addEventListener("click", function () {
694
+ deselectAll(wiz);
695
+ setStep(wiz, 1);
696
+ toStep2.setAttribute("hidden", true);
697
+ });
698
+
699
+ toStep3.addEventListener("click", function () {
700
+ deselectAll(wiz);
701
+ setStep(wiz, 2);
702
+ toStep3.setAttribute("hidden", true);
703
+ });
704
+
705
+ toStep4.addEventListener("click", function () {
706
+ deselectAll(wiz);
707
+ setStep(wiz, 3);
708
+ toStep4.setAttribute("hidden", true);
709
+ });
710
+
711
+ finalize.addEventListener("click", function () {
712
+ alert("Finalize")
713
+ });
714
+
715
+ // Wizard in Dialog
716
+ var wiz2 = document.getElementById("wiz2");
717
+
718
+ btnOpenDialog.addEventListener("click", function () {
719
+ dialog.show();
720
+ });
721
+
722
+ wiz2.addEventListener("step-change", function () {
723
+ console.log(event.detail.step);
724
+ });
725
+
726
+ sw2.addEventListener("change", function () {
727
+ toStep32.removeAttribute("hidden");
728
+ });
729
+
730
+ sb2.addEventListener("step-change", function () {
731
+ toStep42.removeAttribute("hidden");
732
+ });
733
+
734
+ toStep22.addEventListener("click", function () {
735
+ deselectAll(wiz2);
736
+ setStep(wiz2, 1);
737
+ toStep22.setAttribute("hidden", true);
738
+ });
739
+
740
+ toStep32.addEventListener("click", function () {
741
+ deselectAll(wiz2);
742
+ setStep(wiz2, 2);
743
+ toStep32.setAttribute("hidden", true);
744
+ });
745
+
746
+ toStep42.addEventListener("click", function () {
747
+ deselectAll(wiz2);
748
+ setStep(wiz2, 3);
749
+ toStep42.setAttribute("hidden", true);
750
+ });
751
+
752
+ finalize2.addEventListener("click", function () {
753
+ alert("Finalize");
754
+ dialog.close();
755
+ });
756
+
757
+ function deselectAll(wizard) {
758
+ Array.from(wizard.children).forEach(function(step) {
759
+ step.selected = false;
760
+ });
761
+ }
762
+
763
+ function setStep(wizard, idx) {
764
+ const step = getStep(wizard, idx);
765
+ step.selected = true;
766
+ step.disabled = false;
767
+ }
768
+
769
+ function getStep(wizard, idx) {
770
+ return Array.from(wizard.children)[idx];
771
+ }
772
+ </script>
773
+ </body>
774
+ </html>