@openui5/sap.ui.documentation 1.102.2 → 1.104.0

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 (85) hide show
  1. package/.reuse/dep5 +17 -0
  2. package/LICENSES/LicenseRef-tzdata-PublicDomain.txt +5 -0
  3. package/THIRDPARTY.txt +35 -2
  4. package/package.json +6 -6
  5. package/src/sap/ui/documentation/.library +1 -1
  6. package/src/sap/ui/documentation/library.js +2 -2
  7. package/src/sap/ui/documentation/messagebundle.properties +2 -0
  8. package/src/sap/ui/documentation/messagebundle_ar.properties +1 -1
  9. package/src/sap/ui/documentation/messagebundle_bg.properties +1 -1
  10. package/src/sap/ui/documentation/messagebundle_ca.properties +1 -1
  11. package/src/sap/ui/documentation/messagebundle_cy.properties +1 -1
  12. package/src/sap/ui/documentation/messagebundle_da.properties +1 -1
  13. package/src/sap/ui/documentation/messagebundle_el.properties +1 -1
  14. package/src/sap/ui/documentation/messagebundle_en_US_sappsd.properties +1 -0
  15. package/src/sap/ui/documentation/messagebundle_es_MX.properties +1 -1
  16. package/src/sap/ui/documentation/messagebundle_et.properties +1 -1
  17. package/src/sap/ui/documentation/messagebundle_fi.properties +1 -1
  18. package/src/sap/ui/documentation/messagebundle_fr.properties +1 -1
  19. package/src/sap/ui/documentation/messagebundle_fr_CA.properties +1 -1
  20. package/src/sap/ui/documentation/messagebundle_hi.properties +1 -1
  21. package/src/sap/ui/documentation/messagebundle_hu.properties +1 -1
  22. package/src/sap/ui/documentation/messagebundle_id.properties +1 -1
  23. package/src/sap/ui/documentation/messagebundle_iw.properties +1 -1
  24. package/src/sap/ui/documentation/messagebundle_ja.properties +1 -1
  25. package/src/sap/ui/documentation/messagebundle_kk.properties +1 -1
  26. package/src/sap/ui/documentation/messagebundle_ko.properties +1 -1
  27. package/src/sap/ui/documentation/messagebundle_lt.properties +1 -1
  28. package/src/sap/ui/documentation/messagebundle_lv.properties +1 -1
  29. package/src/sap/ui/documentation/messagebundle_ms.properties +1 -1
  30. package/src/sap/ui/documentation/messagebundle_nl.properties +1 -1
  31. package/src/sap/ui/documentation/messagebundle_no.properties +1 -1
  32. package/src/sap/ui/documentation/messagebundle_ru.properties +1 -1
  33. package/src/sap/ui/documentation/messagebundle_sh.properties +1 -1
  34. package/src/sap/ui/documentation/messagebundle_sk.properties +1 -1
  35. package/src/sap/ui/documentation/messagebundle_sl.properties +1 -1
  36. package/src/sap/ui/documentation/messagebundle_sv.properties +1 -1
  37. package/src/sap/ui/documentation/messagebundle_th.properties +1 -1
  38. package/src/sap/ui/documentation/messagebundle_tr.properties +1 -1
  39. package/src/sap/ui/documentation/messagebundle_uk.properties +1 -1
  40. package/src/sap/ui/documentation/messagebundle_vi.properties +1 -1
  41. package/src/sap/ui/documentation/messagebundle_zh_CN.properties +1 -1
  42. package/src/sap/ui/documentation/messagebundle_zh_TW.properties +1 -1
  43. package/src/sap/ui/documentation/sdk/Component.js +1 -1
  44. package/src/sap/ui/documentation/sdk/controller/App.controller.js +3 -3
  45. package/src/sap/ui/documentation/sdk/controller/Code.controller.js +1 -1
  46. package/src/sap/ui/documentation/sdk/controller/ControlsMaster.controller.js +2 -2
  47. package/src/sap/ui/documentation/sdk/controller/Sample.controller.js +106 -46
  48. package/src/sap/ui/documentation/sdk/controller/TopicDetail.controller.js +1 -1
  49. package/src/sap/ui/documentation/sdk/controller/VersionNotFound.controller.js +19 -12
  50. package/src/sap/ui/documentation/sdk/controller/util/ToolsInfo.js +7 -3
  51. package/src/sap/ui/documentation/sdk/controller/util/URLUtil.js +117 -0
  52. package/src/sap/ui/documentation/sdk/css/style.css +22 -13
  53. package/src/sap/ui/documentation/sdk/index.html +42 -7
  54. package/src/sap/ui/documentation/sdk/model/formatter.js +25 -0
  55. package/src/sap/ui/documentation/sdk/thirdparty/highlight.js/styles.css +47 -1
  56. package/src/sap/ui/documentation/sdk/util/DocumentationRouter.js +7 -0
  57. package/src/sap/ui/documentation/sdk/util/Resources.js +3 -0
  58. package/src/sap/ui/documentation/sdk/view/ApiDetailInitial.view.xml +13 -13
  59. package/src/sap/ui/documentation/sdk/view/Controls.view.xml +19 -19
  60. package/src/sap/ui/documentation/sdk/view/Entity.view.xml +2 -2
  61. package/src/sap/ui/documentation/sdk/view/Tools.view.xml +12 -3
  62. package/src/sap/ui/documentation/sdk/view/TopicDetailInitial.view.xml +12 -12
  63. package/src/sap/ui/documentation/sdk/view/Welcome.view.xml +49 -25
  64. package/src/sap/ui/documentation/sdk/view/appSettingsDialog.fragment.xml +6 -4
  65. package/src/sap/ui/documentation/themes/base/DemokitTreeItem.less +5 -9
  66. package/src/sap/ui/documentation/themes/base/Documentation.less +16 -2
  67. package/src/sap/ui/documentation/themes/base/LightTable.less +49 -40
  68. package/src/sap/ui/documentation/themes/base/ObjectPageSubSection.less +9 -0
  69. package/src/sap/ui/documentation/themes/base/Search.less +1 -0
  70. package/src/sap/ui/documentation/themes/base/global.less +27 -0
  71. package/src/sap/ui/documentation/themes/base/library.source.less +2 -0
  72. package/src/sap/ui/documentation/themes/sap_belize/global.less +19 -0
  73. package/src/sap/ui/documentation/themes/sap_belize/library.source.less +1 -0
  74. package/src/sap/ui/documentation/themes/sap_fiori_3/global.less +18 -0
  75. package/src/sap/ui/documentation/themes/sap_fiori_3/library.source.less +2 -1
  76. package/src/sap/ui/documentation/themes/sap_horizon/Link.less +3 -0
  77. package/src/sap/ui/documentation/themes/sap_horizon/Search.less +3 -0
  78. package/src/sap/ui/documentation/themes/sap_horizon/SplitButton.less +5 -0
  79. package/src/sap/ui/documentation/themes/sap_horizon/global.less +18 -0
  80. package/src/sap/ui/documentation/themes/sap_horizon/library.source.less +6 -1
  81. package/src/sap/ui/documentation/themes/sap_horizon_dark/Documentation.less +17 -0
  82. package/src/sap/ui/documentation/themes/sap_horizon_dark/Link.less +3 -0
  83. package/src/sap/ui/documentation/themes/sap_horizon_dark/Search.less +3 -0
  84. package/src/sap/ui/documentation/themes/sap_horizon_dark/SplitButton.less +5 -0
  85. package/src/sap/ui/documentation/themes/sap_horizon_dark/library.source.less +6 -1
@@ -18,7 +18,8 @@
18
18
  oPath = {},
19
19
  sOriginEncoded,
20
20
  oBaseTag,
21
- oScriptTag;
21
+ oScriptTag,
22
+ sPresetDensity = getUrlParam('sap-ui-density');
22
23
 
23
24
  if (sOrigin === "" || sOrigin === ".") {
24
25
  var sHref = document.location.href;
@@ -51,6 +52,17 @@
51
52
  </head>
52
53
  <body class="sapUiBody sapUiSizeCompact" id="content">
53
54
  <script>
55
+ var setDensityClass = function(sDensityClass) {
56
+ var sBodyDensityClass = Array.prototype.find.call(document.body.classList, function(el){
57
+ return el.includes("sapUiSize");
58
+ });
59
+ sBodyDensityClass ? document.body.classList.replace(sBodyDensityClass, sDensityClass) :
60
+ document.body.classList.add(sDensityClass);
61
+ }
62
+
63
+ if (sPresetDensity) {
64
+ setDensityClass(sPresetDensity);
65
+ }
54
66
  sap.ui.getCore().attachInit(function () {
55
67
  sap.ui.require([
56
68
  "sap/ui/core/ComponentContainer",
@@ -165,12 +177,32 @@
165
177
 
166
178
  var oContainer = new ComponentContainer({component : oComponent, height: "100%"})
167
179
  .placeAt("content");
180
+ var oConfig = oComponent.getMetadata().getConfig();
181
+ var bOpenStandalone = new URLSearchParams(window.location.search).has("dk-sample-standalone");
182
+
183
+ // if dk-sample-standalone is used,
184
+ // display message for samples with own index.html
185
+ if (bOpenStandalone && oConfig.sample && oConfig.sample.iframe) {
186
+ sap.ui.require([
187
+ "sap/m/IllustratedMessage",
188
+ "sap/m/IllustratedMessageType"
189
+ ], function (IllustratedMessage, IllustratedMessageType) {
190
+ oContainer.destroy();
191
+ new IllustratedMessage({
192
+ title: "Sample unsupported",
193
+ description: "Samples with own index.html are currently unsupported by dk-sample-standalone.",
194
+ illustrationType: IllustratedMessageType.PageNotFound
195
+ }).placeAt("content");
196
+ });
197
+ }
198
+
168
199
  var oMessage = {};
200
+ var objRta = null;
169
201
  oMessage.type = "INIT";
170
202
  oMessage.data = {
171
203
  "msg": "fired after component container is placed in DOM"
172
204
  };
173
- oMessage.config = oComponent.getMetadata().getConfig();
205
+ oMessage.config = oConfig;
174
206
  window.parent.postMessage(oMessage, getUrlParam('sap-ui-xx-dk-origin'));
175
207
 
176
208
  window.addEventListener("message", function(eMessage){
@@ -189,11 +221,7 @@
189
221
  }
190
222
  }, getUrlParam('sap-ui-xx-dk-origin'));
191
223
  } else if (eMessage.data.reason === "set") {
192
- var sBodyDensityClass = Array.prototype.find.call(document.body.classList, function(el){
193
- return el.includes("sapUiSize");
194
- });
195
- sBodyDensityClass ? document.body.classList.replace(sBodyDensityClass, eMessage.data.data.density) :
196
- document.body.classList.add(eMessage.data.data.density);
224
+ setDensityClass(eMessage.data.data.density);
197
225
  sap.ui.getCore().getConfiguration().setRTL(eMessage.data.data.RTL);
198
226
  sap.ui.getCore().applyTheme(eMessage.data.data.theme);
199
227
  }
@@ -201,6 +229,11 @@
201
229
  });
202
230
 
203
231
  function enableRta() {
232
+ if (objRta) {
233
+ objRta.stop();
234
+ objRta = null;
235
+ return;
236
+ }
204
237
  sap.ui.require([
205
238
  "sap/ui/rta/api/startKeyUserAdaptation"
206
239
  ], function (
@@ -209,6 +242,8 @@
209
242
  startKeyUserAdaptation({
210
243
  rootControl: oContainer.getComponentInstance()
211
244
  }).then(function (oRta) {
245
+
246
+ objRta = oRta;
212
247
  oContainer.$().css({
213
248
  "padding-top": "2.5rem",
214
249
  "box-sizing": "border-box"
@@ -279,6 +279,31 @@ sap.ui.define([
279
279
  formatImportantMessage: function (sMsg, sParam) {
280
280
  var sParam = this._getUI5Distribution();
281
281
  return formatMessage(sMsg, sParam);
282
+ },
283
+
284
+ /**
285
+ * Formats the value of the <code>visibile</code> property of the cards in the Tools section
286
+ *
287
+ * @param {object} oData the model data
288
+ * @returns {boolean}
289
+ * @protected
290
+ */
291
+ formatToolCardVisibility: function (oData) {
292
+ if (!oData) {
293
+ return false;
294
+ }
295
+
296
+ if (oData.hideOnPhone
297
+ && this.getOwnerComponent().getModel("device").getProperty("/system/phone")) {
298
+ return false;
299
+ }
300
+
301
+ if (oData.isDistributionScope
302
+ && this.getOwnerComponent().getModel("versionData").getProperty("/isOpenUI5")) {
303
+ return false;
304
+ }
305
+
306
+ return true;
282
307
  }
283
308
  };
284
309
  return merge(oFormatter, oStaticAPI);
@@ -37,11 +37,15 @@
37
37
  font-weight: 700;
38
38
  }
39
39
 
40
+ .sapUiTheme-sap_horizon .hljs {
41
+ background: #f5f5f5;
42
+ }
40
43
 
41
44
  /*
42
- * Different theme for Fiori 3 Dark for better visibility
45
+ * Different theme for Horizon and Fiori 3 Dark for better visibility
43
46
  */
44
47
 
48
+ .sapUiTheme-sap_horizon_dark .hljs,
45
49
  .sapUiTheme-sap_fiori_3_dark .hljs {
46
50
  display: block;
47
51
  overflow-x: auto;
@@ -49,16 +53,29 @@
49
53
  color: #abb2bf;
50
54
  background: #282c34;
51
55
  }
56
+
57
+ .sapUiTheme-sap_horizon_dark .hljs-comment,
58
+ .sapUiTheme-sap_horizon_dark .hljs-quote,
52
59
  .sapUiTheme-sap_fiori_3_dark .hljs-comment,
53
60
  .sapUiTheme-sap_fiori_3_dark .hljs-quote {
54
61
  color: #5c6370;
55
62
  font-style: italic;
56
63
  }
64
+
65
+ .sapUiTheme-sap_horizon_dark .hljs-doctag,
66
+ .sapUiTheme-sap_horizon_dark .hljs-formula,
67
+ .sapUiTheme-sap_horizon_dark .hljs-keyword,
57
68
  .sapUiTheme-sap_fiori_3_dark .hljs-doctag,
58
69
  .sapUiTheme-sap_fiori_3_dark .hljs-formula,
59
70
  .sapUiTheme-sap_fiori_3_dark .hljs-keyword {
60
71
  color: #c678dd;
61
72
  }
73
+
74
+ .sapUiTheme-sap_horizon_dark .hljs-deletion,
75
+ .sapUiTheme-sap_horizon_dark .hljs-name,
76
+ .sapUiTheme-sap_horizon_dark .hljs-section,
77
+ .sapUiTheme-sap_horizon_dark .hljs-selector-tag,
78
+ .sapUiTheme-sap_horizon_dark .hljs-subst,
62
79
  .sapUiTheme-sap_fiori_3_dark .hljs-deletion,
63
80
  .sapUiTheme-sap_fiori_3_dark .hljs-name,
64
81
  .sapUiTheme-sap_fiori_3_dark .hljs-section,
@@ -66,9 +83,17 @@
66
83
  .sapUiTheme-sap_fiori_3_dark .hljs-subst {
67
84
  color: #e06c75;
68
85
  }
86
+
87
+ .sapUiTheme-sap_horizon_dark .hljs-literal,
69
88
  .sapUiTheme-sap_fiori_3_dark .hljs-literal {
70
89
  color: #56b6c2;
71
90
  }
91
+
92
+ .sapUiTheme-sap_horizon_dark .hljs-addition,
93
+ .sapUiTheme-sap_horizon_dark .hljs-attribute,
94
+ .sapUiTheme-sap_horizon_dark .hljs-meta-string,
95
+ .sapUiTheme-sap_horizon_dark .hljs-regexp,
96
+ .sapUiTheme-sap_horizon_dark .hljs-string,
72
97
  .sapUiTheme-sap_fiori_3_dark .hljs-addition,
73
98
  .sapUiTheme-sap_fiori_3_dark .hljs-attribute,
74
99
  .sapUiTheme-sap_fiori_3_dark .hljs-meta-string,
@@ -76,10 +101,22 @@
76
101
  .sapUiTheme-sap_fiori_3_dark .hljs-string {
77
102
  color: #98c379;
78
103
  }
104
+
105
+ .sapUiTheme-sap_horizon_dark .hljs-built_in,
106
+ .sapUiTheme-sap_horizon_dark .hljs-class .hljs-title,
79
107
  .sapUiTheme-sap_fiori_3_dark .hljs-built_in,
80
108
  .sapUiTheme-sap_fiori_3_dark .hljs-class .hljs-title {
81
109
  color: #e6c07b;
82
110
  }
111
+
112
+ .sapUiTheme-sap_horizon_dark .hljs-attr,
113
+ .sapUiTheme-sap_horizon_dark .hljs-number,
114
+ .sapUiTheme-sap_horizon_dark .hljs-selector-attr,
115
+ .sapUiTheme-sap_horizon_dark .hljs-selector-class,
116
+ .sapUiTheme-sap_horizon_dark .hljs-selector-pseudo,
117
+ .sapUiTheme-sap_horizon_dark .hljs-template-variable,
118
+ .sapUiTheme-sap_horizon_dark .hljs-type,
119
+ .sapUiTheme-sap_horizon_dark .hljs-variable,
83
120
  .sapUiTheme-sap_fiori_3_dark .hljs-attr,
84
121
  .sapUiTheme-sap_fiori_3_dark .hljs-number,
85
122
  .sapUiTheme-sap_fiori_3_dark .hljs-selector-attr,
@@ -90,6 +127,12 @@
90
127
  .sapUiTheme-sap_fiori_3_dark .hljs-variable {
91
128
  color: #d19a66;
92
129
  }
130
+ .sapUiTheme-sap_horizon_dark .hljs-bullet,
131
+ .sapUiTheme-sap_horizon_dark .hljs-link,
132
+ .sapUiTheme-sap_horizon_dark .hljs-meta,
133
+ .sapUiTheme-sap_horizon_dark .hljs-selector-id,
134
+ .sapUiTheme-sap_horizon_dark .hljs-symbol,
135
+ .sapUiTheme-sap_horizon_dark .hljs-title,
93
136
  .sapUiTheme-sap_fiori_3_dark .hljs-bullet,
94
137
  .sapUiTheme-sap_fiori_3_dark .hljs-link,
95
138
  .sapUiTheme-sap_fiori_3_dark .hljs-meta,
@@ -98,12 +141,15 @@
98
141
  .sapUiTheme-sap_fiori_3_dark .hljs-title {
99
142
  color: #61aeee;
100
143
  }
144
+ .sapUiTheme-sap_horizon_dark .hljs-emphasis,
101
145
  .sapUiTheme-sap_fiori_3_dark .hljs-emphasis {
102
146
  font-style: italic;
103
147
  }
148
+ .sapUiTheme-sap_horizon_dark .hljs-strong,
104
149
  .sapUiTheme-sap_fiori_3_dark .hljs-strong {
105
150
  font-weight: 700;
106
151
  }
152
+ .sapUiTheme-sap_horizon_dark .hljs-link,
107
153
  .sapUiTheme-sap_fiori_3_dark .hljs-link {
108
154
  text-decoration: underline;
109
155
  }
@@ -594,6 +594,13 @@ sap.ui.define([
594
594
  * @override
595
595
  */
596
596
  DocumentationRouter.prototype.initialize = function () {
597
+ // hide DemoKit if sample should open standalone
598
+ this.getRoute("sample").attachPatternMatched(function () {
599
+ if (new URLSearchParams(window.location.search).has("dk-sample-standalone")) {
600
+ document.body.style.visibility = "hidden";
601
+ }
602
+ });
603
+
597
604
  Router.prototype.initialize.apply(this, arguments);
598
605
 
599
606
  // attach listener for route changes via the browser back/forward buttons
@@ -54,6 +54,9 @@
54
54
  sPath = "/" + sPath;
55
55
  }
56
56
  return sPath;
57
+ },
58
+ isInternal: function (oVersionInfo) {
59
+ return (/internal/i.test(oVersionInfo.name) || (self['sap-ui-documentation-config'] && self['sap-ui-documentation-config'].visibility === "internal")) || false;
57
60
  }
58
61
  };
59
62
 
@@ -60,7 +60,7 @@
60
60
  <l:BlockLayoutCell
61
61
  width="2"
62
62
  class="largeCell"
63
- backgroundColorSet="ColorSet11"
63
+ backgroundColorSet="ColorSet10"
64
64
  backgroundColorShade="ShadeA">
65
65
  <l:VerticalLayout
66
66
  width="100%">
@@ -79,7 +79,7 @@
79
79
 
80
80
  <l:BlockLayoutCell
81
81
  class="largeCell"
82
- backgroundColorSet="ColorSet11"
82
+ backgroundColorSet="ColorSet10"
83
83
  backgroundColorShade="ShadeB">
84
84
  <l:VerticalLayout
85
85
  width="100%">
@@ -95,8 +95,8 @@
95
95
 
96
96
  <l:BlockLayoutCell
97
97
  class="largeCell"
98
- backgroundColorSet="ColorSet11"
99
- backgroundColorShade="ShadeD">
98
+ backgroundColorSet="ColorSet10"
99
+ backgroundColorShade="ShadeC">
100
100
  <l:VerticalLayout
101
101
  width="100%">
102
102
  <custom:TitleLink
@@ -116,7 +116,7 @@
116
116
  <l:BlockLayoutRow>
117
117
  <l:BlockLayoutCell
118
118
  class="largeCell"
119
- backgroundColorSet="ColorSet11"
119
+ backgroundColorSet="ColorSet10"
120
120
  backgroundColorShade="ShadeC">
121
121
  <l:VerticalLayout
122
122
  width="100%">
@@ -135,7 +135,7 @@
135
135
 
136
136
  <l:BlockLayoutCell
137
137
  class="largeCell"
138
- backgroundColorSet="ColorSet11"
138
+ backgroundColorSet="ColorSet10"
139
139
  backgroundColorShade="ShadeB">
140
140
  <l:VerticalLayout
141
141
  width="100%">
@@ -154,7 +154,7 @@
154
154
 
155
155
  <l:BlockLayoutCell
156
156
  class="largeCell"
157
- backgroundColorSet="ColorSet11"
157
+ backgroundColorSet="ColorSet10"
158
158
  backgroundColorShade="ShadeA"
159
159
  width="2">
160
160
  <l:VerticalLayout
@@ -176,8 +176,8 @@
176
176
  <l:BlockLayoutRow>
177
177
  <l:BlockLayoutCell
178
178
  class="largeCell"
179
- backgroundColorSet="ColorSet11"
180
- backgroundColorShade="ShadeD"
179
+ backgroundColorSet="ColorSet10"
180
+ backgroundColorShade="ShadeA"
181
181
  width="2">
182
182
  <l:VerticalLayout
183
183
  width="100%">
@@ -196,7 +196,7 @@
196
196
 
197
197
  <l:BlockLayoutCell
198
198
  class="largeCell"
199
- backgroundColorSet="ColorSet11"
199
+ backgroundColorSet="ColorSet10"
200
200
  backgroundColorShade="ShadeB"
201
201
  width="2">
202
202
  <l:VerticalLayout
@@ -218,7 +218,7 @@
218
218
  <l:BlockLayoutRow visible="{= !${versionData>/isOpenUI5}}">
219
219
  <l:BlockLayoutCell
220
220
  class="largeCell"
221
- backgroundColorSet="ColorSet11"
221
+ backgroundColorSet="ColorSet10"
222
222
  backgroundColorShade="ShadeA"
223
223
  width="2">
224
224
  <l:VerticalLayout
@@ -238,7 +238,7 @@
238
238
 
239
239
  <l:BlockLayoutCell
240
240
  class="largeCell"
241
- backgroundColorSet="ColorSet11"
241
+ backgroundColorSet="ColorSet10"
242
242
  backgroundColorShade="ShadeC">
243
243
  <l:VerticalLayout
244
244
  width="100%">
@@ -257,7 +257,7 @@
257
257
 
258
258
  <l:BlockLayoutCell
259
259
  class="largeCell"
260
- backgroundColorSet="ColorSet11"
260
+ backgroundColorSet="ColorSet10"
261
261
  backgroundColorShade="ShadeD">
262
262
  <l:VerticalLayout
263
263
  width="100%">
@@ -69,7 +69,7 @@
69
69
  <l:BlockLayoutRow>
70
70
  <l:BlockLayoutCell
71
71
  class="largeCell"
72
- backgroundColorSet="ColorSet11"
72
+ backgroundColorSet="ColorSet10"
73
73
  backgroundColorShade="ShadeA">
74
74
  <l:VerticalLayout>
75
75
  <core:Icon
@@ -88,7 +88,7 @@
88
88
  </l:BlockLayoutCell>
89
89
  <l:BlockLayoutCell
90
90
  class="largeCell"
91
- backgroundColorSet="ColorSet11"
91
+ backgroundColorSet="ColorSet10"
92
92
  backgroundColorShade="ShadeB">
93
93
  <l:VerticalLayout>
94
94
  <core:Icon
@@ -107,7 +107,7 @@
107
107
  </l:BlockLayoutCell>
108
108
  <l:BlockLayoutCell
109
109
  class="largeCell"
110
- backgroundColorSet="ColorSet11"
110
+ backgroundColorSet="ColorSet10"
111
111
  backgroundColorShade="ShadeC">
112
112
  <l:VerticalLayout>
113
113
  <core:Icon
@@ -126,7 +126,7 @@
126
126
  </l:BlockLayoutCell>
127
127
  <l:BlockLayoutCell
128
128
  class="largeCell"
129
- backgroundColorSet="ColorSet11"
129
+ backgroundColorSet="ColorSet10"
130
130
  backgroundColorShade="ShadeA">
131
131
  <l:VerticalLayout>
132
132
  <core:Icon
@@ -147,7 +147,7 @@
147
147
  <l:BlockLayoutRow>
148
148
  <l:BlockLayoutCell
149
149
  class="largeCell"
150
- backgroundColorSet="ColorSet11"
150
+ backgroundColorSet="ColorSet10"
151
151
  backgroundColorShade="ShadeB">
152
152
  <l:VerticalLayout>
153
153
  <core:Icon
@@ -167,8 +167,8 @@
167
167
  </l:BlockLayoutCell>
168
168
  <l:BlockLayoutCell
169
169
  class="largeCell"
170
- backgroundColorSet="ColorSet11"
171
- backgroundColorShade="ShadeD">
170
+ backgroundColorSet="ColorSet10"
171
+ backgroundColorShade="ShadeA">
172
172
  <l:VerticalLayout>
173
173
  <core:Icon
174
174
  src="sap-icon://message-popup"
@@ -186,8 +186,8 @@
186
186
  </l:BlockLayoutCell>
187
187
  <l:BlockLayoutCell
188
188
  class="largeCell"
189
- backgroundColorSet="ColorSet11"
190
- backgroundColorShade="ShadeA">
189
+ backgroundColorSet="ColorSet10"
190
+ backgroundColorShade="ShadeB">
191
191
  <l:VerticalLayout>
192
192
  <core:Icon
193
193
  src="sap-icon://header"
@@ -205,7 +205,7 @@
205
205
  </l:BlockLayoutCell>
206
206
  <l:BlockLayoutCell
207
207
  class="largeCell"
208
- backgroundColorSet="ColorSet11"
208
+ backgroundColorSet="ColorSet10"
209
209
  backgroundColorShade="ShadeC">
210
210
  <l:VerticalLayout>
211
211
  <core:Icon
@@ -226,7 +226,7 @@
226
226
  <l:BlockLayoutRow visible="{= !${versionData>/isOpenUI5}}">
227
227
  <l:BlockLayoutCell
228
228
  class="largeCell"
229
- backgroundColorSet="ColorSet11"
229
+ backgroundColorSet="ColorSet10"
230
230
  backgroundColorShade="ShadeD">
231
231
  <l:VerticalLayout>
232
232
  <core:Icon
@@ -245,7 +245,7 @@
245
245
  </l:BlockLayoutCell>
246
246
  <l:BlockLayoutCell
247
247
  class="largeCell"
248
- backgroundColorSet="ColorSet11"
248
+ backgroundColorSet="ColorSet10"
249
249
  backgroundColorShade="ShadeA">
250
250
  <l:VerticalLayout>
251
251
  <core:Icon
@@ -265,7 +265,7 @@
265
265
  </l:BlockLayoutCell>
266
266
  <l:BlockLayoutCell
267
267
  class="largeCell"
268
- backgroundColorSet="ColorSet11"
268
+ backgroundColorSet="ColorSet10"
269
269
  backgroundColorShade="ShadeC">
270
270
  <l:VerticalLayout>
271
271
  <core:Icon
@@ -285,7 +285,7 @@
285
285
  </l:BlockLayoutCell>
286
286
  <l:BlockLayoutCell
287
287
  class="largeCell"
288
- backgroundColorSet="ColorSet11"
288
+ backgroundColorSet="ColorSet10"
289
289
  backgroundColorShade="ShadeD">
290
290
  <l:VerticalLayout>
291
291
  <core:Icon
@@ -322,7 +322,7 @@
322
322
  <l:BlockLayoutRow>
323
323
  <l:BlockLayoutCell
324
324
  class="largeCell"
325
- backgroundColorSet="ColorSet11"
325
+ backgroundColorSet="ColorSet10"
326
326
  backgroundColorShade="ShadeA">
327
327
  <l:VerticalLayout>
328
328
  <core:Icon
@@ -342,7 +342,7 @@
342
342
  </l:BlockLayoutCell>
343
343
  <l:BlockLayoutCell
344
344
  class="largeCell"
345
- backgroundColorSet="ColorSet11"
345
+ backgroundColorSet="ColorSet10"
346
346
  backgroundColorShade="ShadeB">
347
347
  <l:VerticalLayout>
348
348
  <core:Icon
@@ -363,7 +363,7 @@
363
363
  </l:BlockLayoutCell>
364
364
  <l:BlockLayoutCell
365
365
  class="largeCell"
366
- backgroundColorSet="ColorSet11"
366
+ backgroundColorSet="ColorSet10"
367
367
  backgroundColorShade="ShadeC">
368
368
  <l:VerticalLayout>
369
369
  <core:Icon
@@ -383,8 +383,8 @@
383
383
  </l:BlockLayoutCell>
384
384
  <l:BlockLayoutCell
385
385
  class="largeCell"
386
- backgroundColorSet="ColorSet11"
387
- backgroundColorShade="ShadeD">
386
+ backgroundColorSet="ColorSet10"
387
+ backgroundColorShade="ShadeA">
388
388
  <l:VerticalLayout>
389
389
  <core:Icon
390
390
  src="sap-icon://screen-split-one"
@@ -37,7 +37,7 @@
37
37
  </headerContent>
38
38
 
39
39
  <sections>
40
- <ObjectPageSection id="about" title="{i18n>ENTITY_ABOUT}">
40
+ <ObjectPageSection class="sapUiDemokitEntityAbout" id="about" title="{i18n>ENTITY_ABOUT}">
41
41
  <subSections>
42
42
  <ObjectPageSubSection>
43
43
 
@@ -54,7 +54,7 @@
54
54
  </subSections>
55
55
  </ObjectPageSection>
56
56
 
57
- <ObjectPageSection id="samples" title="{
57
+ <ObjectPageSection class="sapUiDemokitEntitySamples" id="samples" title="{
58
58
  parts: [
59
59
  'i18n>ENTITY_SAMPLES',
60
60
  '/count/samples'
@@ -390,7 +390,10 @@
390
390
  </f:content>
391
391
  </f:Card>
392
392
  <!-- Live Editor -->
393
- <f:Card class="threeColumnLayoutCard" visible="{=! (${device>/system/phone} || ${device>/browser/msie}) }">
393
+ <f:Card class="threeColumnLayoutCard"
394
+ visible="{
395
+ path: '/liveEditor',
396
+ formatter: '.formatter.formatToolCardVisibility'}">
394
397
  <f:content>
395
398
  <VBox justifyContent="SpaceBetween">
396
399
  <VBox class="sapUiSmallMargin toolspageCardInfo">
@@ -409,7 +412,10 @@
409
412
  </f:content>
410
413
  </f:Card>
411
414
  <!-- Flexible Programming Model Explorer -->
412
- <f:Card class="threeColumnLayoutCard" visible="{=! (${device>/system/phone} || ${device>/browser/msie}) }">
415
+ <f:Card class="threeColumnLayoutCard"
416
+ visible="{
417
+ path: '/flexibleProgrammingModelExplorer',
418
+ formatter: '.formatter.formatToolCardVisibility'}">
413
419
  <f:content>
414
420
  <VBox justifyContent="SpaceBetween">
415
421
  <VBox class="sapUiSmallMargin toolspageCardInfo">
@@ -428,7 +434,10 @@
428
434
  </f:content>
429
435
  </f:Card>
430
436
  <!-- Accessibility Guide -->
431
- <f:Card class="threeColumnLayoutCard" visible="{=! (${device>/system/phone} || ${device>/browser/msie}) }">
437
+ <f:Card class="threeColumnLayoutCard"
438
+ visible="{
439
+ path: '/accessibilityGuide',
440
+ formatter: '.formatter.formatToolCardVisibility'}">
432
441
  <f:content>
433
442
  <VBox justifyContent="SpaceBetween">
434
443
  <VBox class="sapUiSmallMargin toolspageCardInfo">
@@ -81,7 +81,7 @@
81
81
  <l:BlockLayoutRow class="sapUiContentPadding">
82
82
  <l:BlockLayoutCell
83
83
  class="largeCell"
84
- backgroundColorSet="ColorSet11"
84
+ backgroundColorSet="ColorSet10"
85
85
  backgroundColorShade="ShadeA">
86
86
  <l:VerticalLayout width="100%">
87
87
  <custom:TitleLink
@@ -96,7 +96,7 @@
96
96
 
97
97
  <l:BlockLayoutCell
98
98
  class="largeCell"
99
- backgroundColorSet="ColorSet11"
99
+ backgroundColorSet="ColorSet10"
100
100
  backgroundColorShade="ShadeB">
101
101
  <l:VerticalLayout width="100%">
102
102
  <custom:TitleLink
@@ -112,8 +112,8 @@
112
112
  <l:BlockLayoutCell
113
113
  width="2"
114
114
  class="largeCell"
115
- backgroundColorSet="ColorSet11"
116
- backgroundColorShade="ShadeD">
115
+ backgroundColorSet="ColorSet10"
116
+ backgroundColorShade="ShadeC">
117
117
  <l:VerticalLayout width="100%">
118
118
  <custom:TitleLink
119
119
  width="100%"
@@ -129,8 +129,8 @@
129
129
  <l:BlockLayoutCell
130
130
  width="2"
131
131
  class="largeCell"
132
- backgroundColorSet="ColorSet11"
133
- backgroundColorShade="ShadeC">
132
+ backgroundColorSet="ColorSet10"
133
+ backgroundColorShade="ShadeA">
134
134
  <l:VerticalLayout width="100%">
135
135
  <custom:TitleLink
136
136
  width="100%"
@@ -142,7 +142,7 @@
142
142
  </l:BlockLayoutCell>
143
143
  <l:BlockLayoutCell
144
144
  class="largeCell"
145
- backgroundColorSet="ColorSet11"
145
+ backgroundColorSet="ColorSet10"
146
146
  backgroundColorShade="ShadeB">
147
147
  <l:VerticalLayout width="100%">
148
148
  <custom:TitleLink
@@ -157,7 +157,7 @@
157
157
 
158
158
  <l:BlockLayoutCell
159
159
  class="largeCell"
160
- backgroundColorSet="ColorSet11"
160
+ backgroundColorSet="ColorSet10"
161
161
  backgroundColorShade="ShadeA">
162
162
  <l:VerticalLayout width="100%">
163
163
  <custom:TitleLink
@@ -191,7 +191,7 @@
191
191
 
192
192
  <l:BlockLayoutCell
193
193
  class="largeCell demokitInitialPagesColorPatternC"
194
- backgroundColorSet="ColorSet11"
194
+ backgroundColorSet="ColorSet10"
195
195
  backgroundColorShade="ShadeB"
196
196
  visible="{=!${versionData>/isOpenUI5}}">
197
197
  <l:VerticalLayout width="100%">
@@ -206,8 +206,8 @@
206
206
  </l:BlockLayoutCell>
207
207
  <l:BlockLayoutCell
208
208
  class="largeCell"
209
- backgroundColorSet="ColorSet11"
210
- backgroundColorShade="ShadeD">
209
+ backgroundColorSet="ColorSet10"
210
+ backgroundColorShade="ShadeB">
211
211
  <l:VerticalLayout width="100%">
212
212
  <custom:TitleLink
213
213
  width="100%"
@@ -220,7 +220,7 @@
220
220
 
221
221
  <l:BlockLayoutCell
222
222
  class="largeCell"
223
- backgroundColorSet="ColorSet11"
223
+ backgroundColorSet="ColorSet10"
224
224
  backgroundColorShade="ShadeC">
225
225
  <l:VerticalLayout width="100%">
226
226
  <custom:TitleLink