chore: ai button

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");

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>
+	</>);
+};

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/*"