diff --git a/packages/base/src/Configuration.js b/packages/base/src/Configuration.js
index 5b98fcbecc18..dc341cf48c2c 100644
--- a/packages/base/src/Configuration.js
+++ b/packages/base/src/Configuration.js
@@ -37,6 +37,10 @@ const getWCNoConflict = () => {
return CONFIGURATION["xx-wc-no-conflict"];
};
+const _setWCNoConflict = value => {
+ CONFIGURATION["xx-wc-no-conflict"] = value;
+};
+
/* Calendar stuff */
const getCalendarType = () => {
if (CONFIGURATION.calendarType) {
@@ -125,6 +129,7 @@ export {
getCalendarType,
getLocale,
_setTheme,
+ _setWCNoConflict,
getSupportedLanguages,
getOriginInfo,
};
diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
index 0b7d04958a87..a0c05294e0b8 100644
--- a/packages/base/src/UI5Element.js
+++ b/packages/base/src/UI5Element.js
@@ -502,29 +502,32 @@ class UI5Element extends HTMLElement {
*/
fireEvent(name, data, cancelable) {
let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
+ const noConflict = getWCNoConflict();
- let customEvent = new CustomEvent(name, {
+ const noConflictEvent = new CustomEvent(`ui5-${name}`, {
detail: data,
composed: false,
bubbles: true,
cancelable,
});
- // This will be false if the normal event is prevented
- const normalEventResult = this.dispatchEvent(customEvent);
+ // This will be false if the compat event is prevented
+ compatEventResult = this.dispatchEvent(noConflictEvent);
- if (UI5Element.noConflictEvents.includes(name)) {
- customEvent = new CustomEvent(`ui5-${name}`, {
- detail: data,
- composed: false,
- bubbles: true,
- cancelable,
- });
-
- // This will be false if the compat event is prevented
- compatEventResult = this.dispatchEvent(customEvent);
+ if (noConflict === true || (noConflict.events && noConflict.events.includes && noConflict.events.includes(name))) {
+ return compatEventResult;
}
+ const customEvent = new CustomEvent(name, {
+ detail: data,
+ composed: false,
+ bubbles: true,
+ cancelable,
+ });
+
+ // This will be false if the normal event is prevented
+ const normalEventResult = this.dispatchEvent(customEvent);
+
// Return false if any of the two events was prevented (its result was false).
return normalEventResult && compatEventResult;
}
@@ -610,18 +613,6 @@ class UI5Element extends HTMLElement {
},
});
}
-
- static get noConflictEvents() {
- if (!this._noConflictEvents) {
- const noConflictConfig = getWCNoConflict();
- this._noConflictEvents = [];
- if (typeof noConflictConfig === "object" && typeof noConflictConfig.events === "string") {
- this._noConflictEvents = noConflictConfig.events.split(",").map(evtName => evtName.trim());
- }
- }
-
- return this._noConflictEvents;
- }
}
const kebabToCamelCase = string => toCamelCase(string.split("-"));
const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
diff --git a/packages/main/src/Calendar.hbs b/packages/main/src/Calendar.hbs
index 0785c572b4d9..cff4811f075d 100644
--- a/packages/main/src/Calendar.hbs
+++ b/packages/main/src/Calendar.hbs
@@ -5,10 +5,10 @@
month-text="{{ctr._header.monthText}}"
year-text="{{ctr._header.yearText}}"
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
- @pressPrevious="{{ctr._header.onPressPrevious}}"
- @pressNext="{{ctr._header.onPressNext}}"
- @btn1Press="{{ctr._header.onBtn1Press}}"
- @btn2Press="{{ctr._header.onBtn2Press}}"
+ @ui5-pressPrevious="{{ctr._header.onPressPrevious}}"
+ @ui5-pressNext="{{ctr._header.onPressNext}}"
+ @ui5-btn1Press="{{ctr._header.onBtn1Press}}"
+ @ui5-btn2Press="{{ctr._header.onBtn2Press}}"
>
@@ -20,8 +20,8 @@
._hidden="{{ctr._oMonth._hidden}}"
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
timestamp="{{ctr._oMonth.timestamp}}"
- @selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
- @navigate="{{ctr._oMonth.onNavigate}}"
+ @ui5-selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
+ @ui5-navigate="{{ctr._oMonth.onNavigate}}"
>
\ No newline at end of file
diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs
index 8ae2a5911bd8..22834820291b 100644
--- a/packages/main/src/DatePicker.hbs
+++ b/packages/main/src/DatePicker.hbs
@@ -11,8 +11,8 @@
?disabled="{{ctr.disabled}}"
?readonly="{{ctr.readonly}}"
value-state="{{ctr.valueState}}"
- @change="{{ctr._input.onChange}}"
- @input="{{ctr._input.onLiveChange}}"
+ @ui5-change="{{ctr._input.onChange}}"
+ @ui5-input="{{ctr._input.onLiveChange}}"
data-sap-focus-ref
>
{{#if showIcon}}
@@ -35,8 +35,8 @@
horizontal-align="{{ctr._popover.horizontalAlign}}"
stay-open-on-scroll="{{ctr._popover.stayOpenOnScroll}}"
.customClasses="{{ctr._popover._customClasses}}"
- @afterClose="{{ctr._popover.afterClose}}"
- @afterOpen="{{ctr._popover.afterOpen}}"
+ @ui5-afterClose="{{ctr._popover.afterClose}}"
+ @ui5-afterOpen="{{ctr._popover.afterOpen}}"
>
diff --git a/packages/main/src/List.js b/packages/main/src/List.js
index 14091eb460c2..a434458b2147 100644
--- a/packages/main/src/List.js
+++ b/packages/main/src/List.js
@@ -257,11 +257,11 @@ class List extends UI5Element {
this._previouslySelectedItem = null;
- this.addEventListener("_press", this.onItemPress.bind(this));
- this.addEventListener("_focused", this.onItemFocused.bind(this));
- this.addEventListener("_forwardAfter", this.onForwardAfter.bind(this));
- this.addEventListener("_forwardBefore", this.onForwardBefore.bind(this));
- this.addEventListener("_selectionRequested", this.onSelectionRequested.bind(this));
+ this.addEventListener("ui5-_press", this.onItemPress.bind(this));
+ this.addEventListener("ui5-_focused", this.onItemFocused.bind(this));
+ this.addEventListener("ui5-_forwardAfter", this.onForwardAfter.bind(this));
+ this.addEventListener("ui5-_forwardBefore", this.onForwardBefore.bind(this));
+ this.addEventListener("ui5-_selectionRequested", this.onSelectionRequested.bind(this));
}
onBeforeRendering() {
diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
index 910cc23af709..2e33daf97495 100644
--- a/packages/main/src/ListItem.hbs
+++ b/packages/main/src/ListItem.hbs
@@ -48,7 +48,7 @@
id="{{ctr._id}}-deleteSelectionControl"
type="Transparent"
icon="sap-icon://decline"
- @press="{{ctr._fnOnDelete}}"
+ @ui5-press="{{ctr._fnOnDelete}}"
>
{{/if}}
diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
index a3498ac67d24..f66b412ef2d8 100644
--- a/packages/main/src/MessageStrip.hbs
+++ b/packages/main/src/MessageStrip.hbs
@@ -10,7 +10,7 @@
class="{{classes.closeIcon}}"
src="sap-icon://decline"
tabindex="0"
- @press="{{ctr._closeButton.press}}">
+ @ui5-press="{{ctr._closeButton.press}}">
{{/unless}}
diff --git a/packages/main/src/Panel.hbs b/packages/main/src/Panel.hbs
index 23d2a67c38a9..f4e048c2e1b0 100644
--- a/packages/main/src/Panel.hbs
+++ b/packages/main/src/Panel.hbs
@@ -16,7 +16,7 @@
tabindex="{{iconTabIndex}}"
aria-expanded="{{expanded}}"
aria-labelledby="{{ariaLabelledBy}}"
- @press="{{ctr._icon.press}}"
+ @ui5-press="{{ctr._icon.press}}"
>
{{> header}}
diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
index 372072d300c6..15207c5d22ca 100644
--- a/packages/main/src/Select.hbs
+++ b/packages/main/src/Select.hbs
@@ -25,6 +25,6 @@
diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs
index b1d637f92b5f..c44cf43c6658 100644
--- a/packages/main/src/ShellBar.hbs
+++ b/packages/main/src/ShellBar.hbs
@@ -27,7 +27,7 @@
{{/if}}