chore: rename WebComponent to UI5Element (#346)

Author: ilhan007

packages/base/src/DOMEventHandler.js

@@ -1,6 +1,6 @@
 import ControlEvents from "./events/ControlEvents.js";
 import getOriginalEventTarget from "./events/getOriginalEventTarget.js";
-import WebComponent from "./WebComponent.js";
+import UI5Element from "./UI5Element.js";
 
 const handleEvent = function handleEvent(event) {
 	// Get the DOM node where the original event occurred
@@ -19,15 +19,15 @@ const handleEvent = function handleEvent(event) {
 
 
 const processDOMNode = function processDOMNode(node, event) {
-	if (node && node instanceof WebComponent) {
+	if (node && node instanceof UI5Element) {
 		return dispatchEvent(node, event);
 	}
 	return true;
 };
 
-const dispatchEvent = function dispatchEvent(ui5WebComponent, event) {
+const dispatchEvent = function dispatchEvent(element, event) {
 	// Handle the original event (such as "keydown")
-	ui5WebComponent._handleEvent(event);
+	element._handleEvent(event);
 	if (event.isImmediatePropagationStopped()) {
 		return false;
 	}

packages/base/src/FocusHelper.js

@@ -1,4 +1,4 @@
-import WebComponent from "./WebComponent.js";
+import UI5Element from "./UI5Element.js";
 
 const rFocusable = /^(?:input|select|textarea|button)$/i,
 	rClickable = /^(?:a|area)$/i;
@@ -36,7 +36,7 @@ class FocusHelper {
 	}
 
 	static getCorrectElement(element) {
-		if (element instanceof WebComponent) {
+		if (element instanceof UI5Element) {
 			// Focus the CustomElement itself or provide getDomRef of each ?
 			return element.getFocusDomRef();
 		}

packages/base/src/WebComponent.js packages/base/src/UI5Element.jspackages/base/src/WebComponent.js renamed to packages/base/src/UI5Element.js

@@ -1,7 +1,7 @@
 import { getWCNoConflict } from "./Configuration.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
 import ShadowDOM from "./compatibility/ShadowDOM.js";
-import WebComponentMetadata from "./WebComponentMetadata.js";
+import UI5ElementMetadata from "./UI5ElementMetadata.js";
 import Integer from "./types/Integer.js";
 import ControlRenderer from "./ControlRenderer.js";
 import RenderScheduler from "./RenderScheduler.js";
@@ -36,7 +36,7 @@ const metadata = {
 const DefinitionsSet = new Set();
 const IDMap = new Map();
 
-class WebComponent extends HTMLElement {
+class UI5Element extends HTMLElement {
 	constructor() {
 		super();
 		this._generateId();
@@ -212,7 +212,7 @@ class WebComponent extends HTMLElement {
 	}
 
 	_updateAttribute(name, newValue) {
-		if (!WebComponentMetadata.isPublicProperty(name)) {
+		if (!UI5ElementMetadata.isPublicProperty(name)) {
 			return;
 		}
 
@@ -289,7 +289,7 @@ class WebComponent extends HTMLElement {
 		}
 
 		const metadatas = [Object.assign(klass.metadata, {})];
-		while (klass !== WebComponent) {
+		while (klass !== UI5Element) {
 			klass = Object.getPrototypeOf(klass);
 			metadatas.push(klass.metadata);
 		}
@@ -314,7 +314,7 @@ class WebComponent extends HTMLElement {
 			return result;
 		}, {});
 
-		this._metadata = new WebComponentMetadata(result);
+		this._metadata = new UI5ElementMetadata(result);
 		return this._metadata;
 	}
 
@@ -507,7 +507,7 @@ class WebComponent extends HTMLElement {
 		// This will be false if the normal event is prevented
 		const normalEventResult = this.dispatchEvent(customEvent);
 
-		if (WebComponent.noConflictEvents.includes(name)) {
+		if (UI5Element.noConflictEvents.includes(name)) {
 			customEvent = new CustomEvent(`ui5-${name}`, {
 				detail: data,
 				composed: false,
@@ -636,4 +636,4 @@ const nameCollidesWithNative = name => {
 	return classes.some(klass => klass.prototype.hasOwnProperty(name)); // eslint-disable-line
 };
 
-export default WebComponent;
+export default UI5Element;

packages/base/src/WebComponentMetadata.js packages/base/src/UI5ElementMetadata.jspackages/base/src/WebComponentMetadata.js renamed to packages/base/src/UI5ElementMetadata.js

@@ -1,7 +1,7 @@
 import DataType from "./types/DataType.js";
 import Function from "./types/Function.js";
 
-class WebComponentMetadata {
+class UI5ElementMetadata {
 	constructor(metadata) {
 		this.metadata = metadata;
 	}
@@ -25,7 +25,7 @@ class WebComponentMetadata {
 	getObservedProps() {
 		const properties = this.getProperties();
 		const allProps = Object.keys(properties);
-		const observedProps = allProps.filter(WebComponentMetadata.isPublicProperty);
+		const observedProps = allProps.filter(UI5ElementMetadata.isPublicProperty);
 		return observedProps;
 	}
 
@@ -118,4 +118,4 @@ const isDescendantOf = (klass, baseKlass, inclusive = false) => {
 	return parent === baseKlass;
 };
 
-export default WebComponentMetadata;
+export default UI5ElementMetadata;

packages/base/src/delegate/ItemNavigation.js

@@ -8,7 +8,7 @@ import {
 } from "../events/PseudoEvents.js";
 
 import EventProvider from "../EventProvider.js";
-import WebComponent from "../WebComponent.js";
+import UI5Element from "../UI5Element.js";
 
 // navigatable items must have id and tabindex
 class ItemNavigation extends EventProvider {
@@ -180,7 +180,7 @@ class ItemNavigation extends EventProvider {
 
 		const currentItem = items[this.currentIndex];
 
-		if (currentItem instanceof WebComponent) {
+		if (currentItem instanceof UI5Element) {
 			return currentItem.getFocusDomRef();
 		}
 

packages/base/src/delegate/ResizeHandler.js

@@ -1,4 +1,4 @@
-import WebComponent from "../WebComponent.js";
+import UI5Element from "../UI5Element.js";
 import NativeResize from "./NativeResize.js";
 import CustomResize from "./CustomResize.js";
 
@@ -38,7 +38,7 @@ class ResizeHandler {
 	 * @memberof ResizeHandler
 	 */
 	static register(ref, callback) {
-		if (ref instanceof WebComponent) {
+		if (ref instanceof UI5Element) {
 			ref = ref.getDomRef();
 		}
 
@@ -53,7 +53,7 @@ class ResizeHandler {
 	 * @memberof ResizeHandler
 	 */
 	static deregister(ref, callback) {
-		if (ref instanceof WebComponent) {
+		if (ref instanceof UI5Element) {
 			ref = ref.getDomRef();
 		}
 

packages/main/src/Button.js

@@ -1,4 +1,4 @@
-import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import URI from "@ui5/webcomponents-base/src/types/URI.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
@@ -134,12 +134,12 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Button
- * @extends WebComponent
+ * @extends UI5Element
  * @tagname ui5-button
  * @usestextcontent
  * @public
  */
-class Button extends WebComponent {
+class Button extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}

packages/main/src/Calendar.js

@@ -1,6 +1,6 @@
 import "@ui5/webcomponents-base/src/shims/jquery-shim.js";
 import "@ui5/webcomponents-base/src/shims/Core-shim.js";
-import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js";
@@ -103,11 +103,11 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Calendar
- * @extends sap.ui.webcomponents.base.WebComponent
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-calendar
  * @public
  */
-class Calendar extends WebComponent {
+class Calendar extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}

packages/main/src/CalendarHeader.js

@@ -1,4 +1,4 @@
-import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import CalendarHeaderTemplateContext from "./CalendarHeaderTemplateContext.js";
@@ -39,7 +39,7 @@ const metadata = {
 	},
 };
 
-class CalendarHeader extends WebComponent {
+class CalendarHeader extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}

packages/main/src/Card.js

@@ -1,4 +1,4 @@
-import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import URI from "@ui5/webcomponents-base/src/types/URI.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { isIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
@@ -122,11 +122,11 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Card
- * @extends sap.ui.webcomponents.base.WebComponent
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-card
  * @public
  */
-class Card extends WebComponent {
+class Card extends UI5Element {
 	constructor() {
 		super();