From 3e674e5fb058e22058a5ad5960e459954aa15358 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Mon, 25 Nov 2024 14:57:24 +0200
Subject: [PATCH] chore: ai button

---
 packages/ai/src/Button.ts          |  8 +++++---
 packages/ai/src/ButtonTemplate.tsx | 24 ++++++++++++++++++++++++
 packages/ai/tsconfig.json          |  2 ++
 3 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 packages/ai/src/ButtonTemplate.tsx

diff --git a/packages/ai/src/Button.ts b/packages/ai/src/Button.ts
index fd8193098c7a..54066869f6a9 100644
--- a/packages/ai/src/Button.ts
+++ b/packages/ai/src/Button.ts
@@ -4,13 +4,14 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import bound from "@ui5/webcomponents-base/dist/decorators/bound.js";
+import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import MainButton from "@ui5/webcomponents/dist/Button.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 import ButtonState from "./ButtonState.js";
 
-import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
+import ButtonTemplate from "./ButtonTemplate.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
@@ -47,7 +48,7 @@ import ButtonCss from "./generated/themes/Button.css.js";
 @customElement({
 	tag: "ui5-ai-button",
 	languageAware: true,
-	renderer: litRender,
+	renderer: jsxRender,
 	template: ButtonTemplate,
 	styles: ButtonCss,
 	dependencies: [MainButton, Icon, ButtonState],
@@ -216,6 +217,7 @@ class Button extends UI5Element {
 	 * Handles the click event.
 	 * @private
 	 */
+	@bound
 	_onclick(e: MouseEvent): void {
 		e.stopImmediatePropagation();
 		this.fireDecoratorEvent("click");
diff --git a/packages/ai/src/ButtonTemplate.tsx b/packages/ai/src/ButtonTemplate.tsx
new file mode 100644
index 000000000000..938097e7a796
--- /dev/null
+++ b/packages/ai/src/ButtonTemplate.tsx
@@ -0,0 +1,24 @@
+import MainButton from "@ui5/webcomponents/dist/Button.js";
+import Button from "./Button.js";
+
+export default function(this: Button) {
+	return (<>
+		<MainButton
+			class="ui5-ai-button-inner"
+			design={this.design}
+			icon={this._stateIcon}
+			endIcon={this._stateEndIcon}
+			disabled={this.disabled}
+			onClick={this._onclick}
+		>
+			{this._hasText && (
+				<div class="ui5-ai-button-text">{this._stateText}</div>
+			)}
+		</MainButton>
+
+		<MainButton
+			class="ui5-ai-button-hidden"
+			design={this.design}
+		></MainButton>
+	</>);
+};
diff --git a/packages/ai/tsconfig.json b/packages/ai/tsconfig.json
index f3ef5b4c8afe..689aa76bc6d0 100644
--- a/packages/ai/tsconfig.json
+++ b/packages/ai/tsconfig.json
@@ -10,6 +10,8 @@
 		"verbatimModuleSyntax": true,
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../base/src/*"