@ui5/webcomponents-base 0.0.0-6ef02a35f → 0.0.0-701b14e36

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 (159) hide show
  1. package/.eslintignore +3 -2
  2. package/CHANGELOG.md +199 -0
  3. package/README.md +26 -2
  4. package/bundle.esm.js +6 -2
  5. package/dist/Boot.js +34 -18
  6. package/dist/CSP.js +59 -0
  7. package/dist/CustomElementsRegistry.js +60 -4
  8. package/dist/CustomElementsScope.js +20 -98
  9. package/dist/CustomElementsScopeUtils.js +108 -0
  10. package/dist/Device.js +20 -1
  11. package/dist/EventProvider.js +19 -25
  12. package/dist/FeaturesRegistry.js +4 -1
  13. package/dist/FontFace.js +7 -95
  14. package/dist/InitialConfiguration.js +11 -7
  15. package/dist/Keys.js +56 -0
  16. package/dist/ManagedStyles.js +83 -0
  17. package/dist/Render.js +3 -1
  18. package/dist/Runtimes.js +107 -0
  19. package/dist/StaticAreaItem.js +15 -10
  20. package/dist/SystemCSSVars.js +4 -25
  21. package/dist/UI5Element.js +59 -60
  22. package/dist/UI5ElementMetadata.js +18 -2
  23. package/dist/asset-registries/Icons.js +22 -8
  24. package/dist/asset-registries/Illustrations.js +10 -3
  25. package/dist/asset-registries/LocaleData.js +17 -3
  26. package/dist/asset-registries/Themes.js +6 -2
  27. package/dist/assets-meta/IconCollectionsAlias.js +18 -0
  28. package/dist/config/Icons.js +52 -0
  29. package/dist/config/Theme.js +25 -0
  30. package/dist/css/BusyIndicator.css +76 -0
  31. package/dist/css/FontFace.css +75 -0
  32. package/dist/css/OverrideFontFace.css +32 -0
  33. package/dist/css/SystemCSSVars.css +17 -0
  34. package/dist/delegate/ItemNavigation.js +66 -0
  35. package/dist/features/F6Navigation.js +106 -0
  36. package/dist/features/OpenUI5Enablement.js +119 -0
  37. package/dist/generated/AssetParameters.js +1 -1
  38. package/dist/generated/VersionInfo.js +10 -0
  39. package/dist/generated/css/BusyIndicator.css.js +5 -0
  40. package/dist/generated/css/FontFace.css.js +5 -0
  41. package/dist/generated/css/OverrideFontFace.css.js +5 -0
  42. package/dist/generated/css/SystemCSSVars.css.js +5 -0
  43. package/dist/i18nBundle.js +33 -2
  44. package/dist/renderer/LitRenderer.js +33 -12
  45. package/dist/renderer/directives/style-map.js +72 -0
  46. package/dist/renderer/executeTemplate.js +19 -2
  47. package/dist/resources/bundle.esm.js +15 -9
  48. package/dist/resources/bundle.esm.js.map +1 -1
  49. package/dist/sap/base/Log.js +2 -10
  50. package/dist/sap/base/assert.js +1 -5
  51. package/dist/sap/base/security/encodeCSS.js +14 -0
  52. package/dist/sap/base/security/encodeXML.js +23 -0
  53. package/dist/sap/base/strings/toHex.js +8 -0
  54. package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +1 -1
  55. package/dist/test-resources/elements/WithStaticArea.js +2 -1
  56. package/dist/test-resources/pages/AllTestElements.html +3 -0
  57. package/dist/test-resources/pages/i18n.html +1 -3
  58. package/dist/test-resources/specs/ConfigurationChange.spec.js +9 -9
  59. package/dist/test-resources/specs/ConfigurationScript.spec.js +24 -24
  60. package/dist/test-resources/specs/ConfigurationURL.spec.js +33 -33
  61. package/dist/test-resources/specs/CustomTheme.spec.js +7 -7
  62. package/dist/test-resources/specs/EventProvider.spec.js +63 -0
  63. package/dist/test-resources/specs/StaticArea.spec.js +55 -13
  64. package/dist/test-resources/specs/Theming.spec.js +22 -11
  65. package/dist/test-resources/specs/UI5ElementInvalidation.js +29 -29
  66. package/dist/test-resources/specs/UI5ElementLifecycle.js +11 -11
  67. package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +11 -11
  68. package/dist/test-resources/specs/UI5ElementMetadataExt.js +8 -8
  69. package/dist/test-resources/specs/UI5ElementPropertyValidation.js +6 -6
  70. package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +36 -36
  71. package/dist/test-resources/specs/UI5ElementShadowDOM.js +9 -9
  72. package/dist/test-resources/specs/UI5ElementSlots.js +9 -9
  73. package/dist/theming/CustomStyle.js +23 -3
  74. package/dist/theming/applyTheme.js +11 -10
  75. package/dist/theming/getEffectiveLinksHrefs.js +27 -0
  76. package/dist/theming/getEffectiveStyle.js +9 -0
  77. package/dist/theming/getStylesString.js +4 -2
  78. package/dist/theming/getThemeDesignerTheme.js +25 -5
  79. package/dist/theming/preloadLinks.js +23 -0
  80. package/dist/types/DataType.js +12 -0
  81. package/dist/types/Float.js +4 -0
  82. package/dist/types/Integer.js +4 -0
  83. package/dist/updateShadowRoot.js +8 -4
  84. package/dist/util/FocusableElements.js +8 -6
  85. package/dist/util/InvisibleMessage.js +11 -9
  86. package/dist/util/TabbableElements.js +4 -0
  87. package/dist/util/createLinkInHead.js +19 -0
  88. package/dist/util/escapeRegex.js +10 -0
  89. package/dist/util/generateHighlightedMarkup.js +42 -0
  90. package/dist/util/getNormalizedTarget.js +16 -0
  91. package/dist/util/isNodeHidden.js +1 -1
  92. package/lib/generate-asset-parameters/index.js +8 -5
  93. package/lib/generate-styles/index.js +26 -0
  94. package/lib/generate-version-info/index.js +32 -0
  95. package/package-scripts.js +12 -16
  96. package/package.json +10 -12
  97. package/src/Boot.js +34 -18
  98. package/src/CSP.js +59 -0
  99. package/src/CustomElementsRegistry.js +60 -4
  100. package/src/CustomElementsScope.js +20 -98
  101. package/src/CustomElementsScopeUtils.js +108 -0
  102. package/src/Device.js +20 -1
  103. package/src/EventProvider.js +19 -25
  104. package/src/FeaturesRegistry.js +4 -1
  105. package/src/FontFace.js +7 -95
  106. package/src/InitialConfiguration.js +11 -7
  107. package/src/Keys.js +56 -0
  108. package/src/ManagedStyles.js +83 -0
  109. package/src/Render.js +3 -1
  110. package/src/Runtimes.js +107 -0
  111. package/src/StaticAreaItem.js +15 -10
  112. package/src/SystemCSSVars.js +4 -25
  113. package/src/UI5Element.js +59 -60
  114. package/src/UI5ElementMetadata.js +18 -2
  115. package/src/asset-registries/Icons.js +22 -8
  116. package/src/asset-registries/Illustrations.js +10 -3
  117. package/src/asset-registries/LocaleData.js +17 -3
  118. package/src/asset-registries/Themes.js +6 -2
  119. package/src/assets-meta/IconCollectionsAlias.js +18 -0
  120. package/src/config/Icons.js +52 -0
  121. package/src/config/Theme.js +25 -0
  122. package/src/css/BusyIndicator.css +76 -0
  123. package/src/css/FontFace.css +75 -0
  124. package/src/css/OverrideFontFace.css +32 -0
  125. package/src/css/SystemCSSVars.css +17 -0
  126. package/src/delegate/ItemNavigation.js +66 -0
  127. package/src/features/F6Navigation.js +106 -0
  128. package/src/features/OpenUI5Enablement.js +119 -0
  129. package/src/i18nBundle.js +33 -2
  130. package/src/renderer/LitRenderer.js +33 -12
  131. package/src/renderer/directives/style-map.js +72 -0
  132. package/src/renderer/executeTemplate.js +19 -2
  133. package/src/theming/CustomStyle.js +23 -3
  134. package/src/theming/applyTheme.js +11 -10
  135. package/src/theming/getEffectiveLinksHrefs.js +27 -0
  136. package/src/theming/getEffectiveStyle.js +9 -0
  137. package/src/theming/getStylesString.js +4 -2
  138. package/src/theming/getThemeDesignerTheme.js +25 -5
  139. package/src/theming/preloadLinks.js +23 -0
  140. package/src/types/DataType.js +12 -0
  141. package/src/types/Float.js +4 -0
  142. package/src/types/Integer.js +4 -0
  143. package/src/updateShadowRoot.js +8 -4
  144. package/src/util/FocusableElements.js +8 -6
  145. package/src/util/InvisibleMessage.js +11 -9
  146. package/src/util/TabbableElements.js +4 -0
  147. package/src/util/createLinkInHead.js +19 -0
  148. package/src/util/escapeRegex.js +10 -0
  149. package/src/util/generateHighlightedMarkup.js +42 -0
  150. package/src/util/getNormalizedTarget.js +16 -0
  151. package/src/util/isNodeHidden.js +1 -1
  152. package/used-modules.txt +4 -1
  153. package/dist/config/AssetsPath.js +0 -17
  154. package/dist/theming/createThemePropertiesStyleTag.js +0 -20
  155. package/dist/util/encodeCSS.js +0 -24
  156. package/hash.txt +0 -1
  157. package/src/config/AssetsPath.js +0 -17
  158. package/src/theming/createThemePropertiesStyleTag.js +0 -20
  159. package/src/util/encodeCSS.js +0 -24
@@ -0,0 +1,52 @@
1
+ import { getTheme, isThemeFamily } from "./Theme.js";
2
+
3
+ const IconCollectionConfiguration = new Map();
4
+
5
+ /**
6
+ * Sets the default icon collection (v4 or v5) per theme,
7
+ * which will be applied in case icon collection is not specified.
8
+ *
9
+ * Note: by default SAP-icons-v5 is used in SAP Horizon and SAP-icons-v4 for all the rest.
10
+ * @param {String} theme
11
+ * @param {String} collectionName
12
+ */
13
+ const setDefaultIconCollection = (theme, collectionName) => {
14
+ if (collectionName === "horizon") {
15
+ collectionName = "SAP-icons-v5";
16
+ }
17
+
18
+ IconCollectionConfiguration.set(theme, collectionName);
19
+ };
20
+
21
+ /**
22
+ * Returns the default icon collection (v4 or v5) for given theme,
23
+ * that is configured.
24
+ *
25
+ * @param {String} theme
26
+ * @returns {String}
27
+ */
28
+ const getDefaultIconCollection = theme => {
29
+ return IconCollectionConfiguration.get(theme);
30
+ };
31
+
32
+ /**
33
+ * Returns the effective icon collection that will be applied for icon web components
34
+ * whenever namespace is not specified.
35
+ * @returns {String}
36
+ */
37
+ const getEffectiveDefaultIconCollection = () => {
38
+ const currentTheme = getTheme();
39
+ const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
40
+
41
+ if (currentThemeConfiguration) {
42
+ return currentThemeConfiguration;
43
+ }
44
+
45
+ return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
46
+ };
47
+
48
+ export {
49
+ setDefaultIconCollection,
50
+ getDefaultIconCollection,
51
+ getEffectiveDefaultIconCollection,
52
+ };
@@ -1,4 +1,5 @@
1
1
  import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
2
+ import { reRenderAllUI5Elements } from "../Render.js";
2
3
  import applyTheme from "../theming/applyTheme.js";
3
4
 
4
5
  let theme;
@@ -20,9 +21,33 @@ const setTheme = async newTheme => {
20
21
 
21
22
  // Update CSS Custom Properties
22
23
  await applyTheme(theme);
24
+ await reRenderAllUI5Elements({ themeAware: true });
25
+ };
26
+
27
+ /**
28
+ * Returns if the given theme name is the one currently applied.
29
+ * @private
30
+ * @param {String}
31
+ * @returns {boolean}
32
+ */
33
+ const isTheme = _theme => {
34
+ const currentTheme = getTheme();
35
+ return currentTheme === _theme || currentTheme === `${_theme}_exp`;
36
+ };
37
+
38
+ /**
39
+ * Returns if the current theme is part of given theme family
40
+ * @private
41
+ * @param {String} the theme family
42
+ * @returns {boolean}
43
+ */
44
+ const isThemeFamily = _theme => {
45
+ return getTheme().startsWith(_theme);
23
46
  };
24
47
 
25
48
  export {
26
49
  getTheme,
27
50
  setTheme,
51
+ isTheme,
52
+ isThemeFamily,
28
53
  };
@@ -0,0 +1,76 @@
1
+ .busy-indicator-wrapper {
2
+ position: relative;
3
+ height: 100%;
4
+ width: 100%;
5
+ }
6
+
7
+ .busy-indicator-overlay {
8
+ display: var(--ui5_web_components_busy_indicator_display);
9
+ position: absolute;
10
+ inset: 0;
11
+ background: var(--ui5_web_components_busy_indicator_background-color);
12
+ z-index: 99;
13
+ }
14
+
15
+ .busy-indicator-busy-area {
16
+ display: var(--ui5_web_components_busy_indicator_display);
17
+ position: absolute;
18
+ z-index: 99;
19
+ inset: 0;
20
+ justify-content: center;
21
+ align-items: center;
22
+ background-color: inherit;
23
+ flex-direction: column;
24
+ color: var(--_ui5_busy_indicator_color);
25
+ }
26
+
27
+ :host([__is-busy]) .busy-indicator-wrapper > :not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]) {
28
+ --ui5_web_components_busy_indicator_display: none;
29
+ }
30
+
31
+ .busy-indicator-busy-area:focus {
32
+ outline: var(--_ui5_busy_indicator_focus_outline);
33
+ outline-offset: -.125rem;
34
+ }
35
+
36
+ .busy-indicator-circle {
37
+ width: 1rem;
38
+ height: 1rem;
39
+ display: inline-block;
40
+ background-color: currentColor;
41
+ border-radius: 50%;
42
+ }
43
+
44
+ .circle-animation-0 {
45
+ animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
46
+ }
47
+
48
+ .circle-animation-1 {
49
+ animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
50
+ animation-delay: 200ms;
51
+ }
52
+
53
+ .circle-animation-2 {
54
+ animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
55
+ animation-delay: 400ms;
56
+ }
57
+
58
+ .sapUiLocalBusy {
59
+ --ui5_web_components_busy_indicator_display: none;
60
+ }
61
+
62
+ @keyframes grow {
63
+ 0%, 50%, 100% {
64
+ -webkit-transform: scale(0.5);
65
+ -moz-transform: scale(0.5);
66
+ -ms-transform: scale(0.5);
67
+ transform: scale(0.5);
68
+ }
69
+
70
+ 25% {
71
+ -webkit-transform: scale(1);
72
+ -moz-transform: scale(1);
73
+ -ms-transform: scale(1);
74
+ transform: scale(1);
75
+ }
76
+ }
@@ -0,0 +1,75 @@
1
+ @font-face {
2
+ font-family: "72";
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ src: local("72"),
6
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
7
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
8
+ }
9
+
10
+ @font-face {
11
+ font-family: "72full";
12
+ font-style: normal;
13
+ font-weight: 400;
14
+ src: local('72-full'),
15
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
16
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
17
+
18
+ }
19
+
20
+ @font-face {
21
+ font-family: "72";
22
+ font-style: normal;
23
+ font-weight: 700;
24
+ src: local('72-Bold'),
25
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
26
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
27
+ }
28
+
29
+ @font-face {
30
+ font-family: "72full";
31
+ font-style: normal;
32
+ font-weight: 700;
33
+ src: local('72-Bold-full'),
34
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
35
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
36
+ }
37
+
38
+ @font-face {
39
+ font-family: '72-Bold';
40
+ font-style: normal;
41
+ src: local('72-Bold'),
42
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
43
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
44
+ }
45
+
46
+ @font-face {
47
+ font-family: '72-Boldfull';
48
+ font-style: normal;
49
+ src: url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
50
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
51
+ }
52
+
53
+ @font-face {
54
+ font-family: '72-Light';
55
+ font-style: normal;
56
+ src: local('72-Light'),
57
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),
58
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff");
59
+ }
60
+
61
+ @font-face {
62
+ font-family: '72-Lightfull';
63
+ font-style: normal;
64
+ src: url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),
65
+ url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff");
66
+ }
67
+
68
+ @font-face {
69
+ font-family: "72Black";
70
+ font-style: bold;
71
+ font-weight: 900;
72
+ src: local('72Black'),
73
+ url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),
74
+ url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
75
+ }
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Some diacritics are supported by the 72 font:
3
+ * * Grave
4
+ * * Acute
5
+ * * Circumflex
6
+ * * Tilde
7
+ *
8
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
9
+ * * Breve
10
+ * * Horn
11
+ * * Dot below
12
+ * * Hook above
13
+ *
14
+ *
15
+ * Override for the characters that aren't covered by the '72' font to other system fonts
16
+ *
17
+ * U+0102-0103: A and a with Breve
18
+ * U+01A0-01A1: O and o with Horn
19
+ * U+01AF-01B0: U and u with Horn
20
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
21
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
22
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
23
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
24
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
25
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
26
+ *
27
+ */
28
+ @font-face {
29
+ font-family: '72override';
30
+ unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
31
+ src: local('Arial'), local('Helvetica'), local('sans-serif');
32
+ }
@@ -0,0 +1,17 @@
1
+ :root {
2
+ --_ui5_content_density:cozy;
3
+ }
4
+
5
+ [data-ui5-compact-size],
6
+ .ui5-content-density-compact,
7
+ .sapUiSizeCompact {
8
+ --_ui5_content_density:compact;
9
+ }
10
+
11
+ [dir="rtl"] {
12
+ --_ui5_dir:rtl;
13
+ }
14
+
15
+ [dir="ltr"] {
16
+ --_ui5_dir:ltr;
17
+ }
@@ -5,6 +5,8 @@ import {
5
5
  isRight,
6
6
  isHome,
7
7
  isEnd,
8
+ isPageDown,
9
+ isPageUp,
8
10
  } from "../Keys.js";
9
11
  import getActiveElement from "../util/getActiveElement.js";
10
12
 
@@ -52,6 +54,7 @@ class ItemNavigation {
52
54
  * - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
53
55
  * - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
54
56
  * - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
57
+ * - skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item
55
58
  * - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items
56
59
  * Static means that nothing happens if the user tries to navigate beyond the first/last item.
57
60
  * Cycling means that when the user navigates beyond the last item they go to the first and vice versa.
@@ -85,6 +88,7 @@ class ItemNavigation {
85
88
  this._behavior = options.behavior || ItemNavigationBehavior.Static;
86
89
  this._navigationMode = options.navigationMode || NavigationMode.Auto;
87
90
  this._affectedPropertiesNames = options.affectedPropertiesNames || [];
91
+ this._skipItemsSize = options.skipItemsSize || null;
88
92
  }
89
93
 
90
94
  /**
@@ -142,6 +146,10 @@ class ItemNavigation {
142
146
  this._handleHome();
143
147
  } else if (isEnd(event)) {
144
148
  this._handleEnd();
149
+ } else if (isPageUp(event)) {
150
+ this._handlePageUp();
151
+ } else if (isPageDown(event)) {
152
+ this._handlePageDown();
145
153
  } else {
146
154
  return; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation
147
155
  }
@@ -222,6 +230,64 @@ class ItemNavigation {
222
230
  this._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line
223
231
  }
224
232
 
233
+ _handlePageUp() {
234
+ if (this._rowSize > 1) {
235
+ // eslint-disable-next-line
236
+ // TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
237
+ return;
238
+ }
239
+ this._handlePageUpFlat();
240
+ }
241
+
242
+ _handlePageDown() {
243
+ if (this._rowSize > 1) {
244
+ // eslint-disable-next-line
245
+ // TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
246
+ return;
247
+ }
248
+ this._handlePageDownFlat();
249
+ }
250
+
251
+ /**
252
+ * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.
253
+ */
254
+ _handlePageUpFlat() {
255
+ if (this._skipItemsSize === null) {
256
+ // Move the focus to the very top (as Home).
257
+ this._currentIndex -= this._currentIndex;
258
+ }
259
+
260
+ if (this._currentIndex + 1 > this._skipItemsSize) {
261
+ // When there are more than "skipItemsSize" number of items to the top,
262
+ // move the focus up/left with the predefined number.
263
+ this._currentIndex -= this._skipItemsSize;
264
+ } else {
265
+ // Otherwise, move the focus to the very top (as Home).
266
+ this._currentIndex -= this._currentIndex;
267
+ }
268
+ }
269
+
270
+ /**
271
+ * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.
272
+ */
273
+ _handlePageDownFlat() {
274
+ if (this._skipItemsSize === null) {
275
+ // Move the focus to the very bottom (as End).
276
+ this._currentIndex = this._getItems().length - 1;
277
+ }
278
+
279
+ const currentToEndRange = this._getItems().length - this._currentIndex - 1;
280
+
281
+ if (currentToEndRange > this._skipItemsSize) {
282
+ // When there are more than "skipItemsSize" number of items until the bottom,
283
+ // move the focus down/right with the predefined number.
284
+ this._currentIndex += this._skipItemsSize;
285
+ } else {
286
+ // Otherwise, move the focus to the very bottom (as End).
287
+ this._currentIndex = this._getItems().length - 1;
288
+ }
289
+ }
290
+
225
291
  _applyTabIndex() {
226
292
  const items = this._getItems();
227
293
  for (let i = 0; i < items.length; i++) {
@@ -0,0 +1,106 @@
1
+ import { registerFeature } from "../FeaturesRegistry.js";
2
+ import { isF6Next, isF6Previous } from "../Keys.js";
3
+ import { getFirstFocusableElement } from "../util/FocusableElements.js";
4
+
5
+ class F6Navigation {
6
+ init() {
7
+ this.keydownHandler = this._keydownHandler.bind(this);
8
+ this.attachEventListeners();
9
+ this.selectedGroup = null;
10
+ this.groups = [];
11
+ }
12
+
13
+ attachEventListeners() {
14
+ document.addEventListener("keydown", this.keydownHandler);
15
+ }
16
+
17
+ async _keydownHandler(event) {
18
+ if (isF6Next(event)) {
19
+ this.updateGroups();
20
+ if (this.groups.length < 1) {
21
+ return;
22
+ }
23
+
24
+ const nextIndex = this.groups.indexOf(this.selectedGroup);
25
+ let nextElement = null;
26
+
27
+ if (nextIndex > -1) {
28
+ if (nextIndex + 1 >= this.groups.length) {
29
+ nextElement = this.groups[0];
30
+ } else {
31
+ nextElement = this.groups[nextIndex + 1];
32
+ }
33
+ } else {
34
+ nextElement = this.groups[0];
35
+ }
36
+
37
+ const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
38
+ elementToFocus.focus();
39
+ }
40
+
41
+ if (isF6Previous(event)) {
42
+ this.updateGroups();
43
+ if (this.groups.length < 1) {
44
+ return;
45
+ }
46
+
47
+ const nextIndex = this.groups.indexOf(this.selectedGroup);
48
+ let nextElement = null;
49
+
50
+ if (nextIndex > -1) {
51
+ if (nextIndex - 1 < 0) {
52
+ nextElement = this.groups[this.groups.length - 1];
53
+ } else {
54
+ // Handle the situation where the first focusable element of two neighbor groups is the same
55
+ // For example:
56
+ // <ui5-flexible-column-layout>
57
+ // <ui5-list>
58
+ // <ui5-li>List Item</ui5-li>
59
+ // </ui5-list>
60
+ // </ui5-flexible-column-layout>
61
+ // Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
62
+
63
+ const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
64
+ const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
65
+
66
+ nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
67
+ }
68
+ } else {
69
+ nextElement = this.groups[this.groups.length - 1];
70
+ }
71
+
72
+ const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
73
+ elementToFocus.focus();
74
+ }
75
+ }
76
+
77
+ removeEventListeners() {
78
+ document.removeEventListener("keydown", this.keydownHandler);
79
+ }
80
+
81
+ updateGroups() {
82
+ this.setSelectedGroup(document.activeElement);
83
+ this.setGroups();
84
+ }
85
+
86
+ setGroups() {
87
+ this.groups = Array.from(document.querySelectorAll("[data-sap-ui-fastnavgroup='true']")).filter(group => group.clientWidth && window.getComputedStyle(group).visibility !== "hidden");
88
+ }
89
+
90
+ setSelectedGroup(element) {
91
+ while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== document.querySelector("html")) {
92
+ element = element.parentElement ? element.parentNode : element.parentNode.host;
93
+ }
94
+
95
+ this.selectedGroup = element;
96
+ }
97
+
98
+ destroy() {
99
+ this.removeEventListeners();
100
+ }
101
+ }
102
+
103
+ const F6HelperInstance = new F6Navigation();
104
+ registerFeature("F6Navigation", F6HelperInstance);
105
+
106
+ export default F6Navigation;
@@ -0,0 +1,119 @@
1
+ import { registerFeature } from "../FeaturesRegistry.js";
2
+ import BusyIndicatorStyles from "../generated/css/BusyIndicator.css.js";
3
+ import merge from "../thirdparty/merge.js";
4
+ import {
5
+ isTabPrevious,
6
+ } from "../Keys.js";
7
+
8
+ const busyIndicatorMetadata = {
9
+ properties: {
10
+ __isBusy: {
11
+ type: Boolean,
12
+ },
13
+ },
14
+ };
15
+
16
+ const getBusyIndicatorStyles = () => {
17
+ return BusyIndicatorStyles;
18
+ };
19
+
20
+ const wrapTemplateResultInBusyMarkup = (html, host, templateResult) => {
21
+ if (host.isOpenUI5Component && host.__isBusy) {
22
+ templateResult = html`
23
+ <div class="busy-indicator-wrapper">
24
+ <span tabindex="0" busy-indicator-before-span @focusin=${host.__suppressFocusIn}></span>
25
+ ${templateResult}
26
+ <div class="busy-indicator-overlay"></div>
27
+ <div busy-indicator
28
+ class="busy-indicator-busy-area"
29
+ tabindex="0"
30
+ role="progressbar"
31
+ @keydown=${host.__suppressFocusBack}
32
+ aria-valuemin="0"
33
+ aria-valuemax="100"
34
+ aria-valuetext="Busy">
35
+ <div>
36
+ <div class="busy-indicator-circle circle-animation-0"></div>
37
+ <div class="busy-indicator-circle circle-animation-1"></div>
38
+ <div class="busy-indicator-circle circle-animation-2"></div>
39
+ </div>
40
+ </div>
41
+ </div>`;
42
+ }
43
+
44
+ return templateResult;
45
+ };
46
+
47
+ const enrichBusyIndicatorMetadata = UI5Element => {
48
+ UI5Element.metadata = merge(UI5Element.metadata, busyIndicatorMetadata);
49
+ };
50
+
51
+ const enrichBusyIndicatorMethods = UI5ElementPrototype => {
52
+ Object.defineProperties(UI5ElementPrototype, {
53
+ "__redirectFocus": { value: true, writable: true },
54
+ "__suppressFocusBack": {
55
+ get() {
56
+ const that = this;
57
+
58
+ return {
59
+ handleEvent: e => {
60
+ if (isTabPrevious(e)) {
61
+ const beforeElem = that.shadowRoot.querySelector("[busy-indicator-before-span]");
62
+ that.__redirectFocus = false;
63
+ beforeElem.focus();
64
+ that.__redirectFocus = true;
65
+ }
66
+ },
67
+ capture: true,
68
+ passive: false,
69
+ };
70
+ },
71
+ },
72
+ "isOpenUI5Component": { get: () => { return true; } },
73
+ });
74
+
75
+ UI5ElementPrototype.__suppressFocusIn = function handleFocusIn() {
76
+ const busyIndicator = this.shadowRoot.querySelector("[busy-indicator]");
77
+ if (busyIndicator && this.__redirectFocus) {
78
+ busyIndicator.focus();
79
+ }
80
+ };
81
+
82
+ UI5ElementPrototype.getDomRef = function getDomRef() {
83
+ // If a component set _getRealDomRef to its children, use the return value of this function
84
+ if (typeof this._getRealDomRef === "function") {
85
+ return this._getRealDomRef();
86
+ }
87
+
88
+ if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
89
+ return;
90
+ }
91
+
92
+ const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
93
+
94
+ if (children.length !== 1) {
95
+ console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
96
+ }
97
+
98
+ if (this.__isBusy) {
99
+ return children[0].querySelector(".busy-indicator-wrapper > :not([busy-indicator-before-span]):not(.busy-indicator-overlay):not(.busy-indicator-busy-area)");
100
+ }
101
+
102
+ return children[0];
103
+ };
104
+ };
105
+
106
+ const enrichBusyIndicatorSettings = UI5Element => {
107
+ enrichBusyIndicatorMetadata(UI5Element);
108
+ enrichBusyIndicatorMethods(UI5Element.prototype);
109
+ };
110
+
111
+ const OpenUI5Enablement = {
112
+ enrichBusyIndicatorSettings,
113
+ wrapTemplateResultInBusyMarkup,
114
+ getBusyIndicatorStyles,
115
+ };
116
+
117
+ export default OpenUI5Enablement;
118
+
119
+ registerFeature("OpenUI5Enablement", OpenUI5Enablement);
@@ -1,4 +1,4 @@
1
- const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
1
+ const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw","sap_horizon","sap_horizon_dark","sap_horizon_hcb","sap_horizon_hcw","sap_horizon_exp"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sr_Latn","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
2
2
 
3
3
  const DEFAULT_THEME = assetParameters.themes.default;
4
4
  const DEFAULT_LANGUAGE = assetParameters.languages.default;
@@ -0,0 +1,10 @@
1
+ const VersionInfo = {
2
+ version: "0.0.0-701b14e36",
3
+ major: 0,
4
+ minor: 0,
5
+ patch: 0,
6
+ suffix: "-701b14e36",
7
+ isNext: true,
8
+ buildTime: 1652361014,
9
+ };
10
+ export default VersionInfo;
@@ -0,0 +1,5 @@
1
+ export default {
2
+ packageName: "@ui5/webcomponents-base",
3
+ fileName: "BusyIndicator.css",
4
+ content: `.busy-indicator-wrapper{position:relative;height:100%;width:100%}.busy-indicator-overlay{display:var(--ui5_web_components_busy_indicator_display);position:absolute;inset:0;background:var(--ui5_web_components_busy_indicator_background-color);z-index:99}.busy-indicator-busy-area{display:var(--ui5_web_components_busy_indicator_display);position:absolute;z-index:99;inset:0;justify-content:center;align-items:center;background-color:inherit;flex-direction:column;color:var(--_ui5_busy_indicator_color)}:host([__is-busy]) .busy-indicator-wrapper>:not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]){--ui5_web_components_busy_indicator_display:none}.busy-indicator-busy-area:focus{outline:var(--_ui5_busy_indicator_focus_outline);outline-offset:-.125rem}.busy-indicator-circle{width:1rem;height:1rem;display:inline-block;background-color:currentColor;border-radius:50%}.circle-animation-0{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11)}.circle-animation-1{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11);animation-delay:.2s}.circle-animation-2{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11);animation-delay:.4s}.sapUiLocalBusy{--ui5_web_components_busy_indicator_display:none}@keyframes grow{0%,100%,50%{-webkit-transform:scale(.5);-moz-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}25%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}`
5
+ };
@@ -0,0 +1,5 @@
1
+ export default {
2
+ packageName: "@ui5/webcomponents-base",
3
+ fileName: "FontFace.css",
4
+ content: `@font-face{font-family:"72";font-style:normal;font-weight:400;src:local("72"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72full";font-style:normal;font-weight:400;src:local('72-full'),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72";font-style:normal;font-weight:700;src:local('72-Bold'),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72full";font-style:normal;font-weight:700;src:local('72-Bold-full'),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Bold';font-style:normal;src:local('72-Bold'),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Boldfull';font-style:normal;src:url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Light';font-style:normal;src:local('72-Light'),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff")}@font-face{font-family:'72-Lightfull';font-style:normal;src:url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff")}@font-face{font-family:"72Black";font-style:bold;font-weight:900;src:local('72Black'),url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff")}`
5
+ };
@@ -0,0 +1,5 @@
1
+ export default {
2
+ packageName: "@ui5/webcomponents-base",
3
+ fileName: "OverrideFontFace.css",
4
+ content: `@font-face{font-family:'72override';unicode-range:U+0102-0103,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EB7,U+1EB8-1EC7,U+1EC8-1ECB,U+1ECC-1EE3,U+1EE4-1EF1,U+1EF4-1EF7;src:local('Arial'),local('Helvetica'),local('sans-serif')}`
5
+ };