@ui5/webcomponents-base 1.11.0-rc.0 → 1.11.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/Boot.js +4 -0
- package/dist/Boot.js.map +1 -1
- package/dist/Device.js +109 -34
- package/dist/Device.js.map +1 -1
- package/dist/InitialConfiguration.js +1 -1
- package/dist/InitialConfiguration.js.map +1 -1
- package/dist/assets/bundle.esm.25073731.js +56 -0
- package/dist/assets/test/pages/{i18n.html.a765def3.js → i18n.html.4b1c0bdb.js} +1 -1
- package/dist/assets/test/pages/{i18n_texts.html.9a235f8f.js → i18n_texts.html.e98a417d.js} +1 -1
- package/dist/delegate/ResizeHandler.d.ts +2 -1
- package/dist/delegate/ResizeHandler.js +3 -1
- package/dist/delegate/ResizeHandler.js.map +1 -1
- package/dist/features/F6Navigation.d.ts +3 -0
- package/dist/features/F6Navigation.js +77 -38
- package/dist/features/F6Navigation.js.map +1 -1
- package/dist/generated/VersionInfo.js +3 -3
- package/dist/getSharedResource.js +9 -1
- package/dist/getSharedResource.js.map +1 -1
- package/dist/test/pages/AllTestElements.html +1 -1
- package/dist/test/pages/Configuration.html +1 -1
- package/dist/test/pages/ConfigurationScript.html +1 -1
- package/dist/test/pages/WithComplexTemplate.html +1 -1
- package/dist/test/pages/i18n.html +2 -2
- package/dist/test/pages/i18n_texts.html +2 -2
- package/dist/theming/CustomStyle.js +7 -5
- package/dist/theming/CustomStyle.js.map +1 -1
- package/package-scripts.js +5 -1
- package/package.json +3 -3
- package/src/Boot.ts +4 -0
- package/src/Device.ts +113 -34
- package/src/InitialConfiguration.ts +1 -1
- package/src/delegate/ResizeHandler.ts +7 -2
- package/src/features/F6Navigation.ts +98 -44
- package/src/getSharedResource.ts +10 -1
- package/src/theming/CustomStyle.ts +7 -5
- package/dist/assets/bundle.esm.38c84565.js +0 -56
|
@@ -3,6 +3,7 @@ import { isF6Next, isF6Previous } from "../Keys.js";
|
|
|
3
3
|
import { instanceOfUI5Element } from "../UI5Element.js";
|
|
4
4
|
import { getFirstFocusableElement } from "../util/FocusableElements.js";
|
|
5
5
|
import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
|
|
6
|
+
import isElementClickable from "../util/isElementClickable.js";
|
|
6
7
|
class F6Navigation {
|
|
7
8
|
constructor() {
|
|
8
9
|
this.selectedGroup = null;
|
|
@@ -13,47 +14,51 @@ class F6Navigation {
|
|
|
13
14
|
attachEventListeners() {
|
|
14
15
|
document.addEventListener("keydown", this.keydownHandler);
|
|
15
16
|
}
|
|
16
|
-
async
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
if (
|
|
20
|
-
return;
|
|
17
|
+
async groupElementToFocus(nextElement) {
|
|
18
|
+
const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
|
|
19
|
+
if (nextElementDomRef) {
|
|
20
|
+
if (isElementClickable(nextElementDomRef)) {
|
|
21
|
+
return nextElementDomRef;
|
|
21
22
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (this.selectedGroup) {
|
|
26
|
-
nextIndex = this.groups.indexOf(this.selectedGroup);
|
|
23
|
+
const elementToFocus = await getFirstFocusableElement(nextElementDomRef);
|
|
24
|
+
if (elementToFocus) {
|
|
25
|
+
return elementToFocus;
|
|
27
26
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
async findNextFocusableGroupElement(currentIndex) {
|
|
30
|
+
let elementToFocus;
|
|
31
|
+
/* eslint-disable no-await-in-loop */
|
|
32
|
+
for (let index = 0; index < this.groups.length; index++) {
|
|
33
|
+
let nextElement;
|
|
34
|
+
if (currentIndex > -1) {
|
|
35
|
+
if (currentIndex + 1 >= this.groups.length) {
|
|
36
|
+
currentIndex = 0;
|
|
37
|
+
nextElement = this.groups[currentIndex];
|
|
31
38
|
}
|
|
32
39
|
else {
|
|
33
|
-
|
|
40
|
+
currentIndex += 1;
|
|
41
|
+
nextElement = this.groups[currentIndex];
|
|
34
42
|
}
|
|
35
43
|
}
|
|
36
44
|
else {
|
|
37
|
-
|
|
45
|
+
currentIndex = 0;
|
|
46
|
+
nextElement = this.groups[currentIndex];
|
|
38
47
|
}
|
|
39
|
-
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
elementToFocus?.focus();
|
|
48
|
+
elementToFocus = await this.groupElementToFocus(nextElement);
|
|
49
|
+
if (elementToFocus) {
|
|
50
|
+
break;
|
|
43
51
|
}
|
|
44
52
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
53
|
+
/* eslint-enable no-await-in-loop */
|
|
54
|
+
return elementToFocus;
|
|
55
|
+
}
|
|
56
|
+
async findPreviousFocusableGroupElement(currentIndex) {
|
|
57
|
+
let elementToFocus;
|
|
58
|
+
/* eslint-disable no-await-in-loop */
|
|
59
|
+
for (let index = 0; index < this.groups.length; index++) {
|
|
52
60
|
let nextElement;
|
|
53
|
-
if (
|
|
54
|
-
nextIndex = this.groups.indexOf(this.selectedGroup);
|
|
55
|
-
}
|
|
56
|
-
if (nextIndex > 0) {
|
|
61
|
+
if (currentIndex > 0) {
|
|
57
62
|
// Handle the situation where the first focusable element of two neighbor groups is the same
|
|
58
63
|
// For example:
|
|
59
64
|
// <ui5-flexible-column-layout>
|
|
@@ -62,19 +67,53 @@ class F6Navigation {
|
|
|
62
67
|
// </ui5-list>
|
|
63
68
|
// </ui5-flexible-column-layout>
|
|
64
69
|
// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
|
|
65
|
-
const firstFocusable = await
|
|
66
|
-
const shouldSkipParent = firstFocusable === await
|
|
67
|
-
|
|
70
|
+
const firstFocusable = await this.groupElementToFocus(this.groups[currentIndex - 1]);
|
|
71
|
+
const shouldSkipParent = firstFocusable === await this.groupElementToFocus(this.groups[currentIndex]);
|
|
72
|
+
currentIndex = shouldSkipParent ? currentIndex - 2 : currentIndex - 1;
|
|
73
|
+
if (currentIndex < 0) {
|
|
74
|
+
currentIndex = this.groups.length - 1;
|
|
75
|
+
}
|
|
76
|
+
nextElement = this.groups[currentIndex];
|
|
68
77
|
}
|
|
69
78
|
else {
|
|
70
|
-
|
|
79
|
+
currentIndex = this.groups.length - 1;
|
|
80
|
+
nextElement = this.groups[currentIndex];
|
|
71
81
|
}
|
|
72
|
-
|
|
73
|
-
if (
|
|
74
|
-
|
|
75
|
-
elementToFocus?.focus();
|
|
82
|
+
elementToFocus = await this.groupElementToFocus(nextElement);
|
|
83
|
+
if (elementToFocus) {
|
|
84
|
+
break;
|
|
76
85
|
}
|
|
77
86
|
}
|
|
87
|
+
/* eslint-enable no-await-in-loop */
|
|
88
|
+
return elementToFocus;
|
|
89
|
+
}
|
|
90
|
+
async _keydownHandler(event) {
|
|
91
|
+
const forward = isF6Next(event);
|
|
92
|
+
const backward = isF6Previous(event);
|
|
93
|
+
if (!(forward || backward)) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
this.updateGroups();
|
|
97
|
+
if (this.groups.length < 1) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
event.preventDefault();
|
|
101
|
+
let elementToFocus;
|
|
102
|
+
if (this.groups.length === 0) {
|
|
103
|
+
elementToFocus = await this.groupElementToFocus(this.groups[0]);
|
|
104
|
+
return elementToFocus?.focus();
|
|
105
|
+
}
|
|
106
|
+
let currentIndex = -1;
|
|
107
|
+
if (this.selectedGroup) {
|
|
108
|
+
currentIndex = this.groups.indexOf(this.selectedGroup);
|
|
109
|
+
}
|
|
110
|
+
if (forward) {
|
|
111
|
+
elementToFocus = await this.findNextFocusableGroupElement(currentIndex);
|
|
112
|
+
}
|
|
113
|
+
if (backward) {
|
|
114
|
+
elementToFocus = await this.findPreviousFocusableGroupElement(currentIndex);
|
|
115
|
+
}
|
|
116
|
+
elementToFocus?.focus();
|
|
78
117
|
}
|
|
79
118
|
removeEventListeners() {
|
|
80
119
|
document.removeEventListener("keydown", this.keydownHandler);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"F6Navigation.js","sourceRoot":"","sources":["../../src/features/F6Navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"F6Navigation.js","sourceRoot":"","sources":["../../src/features/F6Navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAE/D,MAAM,YAAY;IAMjB;QAHA,kBAAa,GAAuB,IAAI,CAAC;QACzC,WAAM,GAAuB,EAAE,CAAC;QAG/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAmC,CAAC;QACxF,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC7B,CAAC;IAED,oBAAoB;QACnB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAED,KAAK,CAAC,mBAAmB,CAAC,WAAwB;QACjD,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;QAEpG,IAAI,iBAAiB,EAAE;YACtB,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,EAAE;gBAC1C,OAAO,iBAAiB,CAAC;aACzB;YAED,MAAM,cAAc,GAAG,MAAM,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;YAEzE,IAAI,cAAc,EAAE;gBACnB,OAAO,cAAc,CAAC;aACtB;SACD;IACF,CAAC;IAED,KAAK,CAAC,6BAA6B,CAAC,YAAoB;QACvD,IAAI,cAAc,CAAC;QAEnB,qCAAqC;QACrC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACxD,IAAI,WAAW,CAAC;YAEhB,IAAI,YAAY,GAAG,CAAC,CAAC,EAAE;gBACtB,IAAI,YAAY,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;oBAC3C,YAAY,GAAG,CAAC,CAAC;oBACjB,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;iBACxC;qBAAM;oBACN,YAAY,IAAI,CAAC,CAAC;oBAClB,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;iBACxC;aACD;iBAAM;gBACN,YAAY,GAAG,CAAC,CAAC;gBACjB,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;aACxC;YAED,cAAc,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;YAE7D,IAAI,cAAc,EAAE;gBACnB,MAAM;aACN;SACD;QACD,oCAAoC;QAEpC,OAAO,cAAc,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,iCAAiC,CAAC,YAAoB;QAC3D,IAAI,cAAc,CAAC;QAEnB,qCAAqC;QACrC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACxD,IAAI,WAAW,CAAC;YAEhB,IAAI,YAAY,GAAG,CAAC,EAAE;gBACrB,4FAA4F;gBAC5F,eAAe;gBACf,+BAA+B;gBAC/B,iBAAiB;gBACjB,qCAAqC;gBACrC,kBAAkB;gBAClB,gCAAgC;gBAChC,+EAA+E;gBAC/E,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC;gBACrF,MAAM,gBAAgB,GAAG,cAAc,KAAK,MAAM,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;gBAEtG,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;gBAEtE,IAAI,YAAY,GAAG,CAAC,EAAE;oBACrB,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;iBACtC;gBAED,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;aACxC;iBAAM;gBACN,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;gBACtC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;aACxC;YAED,cAAc,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;YAE7D,IAAI,cAAc,EAAE;gBACnB,MAAM;aACN;SACD;QACD,oCAAoC;QAEpC,OAAO,cAAc,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,KAAoB;QACzC,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,EAAE;YAC3B,OAAO;SACP;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,OAAO;SACP;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,cAAc,CAAC;QAEnB,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7B,cAAc,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAEhE,OAAO,cAAc,EAAE,KAAK,EAAE,CAAC;SAC/B;QAED,IAAI,YAAY,GAAG,CAAC,CAAC,CAAC;QAEtB,IAAI,IAAI,CAAC,aAAa,EAAE;YACvB,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SACvD;QAED,IAAI,OAAO,EAAE;YACZ,cAAc,GAAG,MAAM,IAAI,CAAC,6BAA6B,CAAC,YAAY,CAAC,CAAC;SACxE;QAED,IAAI,QAAQ,EAAE;YACb,cAAc,GAAG,MAAM,IAAI,CAAC,iCAAiC,CAAC,YAAY,CAAC,CAAC;SAC5E;QAED,cAAc,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAED,oBAAoB;QACnB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC9D,CAAC;IAED,YAAY;QACX,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC;IAED,gBAAgB,CAAC,OAA6B,MAAM,CAAC,QAAQ;QAC5D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,OAAO,GAAgC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAEjE,OAAO,OAAO,IAAK,OAAmB,CAAC,YAAY,CAAC,0BAA0B,CAAC,KAAK,MAAM,IAAI,OAAO,KAAK,WAAW,EAAE;YACtH,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAE,OAAO,CAAC,UAAyB,CAAC,IAAI,CAAC;SAC/F;QAED,IAAI,CAAC,aAAa,GAAG,OAAsB,CAAC;IAC7C,CAAC;IAED,UAAU,CAAC,IAA0B;QACpC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE;YACxD,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;SACtD;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC3B,CAAC;IAED,OAAO;QACN,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM,CAAC,IAAI;QACV,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACpB,IAAI,CAAC,SAAS,GAAG,IAAI,YAAY,EAAE,CAAC;SACpC;QAED,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;CACD;AAED,eAAe,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AAE9C,eAAe,YAAY,CAAC"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
|
|
2
|
-
const getSharedResourcesInstance = () =>
|
|
2
|
+
const getSharedResourcesInstance = () => {
|
|
3
|
+
if (typeof document === "undefined") {
|
|
4
|
+
return null;
|
|
5
|
+
}
|
|
6
|
+
return getSingletonElementInstance("ui5-shared-resources", document.head);
|
|
7
|
+
};
|
|
3
8
|
/**
|
|
4
9
|
* Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
|
|
5
10
|
* The data will be accessed via a singleton "ui5-shared-resources" HTML element in the "head" element of the page.
|
|
@@ -12,6 +17,9 @@ const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared
|
|
|
12
17
|
const getSharedResource = (namespace, initialValue) => {
|
|
13
18
|
const parts = namespace.split(".");
|
|
14
19
|
let current = getSharedResourcesInstance();
|
|
20
|
+
if (!current) {
|
|
21
|
+
return initialValue;
|
|
22
|
+
}
|
|
15
23
|
for (let i = 0; i < parts.length; i++) {
|
|
16
24
|
const part = parts[i];
|
|
17
25
|
const lastPart = i === parts.length - 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSharedResource.js","sourceRoot":"","sources":["../src/getSharedResource.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,MAAM,uCAAuC,CAAC;AAEhF,MAAM,0BAA0B,GAAG,
|
|
1
|
+
{"version":3,"file":"getSharedResource.js","sourceRoot":"","sources":["../src/getSharedResource.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,MAAM,uCAAuC,CAAC;AAEhF,MAAM,0BAA0B,GAAG,GAAmC,EAAE;IACvE,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;QACpC,OAAO,IAAI,CAAC;KACZ;IACD,OAAO,2BAA2B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,IAAI,CAAuC,CAAC;AACjH,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,iBAAiB,GAAG,CAAI,SAAiB,EAAE,YAAe,EAAK,EAAE;IACtE,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,GAAG,0BAA0B,EAAyB,CAAC;IAElE,IAAI,CAAC,OAAO,EAAE;QACb,OAAO,YAAY,CAAC;KACpB;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,MAAM,QAAQ,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACxC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE;YACzD,OAAO,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;SAC7C;QACD,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;KACxB;IAED,OAAO,OAAY,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
<script type="module" crossorigin src="/assets/test/pages/i18n.html.
|
|
11
|
-
<link rel="modulepreload" href="/assets/bundle.esm.
|
|
10
|
+
<script type="module" crossorigin src="/assets/test/pages/i18n.html.4b1c0bdb.js"></script>
|
|
11
|
+
<link rel="modulepreload" href="/assets/bundle.esm.25073731.js">
|
|
12
12
|
</head>
|
|
13
13
|
|
|
14
14
|
<body>
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
<script type="module" crossorigin src="/assets/test/pages/i18n_texts.html.
|
|
12
|
-
<link rel="modulepreload" href="/assets/bundle.esm.
|
|
11
|
+
<script type="module" crossorigin src="/assets/test/pages/i18n_texts.html.e98a417d.js"></script>
|
|
12
|
+
<link rel="modulepreload" href="/assets/bundle.esm.25073731.js">
|
|
13
13
|
</head>
|
|
14
14
|
|
|
15
15
|
<body>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { reRenderAllUI5Elements } from "../Render.js";
|
|
2
2
|
import getSharedResource from "../getSharedResource.js";
|
|
3
3
|
import EventProvider from "../EventProvider.js";
|
|
4
|
-
const
|
|
4
|
+
const getEventProvider = () => getSharedResource("CustomStyle.eventProvider", new EventProvider());
|
|
5
5
|
const CUSTOM_CSS_CHANGE = "CustomCSSChange";
|
|
6
6
|
const attachCustomCSSChange = (listener) => {
|
|
7
|
-
|
|
7
|
+
getEventProvider().attachEvent(CUSTOM_CSS_CHANGE, listener);
|
|
8
8
|
};
|
|
9
9
|
const detachCustomCSSChange = (listener) => {
|
|
10
|
-
|
|
10
|
+
getEventProvider().detachEvent(CUSTOM_CSS_CHANGE, listener);
|
|
11
11
|
};
|
|
12
12
|
const fireCustomCSSChange = (tag) => {
|
|
13
|
-
return
|
|
13
|
+
return getEventProvider().fireEvent(CUSTOM_CSS_CHANGE, tag);
|
|
14
14
|
};
|
|
15
|
-
const
|
|
15
|
+
const getCustomCSSFor = () => getSharedResource("CustomStyle.customCSSFor", {});
|
|
16
16
|
// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
|
|
17
17
|
// event, and this copy would therefore need to reRender the ui5 webcomponents; but
|
|
18
18
|
// don't reRender if it was this copy that fired the event to begin with.
|
|
@@ -23,6 +23,7 @@ attachCustomCSSChange((tag) => {
|
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
const addCustomCSS = (tag, css) => {
|
|
26
|
+
const customCSSFor = getCustomCSSFor();
|
|
26
27
|
if (!customCSSFor[tag]) {
|
|
27
28
|
customCSSFor[tag] = [];
|
|
28
29
|
}
|
|
@@ -40,6 +41,7 @@ const addCustomCSS = (tag, css) => {
|
|
|
40
41
|
return reRenderAllUI5Elements({ tag });
|
|
41
42
|
};
|
|
42
43
|
const getCustomCSS = (tag) => {
|
|
44
|
+
const customCSSFor = getCustomCSSFor();
|
|
43
45
|
return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
|
|
44
46
|
};
|
|
45
47
|
export { addCustomCSS, getCustomCSS, attachCustomCSSChange, detachCustomCSSChange, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomStyle.js","sourceRoot":"","sources":["../../src/theming/CustomStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAIhD,MAAM,
|
|
1
|
+
{"version":3,"file":"CustomStyle.js","sourceRoot":"","sources":["../../src/theming/CustomStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAIhD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAAC,2BAA2B,EAAE,IAAI,aAAa,EAAgB,CAAC,CAAC;AACjH,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;AAE5C,MAAM,qBAAqB,GAAG,CAAC,QAAiC,EAAE,EAAE;IACnE,gBAAgB,EAAE,CAAC,WAAW,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,QAAiC,EAAE,EAAE;IACnE,gBAAgB,EAAE,CAAC,WAAW,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IAC3C,OAAO,gBAAgB,EAAE,CAAC,SAAS,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAAgC,0BAA0B,EAAE,EAAE,CAAC,CAAC;AAE/G,yFAAyF;AACzF,mFAAmF;AACnF,yEAAyE;AACzE,IAAI,YAAqB,CAAC;AAC1B,qBAAqB,CAAC,CAAC,GAAW,EAAE,EAAE;IACrC,IAAI,CAAC,YAAY,EAAE;QAClB,sBAAsB,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;KAChC;AACF,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE;IACjD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;QACvB,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;KACvB;IACD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,YAAY,GAAG,IAAI,CAAC;IACpB,IAAI;QACH,mFAAmF;QACnF,wGAAwG;QACxG,iEAAiE;QACjE,mBAAmB,CAAC,GAAG,CAAC,CAAC;KACzB;YAAS;QACT,YAAY,GAAG,KAAK,CAAC;KACrB;IAED,OAAO,sBAAsB,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IACpC,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC5D,CAAC,CAAC;AAEF,OAAO,EACN,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,qBAAqB,GACrB,CAAC"}
|
package/package-scripts.js
CHANGED
|
@@ -58,7 +58,11 @@ const scripts = {
|
|
|
58
58
|
styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
|
|
59
59
|
},
|
|
60
60
|
start: "nps prepare watch.withBundle",
|
|
61
|
-
test:
|
|
61
|
+
test: {
|
|
62
|
+
default: 'concurrently "nps test.wdio"',
|
|
63
|
+
ssr: `mocha test/ssr`,
|
|
64
|
+
wdio: `node "${LIB}/test-runner/test-runner.js"`
|
|
65
|
+
},
|
|
62
66
|
};
|
|
63
67
|
|
|
64
68
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ui5/webcomponents-base",
|
|
3
|
-
"version": "1.11.0-rc.
|
|
3
|
+
"version": "1.11.0-rc.1",
|
|
4
4
|
"description": "UI5 Web Components: webcomponents.base",
|
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@buxlabs/amd-to-es6": "0.16.1",
|
|
38
38
|
"@openui5/sap.ui.core": "1.109.0",
|
|
39
|
-
"@ui5/webcomponents-tools": "1.11.0-rc.
|
|
39
|
+
"@ui5/webcomponents-tools": "1.11.0-rc.1",
|
|
40
40
|
"chromedriver": "109.0.0",
|
|
41
41
|
"clean-css": "^5.2.2",
|
|
42
42
|
"copy-and-watch": "^0.1.5",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"replace-in-file": "^6.3.5",
|
|
47
47
|
"resolve": "^1.20.0"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "a76323e09b0190bbb72cbff141bb8093b8d0f4ff"
|
|
50
50
|
}
|
package/src/Boot.ts
CHANGED
|
@@ -27,6 +27,10 @@ const boot = async (): Promise<void> => {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
const bootExecutor = async (resolve: PromiseResolve) => {
|
|
30
|
+
if (typeof document === "undefined") {
|
|
31
|
+
resolve();
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
30
34
|
registerCurrentRuntime();
|
|
31
35
|
|
|
32
36
|
const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
|
package/src/Device.ts
CHANGED
|
@@ -1,30 +1,98 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
const isSSR = typeof document === "undefined";
|
|
2
|
+
|
|
3
|
+
const internals = {
|
|
4
|
+
get userAgent() {
|
|
5
|
+
if (isSSR) {
|
|
6
|
+
return "";
|
|
7
|
+
}
|
|
8
|
+
return navigator.userAgent;
|
|
9
|
+
},
|
|
10
|
+
get touch() {
|
|
11
|
+
if (isSSR) {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
return "ontouchstart" in window || navigator.maxTouchPoints > 0;
|
|
15
|
+
},
|
|
16
|
+
get ie() {
|
|
17
|
+
if (isSSR) {
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
return /(msie|trident)/i.test(internals.userAgent);
|
|
21
|
+
},
|
|
22
|
+
get chrome() {
|
|
23
|
+
if (isSSR) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
return !internals.ie && /(Chrome|CriOS)/.test(internals.userAgent);
|
|
27
|
+
},
|
|
28
|
+
get firefox() {
|
|
29
|
+
if (isSSR) {
|
|
30
|
+
return false;
|
|
31
|
+
}
|
|
32
|
+
return /Firefox/.test(internals.userAgent);
|
|
33
|
+
},
|
|
34
|
+
get safari() {
|
|
35
|
+
if (isSSR) {
|
|
36
|
+
return false;
|
|
37
|
+
}
|
|
38
|
+
return !internals.ie && !internals.chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(internals.userAgent);
|
|
39
|
+
},
|
|
40
|
+
get webkit() {
|
|
41
|
+
if (isSSR) {
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
return !internals.ie && /webkit/.test(internals.userAgent);
|
|
45
|
+
},
|
|
46
|
+
get windows() {
|
|
47
|
+
if (isSSR) {
|
|
48
|
+
return false;
|
|
49
|
+
}
|
|
50
|
+
return navigator.platform.indexOf("Win") !== -1;
|
|
51
|
+
},
|
|
52
|
+
get iOS() {
|
|
53
|
+
if (isSSR) {
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
return !!(navigator.platform.match(/iPhone|iPad|iPod/)) || !!(internals.userAgent.match(/Mac/) && "ontouchend" in document);
|
|
57
|
+
},
|
|
58
|
+
get android() {
|
|
59
|
+
if (isSSR) {
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
return !internals.windows && /Android/.test(internals.userAgent);
|
|
63
|
+
},
|
|
64
|
+
get androidPhone() {
|
|
65
|
+
if (isSSR) {
|
|
66
|
+
return false;
|
|
67
|
+
}
|
|
68
|
+
return internals.android && /(?=android)(?=.*mobile)/i.test(internals.userAgent);
|
|
69
|
+
},
|
|
70
|
+
get ipad() {
|
|
71
|
+
if (isSSR) {
|
|
72
|
+
return false;
|
|
73
|
+
}
|
|
74
|
+
// With iOS 13 the string 'iPad' was removed from the user agent string through a browser setting, which is applied on all sites by default:
|
|
75
|
+
// "Request Desktop Website -> All websites" (for more infos see: https://forums.developer.apple.com/thread/119186).
|
|
76
|
+
// Therefore the OS is detected as MACINTOSH instead of iOS and the device is a tablet if the Device.support.touch is true.
|
|
77
|
+
return /ipad/i.test(internals.userAgent) || (/Macintosh/i.test(internals.userAgent) && "ontouchend" in document);
|
|
78
|
+
},
|
|
79
|
+
};
|
|
16
80
|
|
|
17
81
|
let windowsVersion: number;
|
|
18
82
|
let webkitVersion: number;
|
|
19
83
|
let tablet: boolean;
|
|
20
84
|
|
|
21
85
|
const isWindows8OrAbove = () => {
|
|
22
|
-
if (
|
|
86
|
+
if (isSSR) {
|
|
87
|
+
return false;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
if (!internals.windows) {
|
|
23
91
|
return false;
|
|
24
92
|
}
|
|
25
93
|
|
|
26
94
|
if (windowsVersion === undefined) {
|
|
27
|
-
const matches =
|
|
95
|
+
const matches = internals.userAgent.match(/Windows NT (\d+).(\d)/);
|
|
28
96
|
windowsVersion = matches ? parseFloat(matches[1]) : 0;
|
|
29
97
|
}
|
|
30
98
|
|
|
@@ -32,12 +100,16 @@ const isWindows8OrAbove = () => {
|
|
|
32
100
|
};
|
|
33
101
|
|
|
34
102
|
const isWebkit537OrAbove = () => {
|
|
35
|
-
if (
|
|
103
|
+
if (isSSR) {
|
|
104
|
+
return false;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
if (!internals.webkit) {
|
|
36
108
|
return false;
|
|
37
109
|
}
|
|
38
110
|
|
|
39
111
|
if (webkitVersion === undefined) {
|
|
40
|
-
const matches =
|
|
112
|
+
const matches = internals.userAgent.match(/(webkit)[ /]([\w.]+)/);
|
|
41
113
|
webkitVersion = matches ? parseFloat(matches[1]) : 0;
|
|
42
114
|
}
|
|
43
115
|
|
|
@@ -45,28 +117,32 @@ const isWebkit537OrAbove = () => {
|
|
|
45
117
|
};
|
|
46
118
|
|
|
47
119
|
const detectTablet = () => {
|
|
120
|
+
if (isSSR) {
|
|
121
|
+
return false;
|
|
122
|
+
}
|
|
123
|
+
|
|
48
124
|
if (tablet !== undefined) {
|
|
49
125
|
return;
|
|
50
126
|
}
|
|
51
127
|
|
|
52
|
-
if (ipad) {
|
|
128
|
+
if (internals.ipad) {
|
|
53
129
|
tablet = true;
|
|
54
130
|
return;
|
|
55
131
|
}
|
|
56
132
|
|
|
57
|
-
if (touch) {
|
|
133
|
+
if (internals.touch) {
|
|
58
134
|
if (isWindows8OrAbove()) {
|
|
59
135
|
tablet = true;
|
|
60
136
|
return;
|
|
61
137
|
}
|
|
62
138
|
|
|
63
|
-
if (chrome && android) {
|
|
64
|
-
tablet = !/Mobile Safari\/[.0-9]+/.test(
|
|
139
|
+
if (internals.chrome && internals.android) {
|
|
140
|
+
tablet = !/Mobile Safari\/[.0-9]+/.test(internals.userAgent);
|
|
65
141
|
return;
|
|
66
142
|
}
|
|
67
143
|
|
|
68
144
|
let densityFactor = window.devicePixelRatio ? window.devicePixelRatio : 1; // may be undefined in Windows Phone devices
|
|
69
|
-
if (android && isWebkit537OrAbove()) {
|
|
145
|
+
if (internals.android && isWebkit537OrAbove()) {
|
|
70
146
|
densityFactor = 1;
|
|
71
147
|
}
|
|
72
148
|
|
|
@@ -74,26 +150,29 @@ const detectTablet = () => {
|
|
|
74
150
|
return;
|
|
75
151
|
}
|
|
76
152
|
|
|
77
|
-
tablet = (ie &&
|
|
153
|
+
tablet = (internals.ie && internals.userAgent.indexOf("Touch") !== -1) || (internals.android && !internals.androidPhone);
|
|
78
154
|
};
|
|
79
155
|
|
|
80
|
-
const supportsTouch = (): boolean => touch;
|
|
81
|
-
const isIE = (): boolean => ie;
|
|
82
|
-
const isSafari = (): boolean => safari;
|
|
83
|
-
const isChrome = (): boolean => chrome;
|
|
84
|
-
const isFirefox = (): boolean => firefox;
|
|
156
|
+
const supportsTouch = (): boolean => internals.touch;
|
|
157
|
+
const isIE = (): boolean => internals.ie;
|
|
158
|
+
const isSafari = (): boolean => internals.safari;
|
|
159
|
+
const isChrome = (): boolean => internals.chrome;
|
|
160
|
+
const isFirefox = (): boolean => internals.firefox;
|
|
85
161
|
|
|
86
162
|
const isTablet = (): boolean => {
|
|
87
163
|
detectTablet();
|
|
88
|
-
return (touch || isWindows8OrAbove()) && tablet;
|
|
164
|
+
return (internals.touch || isWindows8OrAbove()) && tablet;
|
|
89
165
|
};
|
|
90
166
|
|
|
91
167
|
const isPhone = (): boolean => {
|
|
92
168
|
detectTablet();
|
|
93
|
-
return touch && !tablet;
|
|
169
|
+
return internals.touch && !tablet;
|
|
94
170
|
};
|
|
95
171
|
|
|
96
172
|
const isDesktop = (): boolean => {
|
|
173
|
+
if (isSSR) {
|
|
174
|
+
return false;
|
|
175
|
+
}
|
|
97
176
|
return (!isTablet() && !isPhone()) || isWindows8OrAbove();
|
|
98
177
|
};
|
|
99
178
|
|
|
@@ -102,11 +181,11 @@ const isCombi = (): boolean => {
|
|
|
102
181
|
};
|
|
103
182
|
|
|
104
183
|
const isIOS = (): boolean => {
|
|
105
|
-
return iOS;
|
|
184
|
+
return internals.iOS;
|
|
106
185
|
};
|
|
107
186
|
|
|
108
187
|
const isAndroid = (): boolean => {
|
|
109
|
-
return android || androidPhone;
|
|
188
|
+
return internals.android || internals.androidPhone;
|
|
110
189
|
};
|
|
111
190
|
|
|
112
191
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { instanceOfUI5Element } from "../UI5Element.js";
|
|
2
2
|
|
|
3
|
-
type ResizeObserverCallback = () => void;
|
|
3
|
+
type ResizeObserverCallback = () => Promise<void> | void;
|
|
4
4
|
|
|
5
5
|
let resizeObserver: ResizeObserver;
|
|
6
6
|
const observedElements = new Map<HTMLElement, Array<ResizeObserverCallback>>();
|
|
@@ -10,7 +10,9 @@ const getResizeObserver = () => {
|
|
|
10
10
|
resizeObserver = new window.ResizeObserver(entries => {
|
|
11
11
|
entries.forEach(entry => {
|
|
12
12
|
const callbacks = observedElements.get(entry.target as HTMLElement);
|
|
13
|
-
|
|
13
|
+
// Callbacks could be async and we need to handle returned promises to comply with the eslint "no-misused-promises" rule.
|
|
14
|
+
// Although Promise.all awaits all, we don't additonal task after calling the callbacks and should not make any difference.
|
|
15
|
+
callbacks && Promise.all(callbacks.map((callback: ResizeObserverCallback) => callback()));
|
|
14
16
|
});
|
|
15
17
|
});
|
|
16
18
|
}
|
|
@@ -93,3 +95,6 @@ class ResizeHandler {
|
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
export default ResizeHandler;
|
|
98
|
+
export type {
|
|
99
|
+
ResizeObserverCallback,
|
|
100
|
+
};
|